年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2054|回复: 0

[电子商务] 6、商城首页制作实战训练--头部样式及内容实现

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

    [LV.9]以坛为家II

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

    QQ20160222-1@2x.png
    1、头部可以切分为两个p段落,分别左右float,在p中放置a链接来实现;
    2、分别编写边右a链接的样式,包括:边框、位置、阴影、hover、背景图片等;
    3、样式调整与多浏览器适配
    4、关键代码:
    style.css
    [CSS] 纯文本查看 复制代码
    #header { height: 30px; border-radius: 0 0 6px 6px;}
    #header .city{float: left;padding: 5px 20px;}
    #header .city a{border: 1px solid #CCC; border-radius: 4px; box-shadow: 1px 1px 3px #DDD; display: inline-block;height: 18px; padding: 0 7px; line-height: 18px;background: #FFF;color: #999;}
    #header .city .active, #header .city .active:hover{color: red;background: #FFF;}
    #header .city a:hover{background: #EEE;}
    #header .link{float: right; line-height: 30px; padding-right: 20px; color: #d5d5d5; word-spacing: 4px;}
    #header .link a{color: #666; background: url('../img/header_link_bg.gif') no-repeat; padding-left: 20px;}
    #header .link a:hover{text-decoration: underline;}
    #header .link .ico1{background-position: 0px 0px;}
    #header .link .ico2{background-position: 0 -30px;}
    index.html
    [HTML] 纯文本查看 复制代码
            <div id="header" class="gradient">
                    <p class="city">切换城市:
                            <a class="active" href="#">上海</a>
                            <a href="#">福州</a>
                            <a href="#">广州</a>
                            <a href="#">青岛</a>
                    </p>
                    <p class="link">
                            <a class="ico1" href="#">加盟100度</a> |
                            <a class="ico2" href="#">店铺管理</a>
                    </p>
            </div>
    5、源代码下载:
    游客,如果您要查看本帖隐藏内容请回复
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2024-3-19 18:58 , Processed in 0.053239 second(s), 25 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

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