image.png
我要做的是一个淘宝的导航栏，图片中画圈的部分，实现起来不是很难。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding:0;
}
ul,li{
list-style:none;/* 清除默认样式*/
}
a{
color: white;/* 设置默认超链接样式为白色*/
text-decoration:none;
}
a:hover{
text-decoration:none;/* 清除默认样式*/
}
li{
margin:0 10px;/* 分隔每个li内的文字*/
float:left; /* 左浮动*/
line-height:30px; /* 行高设置*/
font-weight:700;/* 设置文字粗细*/
font-size:14px;/* 设置文字大小*/
color:#fff;
text-align:center;
}
#banner{
background-color:#ff9000; /* 设置div宽高背景色*/
width:1342px;
height:30px;
}
</style>
<body>
<div id="banner">
<ul>
<li>主题市场</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>
<li><a href=",,,">司法拍卖</a></li>
<li><a href=",,,">中国制造</a></li>
<li><a href=",,,">兴农扶贫</a></li>
</ul>
</div>
</body>
</html>
实现效果如图
截图.png
虽然做出来还是有略微差别，后面我会修改个别样式，以达到完美效果。
网友评论