<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>进行分块,大可不必困扰