13、商城首页制作实战训练--底部模块基本实现

Sian

1、底部页脚部分相对简单，因此这一讲将在线帮助、媒体声音这类简单的模块也一并做掉；
2、底部多个a标签换行再加一个p标签即可实现，调整下基本样式即可

[HTML] 纯文本查看 复制代码

	<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 &#169; 2008 [url]www.100du.com[/url] 100度享乐网 版本所有<span>京ICP证070374号</span>
	</div>

[CSS] 纯文本查看 复制代码

#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背景为红点，空出左边距

[HTML] 纯文本查看 复制代码

<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]100do.com@live.cn[/email]</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>

[CSS] 纯文本查看 复制代码

.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内部设置左右浮云；

[HTML] 纯文本查看 复制代码

<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>

[CSS] 纯文本查看 复制代码

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

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