本文介绍了如何使用HTML的无序列表`<ul>`配合CSS样式来复刻新浪网站的导航栏效果。通过设置`list-style`、`height`、`line-height`等属性去除列表项前的点并调整间距，再结合`border`和`<a>`标签创建链接，最终实现整洁的导航条。此外，还展示了如何通过添加额外的CSS类来定制首项和末项的样式，以及链接的样式和颜色。
<ul>和<ol>是两个很好用的标记，它们能够让数据以整齐的规格排列。你可以在其中附加上超链接的<a>或图片以达到排版的效果。
在这篇文章中会复刻出新浪网站上如图所示的效果（友情原网址链接：新浪网-投资者关系 (sina.com.cn) ）
如果你用
<ul>
<li>首页</li>
<li>公司概况</li>
<li>股票咨询</li>
<li>新浪动态</li>
<li>财务信息</li>
<li>投资者日</li>
<li>联系我们</li>
</ul>表示的话显然与之相差甚远，这时就要用到一些CSS样式了
显然他们的前面是没有点的（如果是<ol>是数字）。而且间距也很大
当加上这个
<li style="list-style: none;height: 50px; line-height: 50px; ">首页</li>
就可以解决这些问题，list-style去除圆点，后面的设置行高并居中。
再加上border的修饰后可以放在<style>中，并设立标签(暂设为line)
<style>
.line{
border-bottom:1px #E1E3E5 solid;
list-style: none;
height: 50px;
line-height: 50px;
</style>然后加入<a>标记链接后即为
a{
text-decoration: none;
color: black;
}上面的是清除链接下划线，下面的是颜色转换。
之后稍作修饰就成为
<body>
<ul>
<li class="linehead"><a href="http://www.baidu.com" class="wqe">首页</a></li>
<li class="line"><a href="http://www.baidu.com">公司概况</a></li>
<li class="line"><a href="http://www.baidu.com">股票咨询</a></li>
<li class="line"><a href="http://www.baidu.com">新浪动态</a></li>
<li class="line"><a href="http://www.baidu.com">财务信息</a></li>
<li class="line"><a href="http://www.baidu.com">投资者日</a></li>
<li class="line bottom"><a href="http://www.baidu.com">联系我们</a></li>
</ul>
<style>
.line{
border-bottom:1px #E1E3E5 solid;
list-style: none;
height: 50px;
line-height: 50px;
}
.linehead{
border-bottom:1px #E1E3E5 solid;
list-style: none;
height: 50px;
line-height: 50px;
}
.wqe{
color: #4c92fc;
}
.bottom{
border-bottom:none ;
}
.introduce{
font-family: 楷体;
font-size: 16px;
}
a{
text-decoration: none;
color: black;
}
</style>
</body>当你拷贝后会发现线条并没有这么短，这只是没有用<div>进行分块，大可不必困扰
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
