年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1889|回复: 0

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

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2016-2-22 17:38:36 | 显示全部楼层 |阅读模式
    本帖最后由 Sian 于 2016-2-23 15:04 编辑

    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、源代码下载:
    游客,如果您要查看本帖隐藏内容请回复
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-29 00:52 , Processed in 0.053537 second(s), 25 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表