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

Sian

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、源代码下载：

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