7、商城首页制作实战训练--导航部分样式实现

Sian

1、将导航划分为三个部分，左中右结构，中间为logo，左右分别为ul+li
2、相对定位postion的说明：
2.1、absolute        生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位；
2.2、如果要相对父元素进行定位，应该将父元素position设置成relative，否则会继续要对父元素的父元素一直往上找；
2.3、position设置成relative意思为相对原来的位置做偏移调整；
2.4、让两个ul分别绝对定位导航div的左边和右边；
2.5、logo相对布局于中间，根据需要下移一点距离
3、所有的li设置左float，将将li中的a标签设置背景，所有的图标合成一张背景图，通过background-postion来实现不同区域显示；
4、padding-top腾出上部空间来显示背景色；
5、hover同样的方法实现高亮图片；
6、部分代码：
style.css

[CSS] 纯文本查看 复制代码

#nav ul{ position: absolute; top:10px;}
#nav h1{width: 223px; height: 62px; margin: 0 auto; position: relative; top: 10px;}
#nav li{ float: left;}
#nav li a{display: block; width: 66px; padding-top: 50px; text-align: center; background:url('../img/nav_bg.png') no-repeat; color: #333;}
#nav li a:hover{text-decoration: underline;}
#nav .bg1{background-position: 0px 0px;}
#nav .bg1:hover{background-position: 0px -70px;}
#nav .bg2{background-position: -66px 0;}
#nav .bg2:hover{background-position: -66px -70px;}
#nav .bg3{background-position: -132px 0;}
#nav .bg3:hover{background-position: -132px -70px;}
#nav .bg4{background-position: -198px 0;}
#nav .bg4:hover{background-position: -198px -70px;}
#nav .bg5{background-position: -264px 0;}
#nav .bg5:hover{background-position: -264px -70px;}
#nav .bg6{background-position: -330px 0;}
#nav .bg6:hover{background-position: -330px -70px;}
#nav .bg7{background-position: -396px 0;}
#nav .bg7:hover{background-position: -396px -70px;}
#nav .bg8{background-position: -462px 0;}
#nav .bg8:hover{background-position: -462px -70px;}
#nav .bg9{background-position: -528px 0;}
#nav .bg9:hover{background-position: -528px -70px;}
#nav .bg10{background-position: -594px 0;}
#nav .bg10:hover{background-position: -594px -70px;}
#nav .nav_1{left: 11px;}
#nav .nav_2{right: 11px;}

index.html

[HTML] 纯文本查看 复制代码

        <div id="nav">
                <ul class="nav_1">
                        <li><a class="bg1" href="#">美食</a></li>
                        <li><a class="bg2" href="#">夜店</a></li>
                        <li><a class="bg3" href="#">购物</a></li>
                        <li><a class="bg4" href="#">文化</a></li>
                        <li><a class="bg5" href="#">休闲</a></li>
                </ul>
                <h1><img src="img/logo.png"/></h1>
                <ul class="nav_2">
                        <li><a class="bg6" href="#">烧客空间</a></li>
                        <li><a class="bg7" href="#">知道分子</a></li>
                        <li><a class="bg8" href="#">白吃白拿</a></li>
                        <li><a class="bg9" href="#">烧客论坛</a></li>
                        <li><a class="bg10" href="#">企业俱乐部</a></li>
                </ul>
        </div>

7、源代码下载：

游客，如果您要查看本帖隐藏内容请回复