6、商城首页制作实战训练--头部样式及内容实现
本帖最后由 Sian 于 2016-2-23 15:04 编辑1、头部可以切分为两个p段落，分别左右float，在p中放置a链接来实现；
2、分别编写边右a链接的样式，包括：边框、位置、阴影、hover、背景图片等；
3、样式调整与多浏览器适配
4、关键代码：
style.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 <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、源代码下载：**** Hidden Message *****
页:
[1]