13、商城首页制作实战训练--底部模块基本实现
1、底部页脚部分相对简单，因此这一讲将在线帮助、媒体声音这类简单的模块也一并做掉；
2、底部多个a标签换行再加一个p标签即可实现，调整下基本样式即可
<div id="footer" class="gradient">
<a href="#">关于我们</a>|
<a href="#">联系我们</a>|
<a href="#">版权声明</a>|
<a href="#">加入我们</a>|
<a href="#">问题反馈</a>|
<a href="#">友情链接</a>|
<a href="#">网站地图</a>|
<a href="#">视频索引</a><br/>
Copyright © 2008 www.100du.com 100度享乐网 版本所有<span>京ICP证070374号</span>
</div>#footer { width: 958px; height: 78px; margin: 0 auto; line-height: 26px; color: gray; text-align: center;}
#footer a{width: 60px; display: inline-block; text-align: center; color: #666666; margin-top: 14px;}
#footer a:hover{text-decoration: underline;}
#footer span{margin-left: 15px;}3、在线帮助模块可分为三个部分：p、ul和两个dl；3.1、第一段文字直接使用p标签实现，电话和邮箱部分通过两个li实现，ul底部边框画线；
3.2、底部两个dt左右浮云，dd背景为红点，空出左边距
<div class="section fl">
<h2 class="main_title">
<strong>HELP<span>在线帮助</span></strong>
</h2>
<div class="help">
<p class="text">您有任何问题，都可以通过全国负费电话，或通过在线客服与我们联系！</p>
<ul class="clear">
<li class="phone fl">4006-100-516</li>
<li class="email fr">[email protected]</li>
</ul>
<dl class="fl">
<dt>用户帮助</dt>
<dd><a href="#">金币是什么</a></dd>
<dd><a href="#">怎样查看我的等级</a></dd>
<dd><a href="#">怎么赚积分</a></dd>
</dl>
<dl class="fr">
<dt>商户帮助</dt>
<dd><a href="#">如何成为明星商户</a></dd>
<dd><a href="#">邮件推广</a></dd>
<dd><a href="#">论坛推广方法</a></dd>
</dl>
</div>
</div>
.help .text{text-indent: 26px; line-height: 16px; margin-top: 15px;}
.help ul{ line-height: 40px; padding-bottom: 4px; margin-bottom: 16px; border-bottom: 1px solid #eee;}
.help .phone, .help .email{ font-family: 'Arial'; padding-left: 22px;}
.help .phone{font-size: 15px; color: #b80000; font-weight: bold; background: url('../img/help.gif') no-repeat 0px 11px;}
.help .email{font-size: 13px; color: #666666; background: url('../img/help.gif') no-repeat 0px -33px;}
.help dl{margin: 0 10px; line-height: 18px; margin-bottom: 25px;}
.help a{color: #333333}
.help a:hover{text-decoration: underline;}
.help dt{font-weight: bold;}
.help dd{background: url('../img/dot.gif') no-repeat 5px center; padding-left: 12px;}4、媒体声音是典型的ul结构；4.1、每个li中包含一个带图片的a标签和一个p标签；
4.2、li内部设置左右浮云；
<div class="media">
<ul>
<li>
<a><img src="img/content/media1.gif" /></a>
<p>日本最大的财经杂志《钻石周刊》对100度享乐网的报道</p>
</li>
<li>
<a><img src="img/content/media2.gif" /></a>
<p>视频网站100度享乐网获得网络视听许可证</p>
</li>
<li>
<a><img src="img/content/media3.gif" /></a>
<p>互联网上的视频橱窗</p>
</li>
<li>
<a><img src="img/content/media4.gif" /></a>
<p>享乐主义的机会</p>
</li>
</ul>
</div>
.media {margin: 15px 0 18px 0;}
.media li{height: 43px; }
.media a{float: left; width: 90px;}
.media p{float: right; width: 211px; line-height: 18px;}5、源代码下载：**** Hidden Message *****
页:
[1]