该文是用css制作个导航条,用竖线分隔,导航条是点击的多个区块。
步骤:
ul里设置需要数量的li,li中加上a链接
给ul加样式,去掉默认的前面的点
给li设置左浮动,让ul里的li横向排列
a链接设置成块状显示,设置宽高和背景色
给a加样式,去默认的下划线,设置文本水平居中
设置文本垂直居中,由于没有垂直居中样式,用行高来让链接里文字垂直居中
给a链接文本设置合适的颜色,替换默认的链接色
给已经设置成区块的a链接加右侧的边线,边线粗细样式颜色
设置最后一个li去掉右边线
如后期修改标签内容,担心内容超出,可给已经区块显示的a标签设置overflow:hidden;
a标签设置为block,然后设置宽高后,a标签里面的文字可以用text-align:center设置水平居中,如果想垂直居中,可以设置行高和设置的a标签的高height相等,这样就能让里面的文字在垂直方向上居中。
垂直居中的方法:设置line-height=区域a标签的高。
该文中用的右侧边框先是黑色单线1px粗细,太黑了和背景色显示对比比较突兀,可根据需要修改。
样式代码:
ul{ list-style-type:none;} li{ float:left;border-right:1px solid #000000;} li a{ display:block;width:100px;height:50px;background-color:#e88383;text-align:center;text-decoration:none;line-height:50px;color:#ffffff;overflow:hidden;} li:last-child { border-right: none;}
页面代码:
<ul> <li><a href="">简短问答</a></li> <li><a href="bloglistindex.html">博文备份</a></li> <li><a