2. 程式人生 > 實用技巧 >java css學習筆記：案例製作網頁

java css學習筆記：案例製作網頁

阿新 • • 發佈：2020-08-21 
/*案例：製作網頁，程式碼後附詳細解釋/
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      /*css初始化*/
      body,
      div,
      ul,
      li,
      input,
      p,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 
 
{
        margin: 0;
        padding: 0;
        font: 12px simsun;
        color: #000;
      }
      ul,
      li {
        list-style: none;
      }
      a {
        text-decoration: none;
        color: #000;
      }
      .fl {
        float: left;
      }
      .fr {
        float: right;
      }

      /*
 
頂部導航開始*/
      .top-nav {
        height: 26px;
        background: #f7f7f7;
        border-bottom: 1px solid #d8d8d8;
      }
      .top-nav-con {
        width: 970px;
        margin: 0 auto;
        height: 26px;
      }
      .top-nav-r ul li {
        float: left;
        height: 26px;
        line-height
 
: 26px;
      }
      .top-nav-l {
        height: 26px;
        line-height: 26px;
      }

      .top-nav-r ul li a {
        display: inline-block;
        height: 26px;
        background: url("images/sj.png") no-repeat right;
        padding: 0 10px;
      }
      /*logo部分開始*/
      .logo {
        width: 970px;
        height: 84px;
        margin: 0 auto;
      }
      .logo-pic {
        width: 200px;
        height: 84px;
      }
      .search {
        width: 519px;
        height: 30px;
        border: 1px solid #c9c9c9;
        background: #f9f9f9;
        margin-top: 28px;
        padding: 5px 5px 5px 4px;
      }
      .search input[type="text"] {
        width: 419px;
        height: 28px;
        border: 1px solid #a6a6a6;
        border-right: 0 none;
        vertical-align: middle;
      }
      .search input[type="button"] {
        width: 99px;
        height: 30px;
        background: url("images/serch.png");
        vertical-align: middle;
      }
      /*主導航開始*/
      .nav {
        width: 970px;
        height: 25px;
        margin: 10px auto;
        border-bottom: 2px solid #0266a3;
      }
      .nav li {
        float: left;
      }
      .nav li a {
        display: inline-block;
        height: 25px;
        line-height: 25px;
        padding: 0 15px;
        color: #0266a3;
      }
      .nav li a:hover {
        background: #0266a3;
        color: #fff;
      }
      /*寵物市場部分開始*/
      .mar {
        width: 970px;
        height: 210px;
        margin: 0 auto;
      }
      .mar-left {
        width: 200px;
        height: 210px;
        background: #ebf0f6;
      }
      .mar-title {
        height: 30px;
        background: #0266a3;
        line-height: 30px;
        color: #fff;
        padding-left: 20px;
      }
      .mar-list {
        margin-top: 5px;
      }
      .mar-list li {
        height: 28px;
        line-height: 28px;
        padding-left: 39px;
      }
      .mar-list li.icon1 {
        background: url("images/icon_1.png") no-repeat 9px;
      }
      /*狗狗種類*/
      .bud {
        height: 34px;
        width: 948px;
        margin: 14px auto 11px;
        background: #ecf1f7;
        border-top: #c3d7e4 2px solid;
        font-size: 14px;
        font-weight: 700;
        line-height: 34px;
        padding-left: 22px;
      }
      /*狗狗種類列表*/
      .pro {
        width: 970px;
        height: 344px;
        margin: 0 auto;
      }
      .pro-left {
        width: 727px;
        height: 344px;
        border: 1px solid #d8d8d8;
      }
      .pro-right {
        width: 228px;
        height: 344px;
        border: 1px solid #d8d8d8;
      }
      .pro-left-t {
        width: 656px;
        height: 142px;
        margin: 15px 0px 14px 26px;
      }
      .pro-pic-l {
        width: 318px;
        height: 142px;
      }
      .pro-pic-r {
        width: 318px;
        height: 142px;
      }
      .pro-pic-ll {
        width: 97px;
        height: 142px;
      }
      .pro-pic-llt {
        width: 97px;
        height: 100px;
        text-align: center;
      }
      .pro-pic-llt img {
        margin-top: 17.5px;
      }
      .pro-pic-btn input {
        width: 98px;
        height: 26px;
        background: url("images/buy.png");
        margin-top: 15px;
      }
      .pro-pic-lr p {
        margin-left: 10px;
        font-size: 14px;
      }
      .pro-pic-lr p span {
        color: #ff0000;
        font-weight: 700;
      }
      .pro-pic-lr p del {
        font-size: 12px;
      }
      .pro-pic-lr p.txt1 {
        height: 28px;
        margin-top: 10px;
      }
      .pro-pic-lr p.txt2 {
        height: 49px;
      }
      .pro-pic-lr p.txt3 {
        height: 38px;
      }
      .pro-line {
        border-top: 1px solid black;
        margin: 0 5px;
      }
      .pro-right-title {
        height: 28px;
        line-height: 28px;
        padding-left: 15px;
        background: #fbfbfb;
        border-bottom: 1px solid #e0e6f0;
      }
      .pro-right ul {
        margin-top: 17px;
      }
      .pro-right ul li {
        padding-left: 25px;
        height: 24px;
        background: url("images/li_bg.png") no-repeat 10px 6px;
      }
      .pro-right ul li a:hover {
        color: #ff0000;
        text-decoration: underline;
      }
      /*狗糧種類列表*/
      .dogFood {
        width: 970px;
        height: 326px;
        margin: 0 auto;
      }
      .dogFood-left {
        width: 722px;
        height: 326px;
      }
      .dogFood-l-t {
        height: 23px;
        border-bottom: 2px solid #00b0e7;
      }
      .dogFood-l-b {
        height: 301px;
        border: 1px solid #cacaca;
      }
      .dogFood-l-t h3 {
        width: 100px;
        text-align: right;
        font-size: 14px;
        color: #00b0e7;
        font-weight: 700;
        height: 23px;
        line-height: 23px;
        margin-left: auto;
      }
      .dogFood-pic {
        width: 164px;
        text-align: center;
        margin: 5px 0 0 13px;
      }
      .dogFood-pic p.et1 {
        height: 43px;
        margin-top: 9px;
      }
      .dogFood-pic p.et2,
      .dogFood-pic p.et3 {
        color: #999;
        height: 24px;
      }
      .dogFood-pic p.et3 del,
      .dogFood-pic p.et4 span {
        color: #990000;
      }
      .dogFood-right {
        width: 218px;
        height: 326px;
      }
      /*foot部分*/
      .copyright {
        height: 91px;
        text-align: center;
      }
      .copyright p.copy {
        height: 24px;
        margin-top: 13px;
      }
    </style>
  </head>
  <body>
    <!-- 頂部導航 -->
    <div class="top-nav">
      <div class="top-nav-con">
        <div class="top-nav-l fl">您好，歡迎來到愛寵網</div>
        <div class="top-nav-r fr">
          <ul>
            <li><a href="#">網站導航</a></li>
            <li><a href="#">我的訂單</a></li>
            <li><a href="#">愛寵會員</a></li>
            <li><a href="#">我的收藏</a></li>
            <li><a href="#">客戶服務</a></li>
            <li><a href="#">聯絡我們</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- logo部分 -->
    <div class="logo">
      <div class="logo-pic fl"><img src="images/案例logo.png" alt="" /></div>
      <div class="search fr">
        <input type="text" value="請輸入關鍵字" /><input type="button" />
      </div>
    </div>
    <!-- 主導航部分 -->
    <div class="nav">
      <ul>
        <li><a href="#">首頁</a></li>
        <li><a href="#">狗狗</a></li>
        <li><a href="#">狗糧</a></li>
        <li><a href="#">售後</a></li>
      </ul>
    </div>
    <!-- 寵物市場部分 -->
    <div class="mar">
      <!-- 市場左盒子 -->
      <div class="mar-left fl">
        <div class="mar-title">寵物市場</div>
        <div class="mar-list">
          <ul>
            <li class="icon1"><a href="#">寵物狗</a></li>
            <li class="icon1"><a href="#">寵物貓</a></li>
            <li class="icon1"><a href="#">寵物鼠</a></li>
            <li class="icon1"><a href="#">寵物兔</a></li>
            <li class="icon1"><a href="#">寵物豬</a></li>
            <li class="icon1"><a href="#">寵物飼料</a></li>
          </ul>
        </div>
      </div>
      <!-- 市場中間盒子 -->
      <div class="mar-cen fl"><img src="images/700.png" alt="" /></div>
    </div>
    <!-- 狗狗種類 -->
    <div class="bud">
      狗狗種類
    </div>
    <!-- 狗狗種類列表 -->
    <div class="pro">
      <!-- 左邊大盒子 -->
      <div class="pro-left fl">
        <!-- 左邊大盒子上部分 -->
        <div class="pro-left-t">
          <!-- 左上大盒子左邊盒子 -->
          <div class="pro-pic-l fl">
            <div class="pro-pic-ll fl">
              <div class="pro-pic-llt">
                <img src="images/狗狗種類.png" alt="" />
              </div>
              <div class="pro-pic-btn"><input type="button" /></div>
            </div>
            <div class="pro-pic-lr fl">
              <p class="txt1">聰明、學習能力強</p>
              <p class="txt2">理解力高、容易訓練、溫和、忠誠</p>

              <p class="txt3"><span>4000.00</span> <del>¥5000.00</del></p>
              <p class="txt4">限量<span>200</span>件已售出<span>20</span>件</p>
            </div>
          </div>
          <div class="pro-pic-l fr">
            <div class="pro-pic-ll fl">
              <div class="pro-pic-llt">
                <img src="images/狗狗種類.png" alt="" />
              </div>
              <div class="pro-pic-btn"><input type="button" /></div>
            </div>
            <div class="pro-pic-lr fl">
              <p class="txt1">聰明、學習能力強</p>
              <p class="txt2">理解力高、容易訓練、溫和、忠誠</p>

              <p class="txt3"><span>4000.00</span> <del>¥5000.00</del></p>
              <p class="txt4">限量<span>200</span>件已售出<span>20</span>件</p>
            </div>
          </div>
        </div>
        <!-- 左邊大盒子中線 -->
        <div class="pro-line"></div>
        <!-- 左邊大盒子下部分 -->
        <div class="pro-left-t">
          <!-- 左上大盒子左邊盒子 -->
          <div class="pro-pic-l fl">
            <div class="pro-pic-ll fl">
              <div class="pro-pic-llt">
                <img src="images/狗狗種類.png" alt="" />
              </div>
              <div class="pro-pic-btn"><input type="button" /></div>
            </div>
            <div class="pro-pic-lr fl">
              <p class="txt1">聰明、學習能力強</p>
              <p class="txt2">理解力高、容易訓練、溫和、忠誠</p>

              <p class="txt3"><span>4000.00</span> <del>¥5000.00</del></p>
              <p class="txt4">限量<span>200</span>件已售出<span>20</span>件</p>
            </div>
          </div>
          <div class="pro-pic-l fr">
            <div class="pro-pic-ll fl">
              <div class="pro-pic-llt">
                <img src="images/狗狗種類.png" alt="" />
              </div>
              <div class="pro-pic-btn"><input type="button" /></div>
            </div>
            <div class="pro-pic-lr fl">
              <p class="txt1">聰明、學習能力強</p>
              <p class="txt2">理解力高、容易訓練、溫和、忠誠</p>

              <p class="txt3"><span>4000.00</span> <del>¥5000.00</del></p>
              <p class="txt4">限量<span>200</span>件已售出<span>20</span>件</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 右邊大盒子 -->
      <div class="pro-right fr">
        <div class="pro-right-title">狗狗諮詢</div>
        <ul>
          <li><a href="#">怎麼樣訓練邊境牧羊犬 </a></li>
          <li><a href="#">獎懲並施才是好主人 </a></li>
          <li><a href="#">怎麼樣訓練邊境牧羊犬 </a></li>
          <li><a href="#">獎懲並施才是好主人 </a></li>
          <li><a href="#">怎麼樣訓練邊境牧羊犬 </a></li>
          <li><a href="#">獎懲並施才是好主人 </a></li>
          <li><a href="#">怎麼樣訓練邊境牧羊犬 </a></li>
          <li><a href="#">獎懲並施才是好主人 </a></li>
          <li><a href="#">怎麼樣訓練邊境牧羊犬 </a></li>
          <li><a href="#">獎懲並施才是好主人 </a></li>
          <li><a href="#">怎麼樣訓練邊境牧羊犬 </a></li>
          <li><a href="#">獎懲並施才是好主人 </a></li>
        </ul>
      </div>
    </div>
    <!--狗糧種類-->
    <div class="bud">
      狗糧種類
    </div>
    <!-- 狗糧種類列表 -->
    <div class="dogFood">
      <div class="dogFood-left fl">
        <div class="dogFood-l-t">
          <h3>檢視更多>></h3>
        </div>
        <div class="dogFood-l-b">
          <div class="dogFood-pic fl">
            <img src="images/狗糧.png" alt="" />
            <p class="et1">耐威克狗糧泰迪貴賓成犬5斤2.5KG小型犬糧</p>
            <p class="et2">適合年齡1個月-3個月的幼犬</p>
            <p class="et3">市場價：<del>¥59</del></p>
            <p class="et4">直銷價：<span>¥39</span></p>
          </div>
          <div class="dogFood-pic fl">
            <img src="images/狗糧.png" alt="" />
            <p class="et1">耐威克狗糧泰迪貴賓成犬5斤2.5KG小型犬糧</p>
            <p class="et2">適合年齡1個月-3個月的幼犬</p>
            <p class="et3">市場價：<del>¥59</del></p>
            <p class="et4">直銷價：<span>¥39</span></p>
          </div>
          <div class="dogFood-pic fl">
            <img src="images/狗糧.png" alt="" />
            <p class="et1">耐威克狗糧泰迪貴賓成犬5斤2.5KG小型犬糧</p>
            <p class="et2">適合年齡1個月-3個月的幼犬</p>
            <p class="et3">市場價：<del>¥59</del></p>
            <p class="et4">直銷價：<span>¥39</span></p>
          </div>
          <div class="dogFood-pic fl">
            <img src="images/狗糧.png" alt="" />
            <p class="et1">耐威克狗糧泰迪貴賓成犬5斤2.5KG小型犬糧</p>
            <p class="et2">適合年齡1個月-3個月的幼犬</p>
            <p class="et3">市場價：<del>¥59</del></p>
            <p class="et4">直銷價：<span>¥39</span></p>
          </div>
        </div>
      </div>
      <div class="dogFood-right fr">
        <img src="images/右邊狗圖片.png" alt="" />
      </div>
    </div>

    <!--foot部分-->
    <div class="copyright">
      <p class="copy">本案例只供大家參考學習使用</p>
     
    </div>
  </body>
