中间文字，两侧线条，文字居中的布局

最新推荐文章于 2021-06-04 00:42:45 发布

weixin_30918415

最新推荐文章于 2021-06-04 00:42:45 发布

阅读量184

点赞数

原文链接：http://www.cnblogs.com/heyiming/p/6042308.html

版权

一

 <style>
        .free_fit{
            position: relative;
            height: 30px;
        }
        .tit{
            width: 180px;
            height: 30px;
            text-align: center;
            color: #616161;
            font-weight: 700;
            background:white;
            position: absolute;
            z-index: 2;
            left: 50%;
            margin-left: -90px;
            line-height: 30px;
        }
        .tit-bg{
            width: 100%;
            height: 1px;
            position: absolute;
            z-index: 1;
            top: 14px;
            background: #ccc;
        }
        .zhanwei{
            width: 100%;
            height: 20px;
            background: yellow;
            text-align: center;
        }
    </style>

<div style="width: 100%;height: 50px;background: red">
    <div class="free_fit">
        <p class="tit">中间的文字</p>
        <p class="tit-bg"></p>
    </div>
</div>

<div class="zhanwei">
           占位div，直观的验证
</div>




二
<style type="text/css">
        ul#navlist {
            font:12px verdana;
            padding-bottom: 13px;
        }

        ul#navlist li span{
            background: #FBFBFB;
        }
        ul#navlist li {
            float: left;
            height: 30px;
            border: 0px solid #6c6;
            width: 100%;
        }
        ul#navlist .list1 {
            border-bottom: 1px solid #6c6;
            width: 100%;
            margin-bottom: -15px;
        }

        #navlist b {
            display: block;
            color: #666;
            text-decoration: none;
            padding: 6px 5px;
            width: 100%;
            text-align: center;
        }
    </style>

</head>

<body>

<ul id="navlist">
    <li class="list1"></li>
    <li class="list2"><b><span>官方精选</span></b></li>
</ul>

</body>

</html>

转载于:https://www.cnblogs.com/heyiming/p/6042308.html

weixin_30918415

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
中间文字，两侧线条，文字居中的布局

一 <style> .free_fit{ position: relative; height: 30px; } .tit{ width: 180px; height: 30px; text-align: center; ...
复制链接

扫一扫