abstrak：<!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)頁頭部導航部分 --> <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> 我關注的品牌</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)頁導航</a> <div> 此處填網(wǎng)頁導航分類內(nèi)容 </div> </li> </ul> </div> </div> <div></div> </div> </body> </html>
*{margin: 0px;padding: 0px;}
.head a{text-decoration: none;}
.head 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;
}
/*頭部導航左側區(qū)塊*/
.topLeft{
float:left;
width: 230px;
}
.topLeft a{
color: #6D6E6A;
float: left;
font-size: 12px;
margin-left: 10px;
}
.topLeft a:hover{
color: red;
}
/*頭部導航右側部分*/
.topright{
float:right;
}
/*默認導航菜單*/
.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;
}
.menu_li1 ul{
box-shadow:1px 3px 3px #ccc;
border: 0px;
position: absolute;
display: none;
left:0px;
}
/*二級菜單部分*/
.menu_li2{
width: 80px;
text-align: center;
}
.topright a{
color: #6D6E6A;
}
.topright a:hover{
color: red;
}
重新再把之前學的css+html再練一遍挺好，讓基礎掌握得更加扎實
Guru membetulkan：韋小寶Masa pembetulan：2019-03-13 09:16:48
Rumusan guru：寫的很不錯 導航在一個網(wǎng)站中起到至關重要的作用 一個完美導航更容易吸引用戶