摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>天貓精選-上天貓，就夠了</title> <link rel="stylesheet" href="./stat
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>天貓精選-上天貓，就夠了</title> <link rel="stylesheet" href="./static/css/style.css"> <link rel="shortcut icon" href="./static/images/logo1.png" type=“image/x-icon> <link rel="stylesheet" href="./static/font-awesome/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <!-- 網(wǎng)頁頭部導(dǎo)航部分 --> <div> <div> <div> <a href="">喵，歡迎來到天貓</a> <a href="">請登錄</a> <a href="">免費注冊</a> </div> <div> <ul> <li><a href="">我的淘寶</a> <ul> <li><a href="">已買到的寶貝</a></li> <li><a href="">已賣出的寶貝</a></li> </ul> </li> <li><a href=""><i class="fa fa-heart"></i> 我關(guān)注的品牌</a></li> <li><a href=""><i class="fa fa-shopping-cart"></i> 購物車0件</a></li> <li><a href="">收藏夾</a> <ul> <li><a href="">收藏的寶貝</a></li> <li><a href="">收藏的店鋪</a></li> </ul> </li> <li>|</li> <li><a href=""><i class="fa fa-android"></i> 手機版</a></li> <li><a href="">淘寶網(wǎng)</a></li> <li><a href="">網(wǎng)頁導(dǎo)航</a> <div> 此處填網(wǎng)頁導(dǎo)航分類內(nèi)容 </div> </li> </ul> </div> </div> <div></div> </div> <div> <div> <ul> <li><span>女裝/內(nèi)衣 <i class="fa fa-angle-right" aria-hidden="true"></i></span> <div> <div> <div> <div> <span>當(dāng)季流行1<i class="fa fa-angle-right" aria-hidden="true"></i></span> </div> <div> <a href="">夏季新品</a> <a href="">商場同款</a> <a href="">仙女連衣裙</a> <a href="">T恤</a> <a href="">襯衫</a> <a href="">時髦外套</a> <a href="">休閑外套</a> <a href="">牛仔褲</a> <a href="">無痕文胸</a> <a href="">運動文胸</a> <a href="">潮流家居服</a> <a href="">百搭船襪</a> </div> </div> <div> <div> <span>當(dāng)季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span> </div> <div> <a href="">夏季新品</a> <a href="">商場同款</a> <a href="">仙女連衣裙</a> <a href="">T恤</a> <a href="">襯衫</a> <a href="">時髦外套</a> <a href="">休閑外套</a> <a href="">牛仔褲</a> <a href="">無痕文胸</a> <a href="">運動文胸</a> <a href="">潮流家居服</a> <a href="">百搭船襪</a> </div> </div> <div> <div> <span>當(dāng)季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span> </div> <div> <a href="">夏季新品</a> <a href="">商場同款</a> <a href="">仙女連衣裙</a> <a href="">T恤</a> <a href="">襯衫</a> <a href="">時髦外套</a> <a href="">休閑外套</a> <a href="">牛仔褲</a> <a href="">無痕文胸</a> <a href="">運動文胸</a> <a href="">潮流家居服</a> <a href="">百搭船襪</a> </div> </div> <div> <div> <span>當(dāng)季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span> </div> <div> <a href="">夏季新品</a> <a href="">商場同款</a> <a href="">仙女連衣裙</a> <a href="">T恤</a> <a href="">襯衫</a> <a href="">時髦外套</a> <a href="">休閑外套</a> <a href="">牛仔褲</a> <a href="">無痕文胸</a> <a href="">運動文胸</a> <a href="">潮流家居服</a> <a href="">百搭船襪</a> </div> </div> <div> <div> <span>當(dāng)季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span> </div> <div> <a href="">夏季新品</a> <a href="">商場同款</a> <a href="">仙女連衣裙</a> <a href="">T恤</a> <a href="">襯衫</a> <a href="">時髦外套</a> <a href="">休閑外套</a> <a href="">牛仔褲</a> <a href="">無痕文胸</a> <a href="">運動文胸</a> <a href="">潮流家居服</a> <a href="">百搭船襪</a> </div> </div> <div> <div> <span>當(dāng)季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span> </div> <div style="border-bottom:none;"> <a href="">夏季新品</a> <a href="">商場同款</a> <a href="">仙女連衣裙</a> <a href="">T恤</a> <a href="">襯衫</a> <a href="">時髦外套</a> <a href="">休閑外套</a> <a href="">牛仔褲</a> <a href="">無痕文胸</a> <a href="">運動文胸</a> <a href="">潮流家居服</a> <a href="">百搭船襪</a> </div> </div> </div> <div> <a href=""><img src="./static/images2/3.jpg" alt=""></a> <a href=""><img src="./static/images2/4.jpg" alt=""></a> <a href=""><img src="./static/images2/5.jpg" alt=""></a> <a href=""><img src="./static/images2/6.jpg" alt=""></a> <a href=""><img src="./static/images2/3.jpg" alt=""></a> <a href=""><img src="./static/images2/4.jpg" alt=""></a> <a href=""><img src="./static/images2/5.jpg" alt=""></a> <a href=""><img src="./static/images2/3.jpg" alt=""></a> <a href=""><img src="./static/images2/4.jpg" alt=""></a> <a href=""><img src="./static/images2/5.jpg" alt=""></a> <a href=""><img src="./static/images2/3.jpg" alt=""></a> <a href=""><img src="./static/images2/4.jpg" alt=""></a> <a href=""><img src="./static/images2/5.jpg" alt=""></a> <a href=""><img src="./static/images2/6.jpg" alt=""></a> <a href=""><img src="./static/images2/3.jpg" alt=""></a> <a href=""><img src="./static/images2/4.jpg" alt=""></a> <a href=""><img src="./static/images2/5.jpg" alt=""></a> <a href=""><img src="./static/images2/6.jpg" alt=""></a> </div> </div> </li> <li><span>男裝/運動戶外 <i class="fa fa-angle-right" aria-hidden="true"></i></span> <div> <div> <div> <div> <span>當(dāng)季流行2<i class="fa fa-angle-right" aria-hidden="true"></i></span> </div> <div> <a href="">夏季新品</a> <a href="">商場同款</a> <a href="">仙女連衣裙</a> <a href="">T恤</a> <a href="">襯衫</a> <a href="">時髦外套</a> <a href="">休閑外套</a> <a href="">牛仔褲</a> <a href="">無痕文胸</a> <a href="">運動文胸</a> <a href="">潮流家居服</a> <a href="">百搭船襪</a> </div> </div> <div> <div> <span>當(dāng)季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span> </div> <div> <a href="">夏季新品</a> <a href="">商場同款</a> <a href="">仙女連衣裙</a> <a href="">T恤</a> <a href="">襯衫</a> <a href="">時髦外套</a> <a href="">休閑外套</a> <a href="">牛仔褲</a> <a href="">無痕文胸</a> <a href="">運動文胸</a> <a href="">潮流家居服</a> <a href="">百搭船襪</a> </div> </div> <div> <div> <span>當(dāng)季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span> </div> <div> <a href="">夏季新品</a> <a href="">商場同款</a> <a href="">仙女連衣裙</a> <a href="">T恤</a> <a href="">襯衫</a> <a href="">時髦外套</a> <a href="">休閑外套</a> <a href="">牛仔褲</a> <a href="">無痕文胸</a> <a href="">運動文胸</a> <a href="">潮流家居服</a> <a href="">百搭船襪</a> </div> </div> <div> <div> <span>當(dāng)季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span> </div> <div> <a href="">夏季新品</a> <a href="">商場同款</a> <a href="">仙女連衣裙</a> <a href="">T恤</a> <a href="">襯衫</a> <a href="">時髦外套</a> <a href="">休閑外套</a> <a href="">牛仔褲</a> <a href="">無痕文胸</a> <a href="">運動文胸</a> <a href="">潮流家居服</a> <a href="">百搭船襪</a> </div> </div> <div> <div> <span>當(dāng)季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span> </div> <div> <a href="">夏季新品</a> <a href="">商場同款</a> <a href="">仙女連衣裙</a> <a href="">T恤</a> <a href="">襯衫</a> <a href="">時髦外套</a> <a href="">休閑外套</a> <a href="">牛仔褲</a> <a href="">無痕文胸</a> <a href="">運動文胸</a> <a href="">潮流家居服</a> <a href="">百搭船襪</a> </div> </div> <div> <div> <span>當(dāng)季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span> </div> <div style="border-bottom:none;"> <a href="">夏季新品</a> <a href="">商場同款</a> <a href="">仙女連衣裙</a> <a href="">T恤</a> <a href="">襯衫</a> <a href="">時髦外套</a> <a href="">休閑外套</a> <a href="">牛仔褲</a> <a href="">無痕文胸</a> <a href="">運動文胸</a> <a href="">潮流家居服</a> <a href="">百搭船襪</a> </div> </div> </div> <div> <a href=""><img src="./static/images2/3.jpg" alt=""></a> <a href=""><img src="./static/images2/4.jpg" alt=""></a> <a href=""><img src="./static/images2/5.jpg" alt=""></a> <a href=""><img src="./static/images2/6.jpg" alt=""></a> <a href=""><img src="./static/images2/3.jpg" alt=""></a> <a href=""><img src="./static/images2/4.jpg" alt=""></a> <a href=""><img src="./static/images2/5.jpg" alt=""></a> <a href=""><img src="./static/images2/3.jpg" alt=""></a> <a href=""><img src="./static/images2/4.jpg" alt=""></a> <a href=""><img src="./static/images2/5.jpg" alt=""></a> <a href=""><img src="./static/images2/3.jpg" alt=""></a> <a href=""><img src="./static/images2/4.jpg" alt=""></a> <a href=""><img src="./static/images2/5.jpg" alt=""></a> <a href=""><img src="./static/images2/6.jpg" alt=""></a> <a href=""><img src="./static/images2/3.jpg" alt=""></a> <a href=""><img src="./static/images2/4.jpg" alt=""></a> <a href=""><img src="./static/images2/5.jpg" alt=""></a> <a href=""><img src="./static/images2/6.jpg" alt=""></a> </div> </div> </li> <li><span>美妝/個人護理 <i class="fa fa-angle-right" aria-hidden="true"></i></span> <div> 這里填寫產(chǎn)品分類 </div> </li> <li><span>腕表/眼鏡/珠寶飾品 <i class="fa fa-angle-right" aria-hidden="true"></i></span> <div> 這里填寫產(chǎn)品分類 </div> </li> <li><span>手機/數(shù)碼/電腦辦公 <i class="fa fa-angle-right" aria-hidden="true"></i></span> <div> 這里填寫產(chǎn)品分類 </div> </li> <li><span>母嬰玩具 <i class="fa fa-angle-right" aria-hidden="true"></i></span> <div> 這里填寫產(chǎn)品分類 </div> </li> <li><span>零食/茶酒/進口食品 <i class="fa fa-angle-right" aria-hidden="true"></i></span> <div> 這里填寫產(chǎn)品分類 </div> </li> <li><span>生鮮水果 <i class="fa fa-angle-right" aria-hidden="true"></i></span> <div> 這里填寫產(chǎn)品分類 </div> </li> <li><span>女鞋/男鞋/箱包 <i class="fa fa-angle-right" aria-hidden="true"></i></span> <div> 這里填寫產(chǎn)品分類 </div> </li> <li><span>美妝/個人護理 <i class="fa fa-angle-right" aria-hidden="true"></i></span> <div> 這里填寫產(chǎn)品分類 </div> </li> <li><span>腕表/眼鏡珠寶飾品 <i class="fa fa-angle-right" aria-hidden="true"></i></span> <div> 這里填寫產(chǎn)品分類 </div> </li> <li><span>手機/數(shù)碼/電腦辦公 <i class="fa fa-angle-right" aria-hidden="true"></i></span> <div> 這里填寫產(chǎn)品分類 </div> </li> <li><span>母嬰玩具 <i class="fa fa-angle-right" aria-hidden="true"></i></span> <div> 這里填寫產(chǎn)品分類 </div> </li> <li><span>圖書音像 <i class="fa fa-angle-right" aria-hidden="true"></i></span> <div> 這里填寫產(chǎn)品分類 </div> </li> <li><span>零食/茶酒/進口食品 <i class="fa fa-angle-right" aria-hidden="true"></i></span> <div> 這里填寫產(chǎn)品分類 </div> </li> </ul> </div> </div> </body> </html>
*{margin: 0px;padding: 0px;}
.head a{text-decoration: none;}
li{list-style: none;}
.head i{color: red}
.clear{clear:both;}
.head{background: #F2F2F2;height: 30px;}
.top{margin:auto 50px;
height: 30px;
line-height: 30px;
}
/*頭部導(dǎo)航左側(cè)區(qū)塊*/
.topLeft{
float:left;
width: 230px;
}
.topLeft a{
color: #6D6E6A;
float: left;
font-size: 12px;
margin-left: 10px;
}
.topLeft a:hover{
color: red;
}
/*頭部導(dǎo)航右側(cè)部分*/
.topright{
float:right;
}
/*默認導(dǎo)航菜單*/
.menu_li{
float: left;
font-size: 11px;
margin-right:15px;
}
/*有下拉功能的菜單*/
.menu_li1{
width: 60px;
float: left;
font-size: 11px;
position: relative;
padding-left: 10px;
}
.menu_li1:hover{
background: #fff;
border-bottom: none;
}
.menu_li1:hover ul{
display: block
}
.menu_li1:hover .menu_li_map{
display: block
}
.menu_li_map{
box-shadow:1px 3px 3px #ccc;
border: 0px;
position: absolute;
right:0px;
width: 1260px;
height: 250px;
display: none;
z-index: 19;
background: #fff;
}
.menu_li1 ul{
box-shadow:1px 3px 3px #ccc;
border: 0px;
position: absolute;
display: none;
left:0px;
background: #fff;
}
/*二級菜單部分*/
.menu_li2{
width: 80px;
text-align: center;
}
.topright a{
color: #6D6E6A;
}
.topright a:hover{
color: red;
}
/*banner導(dǎo)航部分*/
.banner{
width:100%;
height: 500px;
background: url(../images2/2.png);
margin-top: 5px;
}
.banner_content{
width: 1260px;
height: 500px;
margin: 0 auto;
}
.banner_menu{
width: 200px;
height: 500px;
background: rgba(0,0,0,0.4);
position: relative;
}
.banner_menu_li span{
text-decoration: none;
color: #fff;
font-size: 13px;
margin-left: 25px;
}
.banner_menu_li i{
float: right;
margin-right:20px;
margin-top: 12px;
}
.banner_menu_li{
height: 33.2px;
line-height: 33.3px;
width: 100%;
}
.banner_menu_li:hover{
background:rgba(255,255,255,0.4);
}
.banner_menu_li:hover>span{
color: #fff;
}
.banner_menu_li:hover .banner_menumap{
display: block;
}
.banner_menumap{
position: absolute;
height: 496px;
background: #fff;
width: 780px;
top:0px;
left: 200px;
margin-top: 2px;
display: none;
float: left;
}
.banner_menumap_content{
float: left;
height: 100%
background:red;
width: 500px;
padding-right: 50px;
}
.banner_menumap_left{
height: 100%;
width: 500px;
background: #fff;
height: 80px;
width: 500px;
margin-top: 2px;
}
.banner_menumap_right{
background: #ccc;
height: 100%;
width: 230px;
float:left;
}
.banner_menumap_right img{
width: 100px;
float: left;
margin-left: 10px;
margin-top: 4.5px;
}
.menumap_left_title span{
font-size: 15px;
color:#000000;
width: 100px;
float:left;
line-height: 80px;
}
.menumap_left_title span i{
margin-top: 32px;
}
.menumap_left_title {
margin-left: 10;
font-weight:bold;
float:left;
height: 80px;
width: 120px;
}
.menumap_content{
font-size: 13px;
border-bottom: dashed 1px #ccc;
float: left;
width: 380px;
height: 80px;
}
.menumap_content a{
text-decoration: none;
color: #6D6E6A;
margin-right: 9px;
}
.menumap_content a:hover{
color: red;
}
經(jīng)過這章節(jié)的html+css溫補練習(xí)，發(fā)現(xiàn)自己不知不覺已經(jīng)把前面課程講的前端知識掌握到得心應(yīng)手。后續(xù)要不斷練習(xí)爭取在工作中能勝任各種前端需求
批改老師：查無此人批改時間：2019-03-14 09:19:17
老師總結(jié)：完成的不錯，下次把HTML代碼也縮進，養(yǎng)成好習(xí)慣。繼續(xù)加油