image.png
我要做的是一個(gè)淘寶的導(dǎo)航欄对供，圖片中畫圈的部分，實(shí)現(xiàn)起來(lái)不是很難。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding:0;
}
ul,li{
list-style:none;/* 清除默認(rèn)樣式*/
}
a{
color: white;/* 設(shè)置默認(rèn)超鏈接樣式為白色*/
text-decoration:none;
}
a:hover{
text-decoration:none;/* 清除默認(rèn)樣式*/
}
li{
margin:0 10px;/* 分隔每個(gè)li內(nèi)的文字*/
float:left; /* 左浮動(dòng)*/
line-height:30px; /* 行高設(shè)置*/
font-weight:700;/* 設(shè)置文字粗細(xì)*/
font-size:14px;/* 設(shè)置文字大小*/
color:#fff;
text-align:center;
}
#banner{
background-color:#ff9000; /* 設(shè)置div寬高背景色*/
width:1342px;
height:30px;
}
</style>
<body>
<div id="banner">
<ul>
<li>主題市場(chǎng)</li>
<li><a href=",,,">天貓</a></li>
<li><a href=",,,">聚劃算</a></li>
<li><a href=",,,">天貓超市</a></li>
<li><a href=",,,">淘搶購(gòu)</a></li>
<li><a href=",,,">電器城</a></li>
<li><a href=",,,">司法拍賣</a></li>
<li><a href=",,,">中國(guó)制造</a></li>
<li><a href=",,,">興農(nóng)扶貧</a></li>
</ul>
</div>
</body>
</html>
實(shí)現(xiàn)效果如圖
截圖.png
雖然做出來(lái)還是有略微差別，后面我會(huì)修改個(gè)別樣式假褪，以達(dá)到完美效果。
