NEC学习 ---- 模块 -文本圆角背景导航

最新推荐文章于 2025-08-12 13:45:23 发布

weixin_30588729

最新推荐文章于 2025-08-12 13:45:23 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Zell-Dinch/p/4513669.html

本文介绍了如何使用CSS实现一个无浮动布局的圆角背景导航栏，包括定位、圆角设计、文本控制及兼容性处理。通过详细步骤和代码示例，展示了如何创建美观且响应式的导航栏设计。

下图是效果图:

然后, 左右两边的圆角图片和背景图片如下

(因为截图工具的原因, 可能图片不是很清晰. 这个图片有4个部分, 分别是中间的背景图, 左右圆角以及栏目分隔白线)

思路:

利用inline-block元素的中间性(既有块级元素特点: 能够控制宽高,可以定位, 也有内联元素特点: 可以被父元素text-align等)

HTML代码:

<div class="m-nav">
    <ul>
        <li class="first"><a href="#">栏目1</a></li>
        <li><a href="#">栏目2</a></li>
        <li><a href="#">栏目3</a></li>
        <li><a href="#">栏目4</a></li>
    </ul>
    <span class="corner corner-l"></span><span class="corner corner-r"></span>
</div>

1, 首先定位一个总体高度, .m-nav, .m-nav li, .m-nav li a, .m-nav .corner 这几个元素是一样高的

2, 确定要使用图片的元素, .m-nav(中间背景图片), .m-nav .corner(左右圆角图), .m-nav li(栏目分割的白线图)

3, 将栏目中间化, inline-block控制(考虑兼容性)

4, 定位圆角

5, 控制文本

css 代码如下:

<style type="text/css">
    .m-nav, .m-nav li, .m-nav li a, .m-nav .corner {
        height:40px;line-height:40px;background: url(images/nav.png) no-repeat -9999px -9999px;
    }
    .m-nav {
        background-position: 0 0;width:90%;
        background-repeat: repeat-x;
        text-align:center;
        font-weight:bold;
        margin:auto;
        margin-top:45px;
        position:relative;
        font-size:0;
        color:#fff;
        letter-spacing: -0.307em;
        *letter-spacing: normal;
        *word-spacing: -1px;
    }
    .m-nav li, .m-nav li a, .m-nav .corner {
        display:inline-block;*display:inline;*zoom:1;
    }
    .m-nav li {
        background-position: 0 -150px;
    }
    .m-nav li.first{
        background:none;
    }
    .m-nav .corner {
        width:6px;
        position: absolute;
        top:0;left: 0;
    }
    .m-nav .corner-l {
        background-position: 0 -50px;
        margin-left:-6px;
    }
    .m-nav .corner-r {
        background-position: 0 -100px;
        margin-left:100%;
    }
    .m-nav li a {
        padding:0 20px;
        font-size:14px;color:#fff;text-align:center;
        letter-spacing: normal;
        word-spacing:normal;
    }
    .m-nav li a:hover{
        text-decoration: underline;
    }
</style>