</html>

來解釋一下css的部分，也就是樣式的部分。

margin：

{margin: 0 auto;}

margin後面如果只有兩個引數的話，第一個表示top和bottom，第二個表示left和right

因為0 auto，表示上下邊界為0，左右則根據寬度自適應相同值（即居中）

{line-height: 26px;}

行間距 26畫素.

{display: inline-block;}

詳情見這位博主的https://www.cnblogs.com/Ry-yuan/p/6848197.html寫得非常不錯

簡單的說就是

{ padding: 0 15px;}

padding是留白距離
padding:0px 15px;等價於 padding:0px 15px 0px 15px;

  • 上內邊距是 0px
  • 右內邊距是 15px
  • 下內邊距是 0px
  • 左內邊距是 15px

padding:15px; 這樣單個屬性值表示上下左右各留白15px

padding:10px 5px 15px;

  • 上內邊距是 10px
  • 右內邊距和左內邊距是 5px
  • 下內邊距是 15px

{vertical-align: middle;}

垂直居中，只對行內元素有效

相關推薦

java css學習筆記：案例製作網頁

/*案例：製作網頁，程式碼後附詳細解釋/<!DOCTYPE html> <html lang=\"en\"> <head>

CSS學習筆記：浮動屬性

目錄一、浮動流是什麼二、通過程式碼例項瞭解浮動特點1. 搭建測試框架2. 新增浮動3. 浮動元素的排布4. 給行內元素新增浮動效果5. 子元素浮動後對父元素的影響5.1 在父元素中新增overflow: hidden屬性5.2 為父元素也

CSS學習筆記：定位屬性position

目錄一、定位屬性簡介二、各屬性值的具體功能1. relative2. absolute3. fixed三、三種定位屬性的效果總結

CSS學習筆記：display屬性

目錄一、display屬性概述1. 塊級元素和行內元素的區別2.常見的塊級元素和行內元素3. display屬性常見的屬性值二、測試display取各屬性值的效果1. 測試inline和block2. inline-block屬性值3. table-cell屬性值4. non

html、css學習筆記：第一節常用的html標籤

vscode建立html檔案 !+tab生成html檔案模板 安裝open in browser 外掛，郵件在瀏覽器中開啟網頁修改title

Java反射學習筆記：getParameterTypes和getGenericParameterTypes區別

環境 Java：1.8 Intellij IDEA:2019.2.4 前言 最近在寫匯出程式，對getGenericParameterTypes和getParameterTypes兩個方法的區別產生了好奇。

Java學習筆記：基本輸入、輸出資料操作例項分析

本文例項講述了Java學習筆記：基本輸入、輸出資料操作。分享給大家供大家參考，具體如下：

JAVA學習筆記：註釋、變數的宣告和定義操作例項分析

本文例項講述了JAVA學習筆記：註釋、變數的宣告和定義操作。分享給大家供大家參考，具體如下：

2020最有必要學習筆記：Java非同步程式設計藍光版筆記（含Go語言）

通常Java開發人員喜歡使用同步程式碼編寫程式，因為這種請求(request) /響應(response) 的方式比較簡單，並且比較符合程式設計人員的思維習慣;這種做法很好，直到系統出現效能瓶頸。在使用同步程式設計方式

學習筆記：設計模式-單例模式-java實現

技術標籤：設計模式設計模式java 設計模式-單例模式 單例模式定義特點優點缺點應用場景

Java學習筆記：基礎語法01—Java概述、資料型別、變數、識別符號、型別轉換

1. Java概述 1.1 Java語言發展史（瞭解） 語言：人與人交流溝通的表達方式 計算機語言：人與計算機之間進行資訊交流溝通的一種特殊語言

Java IO學習筆記一：為什麼帶Buffer的比不帶Buffer的快

作者：Grey 原文地址：Java IO學習筆記一：為什麼帶Buffer的比不帶Buffer的快 Java中為什麼BufferedReader，BufferedWriter要比FileReader 和 FileWriter高效？

Java IO學習筆記三：MMAP與RandomAccessFile

作者：Grey 原文地址：Java IO學習筆記三：MMAP與RandomAccessFile 關於RandomAccessFile 相較於前面提到的BufferedReader/Writer和FileReader/Writer

Java IO學習筆記四：Socket基礎

作者：Grey 原文地址：Java IO學習筆記四：Socket基礎 準備兩個Linux例項(安裝好jdk1.8)，我準備的兩個例項的ip地址分別為：

Java IO學習筆記五：BIO到NIO

作者：Grey 原文地址: Java IO學習筆記五：BIO到NIO 準備環境 準備一個CentOS7的Linux例項：

Java IO學習筆記六：NIO到多路複用

作者：Grey 原文地址：Java IO學習筆記六：NIO到多路複用 雖然NIO效能上比BIO要好，參考：Java IO學習筆記五：BIO到NIO

Java學習筆記：3.資料型別

三、資料型別 Java是一種強型別語言，要求變數的使用嚴格規定，所有變數都必須先定義後才可使用

Java學習筆記：2.HelloWorld

hello.java 新建記事本，輸入以下程式碼 public class hello{ public static void main(String[] args){

Java學習筆記：4.變數和常量

四、變數和常量 宣告變數 type varName; double salary; int vacationDays; long earthPopulation; boolean done;

Java IO學習筆記八：Netty入門

作者：Grey 原文地址：Java IO學習筆記八：Netty入門 多路複用多執行緒方式還是有點麻煩，Netty幫我們做了封裝，大大簡化了編碼的複雜度，接下來熟悉一下netty的基本使用。