abstrakt：本次布局主要是為了融會(huì)貫通所學(xué)過(guò)的布局基礎(chǔ)知識(shí)，重點(diǎn)在字體庫(kù)的使用和CSS選擇器，模仿淘寶網(wǎng)布局案例如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l
本次布局主要是為了融會(huì)貫通所學(xué)過(guò)的布局基礎(chǔ)知識(shí)，重點(diǎn)在字體庫(kù)的使用和CSS選擇器，模仿淘寶網(wǎng)布局案例如下：
<!DOCTYPE html> <html> <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>淘寶網(wǎng)導(dǎo)航條實(shí)例</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" type="text/css" href="css/fontawesome.min.css"> </head> <body> <div> <div> <div> <a href="">中國(guó)大陸 <i class=" fa fa-angel-down"></i></a> <a href="" style="color: #FF5000;">親,請(qǐng)登錄</a> <a href="">免費(fèi)注冊(cè)</a> <a href="">手機(jī)逛淘寶</a> </div> <div> <a href="">我的淘寶 <i class=" fa fa-angel-down"></i></a> <a href="">購(gòu)物車<i class=" fa fa-angel-down"></i></a> <a href="">收藏夾<i class=" fa fa-angel-down"></i></a> <a href="">商品分類</a> <a href="">賣家中心<i class=" fa fa-angel-down"></i></a> <a href="">聯(lián)系客服<i class=" fa fa-angel-down"></i></a> <a href="">網(wǎng)站導(dǎo)航<i class=" fa fa-angel-down"></i></a> </div> </div> </div> </body> </html>
* {
margin: 0px;
padding: 0px
}
a{
text-decoration: none; /*取消下劃線*/
color: #000;
}
.clear {
clear: both;
}
.header {
width: 100%;
height: 40px;
background-color: #F5F5F5;
}
.content {
width: 1200px;
height: 40px;
margin: 0px auto;
line-height: 40px;
}
.content a:hover{
color: #FF5000;
}
.content_left {
width: 400px;
height: 40px;
float: left;
}
.content_left a{
margin-right: 5px;
}
.content_right {
width: 600px;
height: 40px;
/* background-color: pink;*/
float: right;
}
.left_a{
display: inline-block;
height: 40px;
width: 90px;
text-align: center;
}
.left_a:hover{
background-color: #fff;
}PS：在使用浮動(dòng)特性的時(shí)候要注意，因?yàn)楦?dòng)不占用頁(yè)面空間，所以不能撐起外部寬高，所以需要清除both,或者單獨(dú)給出寬高。
Korrigierender Lehrer：滅絕師太Korrekturzeit：2019-02-13 17:50:32
Zusammenfassung des Lehrers：作業(yè)完成的漂亮,頁(yè)面中的導(dǎo)航千篇一律,相信其他的導(dǎo)航對(duì)你也不是難題,繼續(xù)加油吧!