HTML布局水平导航条1制作

时间:2024-09-11 09:37:08

该文是用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 href="">测试用</a></li>
<li><a href="">关于</a></li>
</ul>

步骤图示:

HTML布局水平导航条1制作

上面是用竖线分隔链接块,也可以使用背景色不同,或背景图不同进行区分,因为边线每个是1px大小,所以整个导航条相比于用背景色和背景图的多出了一点距离。

样式代码:

ul{list-style-type:none;}
li{float:left;border-right:1px solid #727272;}
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;} .ul2{clear:both;margin-top:70px;}
.ul2 li{float:left;border:none;}
.ul2 a{display:block;width:100px;height:50px;text-align:center;text-decoration:none;line-height:50px;color:#ffffff;overflow:hidden;}
.a1{background-color:#e88383;}
.a2{background-color:#521f79;}
.a3{background-color:#bb8932;}
.a4{background-color:#265d19;} .ul3{clear:both;margin-top:130px;}
.ul3 li{float:left;border:none;}
.ul3 a{display:block;width:100px;height:50px;text-align:center;text-decoration:none;line-height:50px;color:#ffffff;overflow:hidden;}
.ul3 .a1{background-image:url(../images/b_1.png);}
.ul3 .a2{background-image:url(../images/b_2.png);}
.ul3 .a3{background-image:url(../images/b_3.png);}
.ul3 .a4{background-image:url(../images/b_4.png);}

HTML页面代码:

<ul>
<li><a href="">简短问答</a></li>
<li><a href="bloglistindex.html">博文备份</a></li>
<li><a href="">测试用</a></li>
<li><a href="">关于</a></li>
</ul> <ul class="ul2">
<li><a href="" class="a1">简短问答</a></li>
<li><a href="bloglistindex.html" class="a2">博文备份</a></li>
<li><a href="" class="a3">测试用</a></li>
<li><a href="" class="a4">关于</a></li>
</ul> <ul class="ul3">
<li><a href="" class="a1">简短问答</a></li>
<li><a href="bloglistindex.html" class="a2">博文备份</a></li>
<li><a href="" class="a3">测试用</a></li>
<li><a href="" class="a4">关于</a></li>
</ul>

图示:由于每个边线都是1px宽度,所以比下面的背景色和背景图的宽一些。由于上面那个黑色线条分割线太突兀,下面这个换了点浅浅的颜色。样式和上面导航条一样,就是把背景色设置成不同的,或把背景色换成了背景图。

HTML布局水平导航条1制作