年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2106|回复: 0

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

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

    [LV.9]以坛为家II

    发表于 2016-2-25 09:41:46 | 显示全部楼层 |阅读模式
    屏幕快照 2016-02-25 上午9.30.57.png
    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][email protected][/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、源代码下载:
    游客,如果您要查看本帖隐藏内容请回复
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

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

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

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