zoukankan      html  css  js  c++  java
  • 前端导航栏标签中间的小竖线 实现方法

    此方法在可控性方面比较占优势但是会增加一个竖线的节点

    html部分:

    <div class="top_page_l">
    <ul>
    <li><a href="#">小米商城</a><s>|</s></li>
    <li><a href="#">MIUI</a><s>|</s></li>
    <li><a href="#">LOT</a><s>|</s></li>
    <li><a href="#">云服务</a><s>|</s></li>
    <li><a href="#">水滴</a><s>|</s></li>
    <li><a href="#">金融</a><s>|</s></li>
    <li><a href="#">有品</a><s>|</s></li>
    <li><a href="#">政企服务</a><s>|</s></li>
    <li><a href="#">select Region</a></li>
    </ul>
    </div>

    CSS部分:

    .top .top_page .top_page_l ul li{
    float: left;
    margin-right: 6px;//要计算好距离
    }
    .top .top_page .top_page_l ul li a{
    display: inline-block;
    margin-right: 6px;//计算好距离
    }

    方法二:

    HTML:

           <div>

    <a href="">注册</a>

    <span class="fenge"></span>

    <a href="">登录</a>

            </div>

    CSS:

             .fenge{

    padding:12px 6px 0px 6px;

    margin-left: 6px;

    border-left: 1px solid #000;

    font-size: 0;

    }

    利用border和padding ,这里使用padding主要是可以调控竖线的高度。实现可控性。优点:可控性高;缺点:多一个空白节点;

    方法三(我一般不用 。因为ps不好)

    HTML:

           <div>

    <a href="" class="reg_img">注册</a>

    <a href="">登录</a>

    </div>

    CSS:

           .reg_img{

                   background: url(../images/line.gif) no-repeat right;

                   padding-right: 6px;

                   display: block;

                   margin-right: 6px;

               }

    利用背景图片;优点:可控性当然就是图片的制作大小;缺点:要切图;

    以上。。。。

  • 相关阅读:
    jquery 第二节 Dom和jQuery的互相转换
    jquery 第一节 什么是jQuery
    SQL四大语句、四大完整性、五大约束
    empty和is_null以及isset函数在0、”0”、‘空串’、NULL、false、array()的计算值
    WAMP常用环境配置
    解读Java内部类
    每日编程系列——暗黑的字符串
    每日编程系列——跳石板
    每日编程系列——优雅的点
    每日编程系列——回文序列
  • 原文地址:https://www.cnblogs.com/xiaoping-2014/p/9031466.html
Copyright © 2011-2022 走看看