html-css練習題（天天生鮮靜態網頁製作）
阿新 • • 發佈：2018-12-26
先來看一下效果圖：
主要要求：
注：最下面有素材連結地址可以自己練習使用
/* 1.login最外側盒子設定高29
背景顏色#f7f7f7
下邊框1 */
/* 1.1 login內容部分設定高20 寬1200 居中*/
/* 1.11左側歡迎欄設定居中注意浮動 */
/* 1.12右側我的訂單設定寬290 高29 居中注意浮動 */
/* 1.12登入與未登入設定隱藏注意浮動*/
/* 1.121已經登入設定 a顏色orange */
/* 1.122未登入設定 span左右間距 a 滑鼠點選變顏色; */
/* 2.search部分設定寬預設高90 */
/*
內部內容盒子設定寬1200
高90 居中背景顏色主要測試用 */
/* 2.1左側logo設定位置上29 左17 */
/* 2.2搜尋框設定寬616 高38 邊框位置左120 上36 浮動 */
/* 搜尋框搜尋欄設定寬516 高38 居中背景圖縮排40 */
/* 搜尋框搜尋按鈕設定寬100 高39 背景顏色字白 14 行高38居中浮動*/
/* 2.3右側購物車寬200 高40 右浮動位置上36 */
/* 設定a 寬158 高38 居中背景圖字14顏色縮排56 */
/* 設定span 寬40 高40 背景顏色字18 白居中 */
/* 3.全部商品分類最外側高40 上26 邊框2 #37ab40 */
/* 內容設定寬1200 高40 居中 */
/* 3.1全部商品分類寬200高40 居中字14
/* 設定浮動主要是給首頁list找邊界 */
/* 3.2首頁設定寬215高40 左35 上下居中 */
/* 設定li 字14 橫排一行浮動 */
/* span a 標籤設定左右20 字型顏色 */
/* 4.slide 高270 內容寬1200高270 居中*/
/* 4.1左側水果列表設定寬200高270 有問題找浮動 */
/* 水果列表寬198 高44 邊框居中背景圖 */
/* 雪碧圖位置設定採用 nth選擇器 */
/* a 字14 背景圖有問題找浮動 yo*/
/* 4.2輪播圖設定寬760 高279 有問題找浮動 */
/* 輪播圖寬760*4 高270 有問題找浮動*/
/* 4.22左右按鈕寬25高25 背景圖定位
/* 4.23小圓點設定 */
/* 4.3右側廣告消除行間距設定父元素為0*/
/* 5.foods 設定外高335 上25 內寬1200高335 居中*/
/* 上面文字 */
/* a 海鮮水產 16px margin-right:20px; */
/* li標籤高29 左10 */
/* 更多設定高20 */
/* 5.2左側廣告寬200 高300 有問題找浮動 */
/* 5.3右側列表產品寬1000 高300*/
/* 列表設定寬249 高299 邊框下右居中 */
/* 基圍蝦設定字14 高50 下10 */
/* 39.9元設定字20 紅加粗高35 上17 */
Html程式碼賞析：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="main.css"> </head> <body> <!-- 1.login部分，天天生鮮歡迎您！ --> <div class="login"> <!-- 1.1 login內容部分 --> <div class="loginbox"> <!-- 1.11 左側歡迎欄 --> <h3>歡迎您來天天生鮮！</h3> <!-- 1.12右側我的訂單 --> <div class="loginrg"> <!-- 1.121 已經登入 --> <div class="inlogin"> 歡迎您： <a href="">張山</a> </div> <!-- 1.122未登入 --> <div class="unlogin"> <a href="">登入</a> <span>|</span> <a href="">註冊</a> </div> <!-- 1.123 我的訂單 --> <div class="mylogin"> <span>|</span> <a href="">我的購物車</a> <span>|</span> <a href="">我的訂單</a> </div> </div> </div> </div> <!-- 2.search部分設定 --> <div class="search"> <!-- 內部內容盒子設定 --> <div class="searchbox"> <!-- 2.1左側logo設定 --> <a href=""><img src="images/logo.png" alt=""></a> <!-- 2.2搜尋框設定 --> <div class="searchcar"> <form action=""> <input class="txt"type="text" placeholder="搜尋"> <input class="sub"type="submit" value="搜尋" > </form> </div> <!-- 2.3右側購物車 --> <div class="buy"> <a href="">我的購物車</a> <span>0</span> </div> </div> </div> <!-- 3.全部商品分類 --> <div class="cate"> <!-- 內部內容設定 --> <div class="catecon"> <!-- 3.1全部商品分類 --> <a class="all" href="">全部商品分類</a> <!-- 3.2首頁設定 --> <ul class="catelist"> <li><a href="">首頁</a></li> <li><span>|</span></li> <li><a href="">手機生鮮</a></li> <li><span>|</span></li> <li><a href="">抽獎</a></li> </ul> </div> </div> <!-- 4.slide --> <div class="slide"> <!-- 裡面內容 --> <div class="slidecon"> <!-- 4.1左側 水果列表展示 --> <ul class="flist"> <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> <!-- 4.2中間部分 slide輪播圖 --> <div class="slidepic"> <!-- 4.21輪播圖圖片 --> <ul class="slist"> <li><a href=""><img src="images/slider.jpg" alt=""></a></li> <li><a href=""><img src="images/slider.jpg" alt=""></a></li> <li><a href=""><img src="images/slider.jpg" alt=""></a></li> <li><a href=""><img src="images/slider.jpg" alt=""></a></li> </ul> <!-- 4.22左右按鈕 --> <div class="lfbtu"></div> <div class="rgbtu"></div> <!-- 4.23小圓點 --> <ul class="rd"> <li class="active"></li> <li></li> <li></li> <li></li> </ul> </div> <!-- 4.3右邊圖片 --> <div class="rgpic"> <a href=""><img src="images/right01.jpg" alt=""></a> <a href=""><img src="images/right02.jpg" alt=""></a> </div> </div> </div> <!-- 5.food商品設定 --> <div class="foods"> <!-- 內部內容 --> <div class="foodscon"> <!-- 5.1頭部div --> <div class="fhead"> <a class="fheada" href="">海鮮水產</a> <!-- 3.2首頁設定 --> <ul class="fheadlist"> <li><span>|</span></li> <li><a href="">深海鱬魚</a></li> <li><a href="">帝王蟹</a></li> </ul> <a class="fheadlista" href="">檢視更多>></a> </div> <!-- 5.2左側廣告 --> <div class="lfad"> <a href=""><img src="images/fish.jpg" alt=""></a> </div> <!-- 5.3右側列表產品 --> <ul class="foodslist"> <li> <h5>基圍蝦</h5> <a href=""><img src="images/daxia.jpg" alt=""></a> <div>¥39.9</div> </li> <li> <h5>基圍蝦</h5> <a href=""><img src="images/daxia.jpg" alt=""></a> <div>¥39.9</div> </li> <li> <h5>基圍蝦</h5> <a href=""><img src="images/daxia.jpg" alt=""></a> <div>¥39.9</div> </li> <li> <h5>基圍蝦</h5> <a href=""><img src="images/daxia.jpg" alt=""></a> <div>¥39.9</div> </li> </ul> </div> </div> </body> </html> Css格式檔案程式碼： /* 注：因為大部分文字都是12 顏色相同，所以總體設定 */ body{ font-size:12px; color:#666666; }/* 1.login最外側盒子設定 高29 背景顏色#f7f7f7 下邊框1 */ .login{ height: 29px; background:#f7f7f7; border-bottom: 1px solid #dddddd; }
/* 1.1 login內容部分設定 高20 寬1200 居中*/ .loginbox{ width:1200px; height: 29px; margin:0 auto; }
/* 1.11左側歡迎欄設定 居中 注意浮動 */ .loginbox h3{ line-height: 29px;
float:left; }
/* 1.12右側我的訂單設定 寬290 高29 居中 注意浮動 */ .loginrg{ width:290px; height: 29px; line-height:29px;
float:right; }
/* 1.12登入與未登入設定隱藏 注意浮動*/ .inlogin{ float:left; } .unlogin{ display: none; }
/* 1.121已經登入設定 a顏色orange */ .inlogin a{ color:orange; }
/* 1.122未登入設定 span左右間距 a 滑鼠點選變顏色; */ .unlogin span, .mylogin span{ margin:0 10px; } .unlogin a, .mylogin a{ color:#666666; }
.unlogin a:hover, .mylogin a:hover{ color:orange; }
/* 2.search部分設定 寬預設 高90 */ .search{ height:90px; }
/* 內部內容盒子設定 寬1200 高90 居中 背景顏色主要測試用*/ .searchbox{ width:1200px; height: 90px; margin:0 auto; /* background: palegreen; */ }
/* 2.1左側logo設定 位置 上29 左17 */ .searchbox a{ margin-left: 17px; margin-top:29px;
/* 注：浮動或者轉化行內塊元素，一般浮動為主 */ /* display: inline-block; */ float: left; }
/* 2.2搜尋框設定 寬616 高38 邊框 位置左120 上36 浮動 */ .searchcar{ width:616px; height: 38px; border:1px solid #37ab40; margin-left: 120px; margin-top: 36px;
/* 注：出問題找浮動 */ float:left; } /* 搜尋框搜尋欄設定 寬516 高38 居中 背景圖 縮排40 */ .searchcar .txt{ width:516px; height: 38px; line-height: 38px; background: url(images/search.png) no-repeat 12px 9px; /* background: palevioletred; */ text-indent: 40px; } /* 搜尋框搜尋按鈕設定 寬100 高39 背景顏色 字白 14 行高38居中 浮動*/ .searchcar .sub{ width:100px; height: 39px; background: #37ab40;
font-size:14px; color:white; line-height: 39px;
float:right; }
/* 2.3右側購物車 寬200 高40 右浮動 位置上36 */ .buy{ width:200px; height: 40px;
float: right; margin-top:36px; /* background-color: red; */ } /* 設定a 寬158 高38 居中 背景圖 字14顏色 縮排56 */ .buy a{ /* 因為要給行內元素設定寬高 改變型別 */ /* display: inline-block; */ float:left; width:158px; height: 38px; border:1px solid #dddddd; margin-top:0; margin-left:0;
color:#37ab40; font-size:14px; line-height: 38px;
background: url(images/buycar.png) no-repeat 14px 10px; text-indent: 56px; /* background: purple; */ } /* 設定span 寬40 高40 背景顏色 字18 白 居中 */ .buy span{ /* 因為要給行內元素設定寬高 改變型別 */ /* display: inline-block; */ float:right; width:40px; height: 40px; background: #ff8800;
font-size:18px; color:white; line-height: 40px; text-align: center; /* float:right; */
}
/* 3.全部商品分類最外側 高40 上26 邊框2 #37ab40 */ .cate{ height: 40px; margin-top:26px; border-bottom: 2px solid #37ab40; }
/* 內容設定 寬1200 高40 居中 */ .catecon{ width:1200px; height: 40px; margin:0 auto; }
/* 3.1全部商品分類 寬200高40 居中 字14 白背景色 浮動 */ .all{ width:200px; height: 40px; line-height: 40px; text-align: center;
font-size:14px; color:white; background: #37ab40;
/* 設定浮動主要是給首頁list找邊界 */ float:left; }
/* 3.2首頁設定 寬215高40 左35 上下居中 */ .catelist{ width:215px; height: 40px; line-height: 40px;
margin-left:35px;
/* 注：有問題找浮動 */ float:left; } /* 設定li 字14 橫排一行浮動 */ .catelist li{ float:left; }
/* span a 標籤設定 左右20 字型顏色 */ .catelist span{ margin:0 20px; } .catelist a{ color:#666666; }
/* 4.slide 高270 內容寬1200高270 居中*/ .slide{ height:270px; } .slidecon{ width:1200px; height: 270px; margin:0 auto; }
/* 4.1左側水果列表設定 寬200高270 有問題找浮動 */ .flist{ width:200px; height: 270px; /* background: black; */