zoukankan      html  css  js  c++  java
  • HTML布局水平导航条1制作

    该文是用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>

    步骤图示:

     

    上面是用竖线分隔链接块,也可以使用背景色不同,或背景图不同进行区分,因为边线每个是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宽度,所以比下面的背景色和背景图的宽一些。由于上面那个黑色线条分割线太突兀,下面这个换了点浅浅的颜色。样式和上面导航条一样,就是把背景色设置成不同的,或把背景色换成了背景图。

     

  • 相关阅读:
    【leetcode】Triangle (#120)
    【leetcode】Unique Binary Search Trees (#96)
    【leetcode】Maximum Subarray (53)
    【转】算法杂货铺——k均值聚类(K-means)
    EM算法总结
    人工智能聚类算法总结
    K-MEANS算法总结
    在线制作css动画——CSS animate
    IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input
    响应式、手机端、自适应 百分比实现div等宽等高的方法
  • 原文地址:https://www.cnblogs.com/huaxie/p/11399829.html
Copyright © 2011-2022 走看看