这里写目录标题
第五章
注: 素材图片路径需要根据实际情况修改
任务5-1
shoppingShow_frame.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>漫步时尚广场-购物列表</title>
<link href = "css/show_frame.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--頂部区城start-->
<div class="top_bg">
<div class="top_content"></div>
</div>
<!--顶部区域end-->
<div class="clear"></div>
<!-- logo 和 banner start -->
<div class="logo">
<a hef="../index html"><img src="images/logo.jpg"></a>
<img src="images/banner.jpg" class="floatr">
</div>
<!-- logo 和 banner end -->
<!--菜单导航栏start -->
<div class="nav_bg"></div>
<!--菜单导航栏end -->
<!--中间部分start -->
<div class="main">
<!--购物分类start -->
<ul class ="menu"></ul>
<!--购物分类end -->
<!--中间区start -->
<div class ="middle">
<h1 class="pic_title">最新上架</h1>
<div class="pic_list"></div>
<!--品牌活动-->
<h1 class="pic_title">品牌活动</h1>
<ul class="pic_list2"></ul>
</div>
<!--中间区end -->
<!--右侧热门推荐start -->
<div class="right_nav">
<h1 class="notice_title">热门推荐</h1>
<ul class= "pic_list3"></ul>
</div>
<!--右侧热门推荐end-->
</div >
<!--中间部分end--><!--底部start -->
<div class="clear"></div>
<div class="footer">
<div class="foot_title"></div>
<ul class="foot_list"></ul>
<div class="clear"></div>
<div class="foot_line"></div>
</div >
<!--底部end -->
</body>
</html >
show_frame
body{font-size:12px;font-family:microsoft yahei;margin:0;color: #000;}
* {padding:0;margin:0;}
li, ul{list-style:none;}
a{color: #000; text-decoration:none; }
img{border:none;}
.clear{clear:both;}
.floatr{float:right;}
.main{margin:10px auto;width:1200px;height:300px;background-color: #eee;}
/*头部*/
.top_bg{border-bottom:1px solid #ccc;font-size:12px;
line-height:30px;background: #f7f7f7;height:30px;}
.top_content{width:100%;margin:0 auto;height:200px;}
logo{margin:5px auto;width: 1200px;}
.nav_bg{background:#ce2626;width:100%;color: #fff;height:30px;}
/*左侧导航*/
.menu{width:220px;float:left;border:1px solid #e5e4e1;height:350px;
background-color: #FFC;}
/*中间部分*/
.middle{float:left;width:690px;}
.pic_list{float:left;margin:0 6px 3px 12px;height:120px;width:98%;
background-color: #FCF;}
.pic_titlel{background:#ff9c01;line-height:40px;color:#fff;text-indent:20px;
text-align:left;width:680px;float: left;font-size:16px;margin:0 10px 10px}
.pic_list2{float:left;margin:0 6px 3px 12px;height:120px;
width:98%;background-color:#FCF;}
/*右侧公告*/
.right_nav{width:280px;border:1px solid #eee;float:right;height:345px;
background-color: #6FC;}
.notice_title{background: #eee;line-height:40px;font-size:16px;
text-indent:20px; text-align:left;}
/*foot*/
.footer{width:100%;background: #efefef;height:180px;margin-top:15px;}
.foot_title{background: #6a6665;width:100%;height:40px;padding-top:8px;}
.foot_line{border-bottom:1px solid #ccc;font-size:12px;margin-top:10px;}
.foot_list{width:100%;margin:0 auto;padding-top:20px;height:60px;
background-color:#ddd;}
运行截图：
任务5-2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>漫步时尚广场购物列表-底部模块</title>
<style type="text/css">
body{font-size:12px;font-family:microsoft yahei;margin:0;columns: #000000;
*{padding:0;margin:0;}
li,ul{list-style:none;}
img{border:none;}
.font16{font-size:16px;font-weight:700;}
.clear{clear:both;}
.floatl{float:left;}
/* foot*/
.footer{width:100%;background: #efefef;height:310px;margin-top:15px;}
.foot_title{background: #6a6665;width:100%;height:40px;
padding-top:8px;}
.foot_pic{margin:0 auto;width:100%;}
.foot_pic li{width:210px;float:left;text-align:center;}
.padding-bottom{padding-bottom:10px;}
.padding-top{padding-top:10px;}
.foot_line{border-bottom:1px solid #ccc;font-size:12px;margin-top:10px}
.line1{background:url(../images/line1.jpg) no-repeat;width:20px;
height:100px;display:inline-block;}
.red1{background:url(../images/red1.jpg) no-repeat;width:35px;
height:31px;display:block;}
.red2{background:url(../images/red2.jpg) no-repeat;width:35px;
height:31px;display:block;}
.red3{background:url(../images/red3.jpg) no-repeat;width:35px;
height:31px;display:block;}
.foot_list>li{float:left;width:170px;}
.foot_list{width:100%;margin:0 auto;padding-top:20px;}
.foot_list li ul{padding-left:10px;}
</style>
</head>
<body>
<!--底部start-->
<div class="footer">
<div class="foot_title">
<ul class="foot_pic">
<li><img src="images/gray1.jpg"></li>
<li><img src="images/gray2.jpg"></li>
<li><img src="images/gray3.jpg"></li>
<li><img src="images/gray4.jpg"></li>
<li><img src="images/gray5.jpg"></li>
</ul>
</div>
<ul class="foot_list">
<li>
<div class="floatl">
<p class="red1"></p>
<p class="line1"></p>
</div>
<ul class= "floatl">
<li class="font16 padding-bottom">新手指导</li>
<li>用户注册</li>
<li>电话下单</li>
<li>购物流程</li>
<li>购物保障</li>
<li>服务协议</li>
</ul>
</li>
<li>
<div class="floatl">
<p class="red2"></p>
<p class="line1"></p>
</div >
<ul class="floatl">
<li class="font16 padding-bottom">支付方式</li>
<li>货到付款</li>
<li>商城卡支付</li>
<li>支付宝、网银支付</li>
<li>优惠券抵用</li>
</ul>
</li>
<li>
<div class="floatl">
<p class="red3"></p>
<p class="line1"></p>
</div>
<ul class="floatl">
<li class="font16 padding-bottom">配送方式</li>
<li>闪电发货</li>
<li>满百包邮</li>
<li>配送范围及时间</li>
<li>商品验收及签收</li>
<li>服务协议</li>
</ul>
</li>
<li>
<div class="floatl">
<p class="red3"></p>
<p class="line1"></p>
</div>
<ul class="floatl">
<li class ="font16 padding-bottom">售后服务</li>
<li>退换货协议</li>
<li>关于发票</li>
<li>退换货流程</li>
<li>退换货运费</li>
</ul>
</li>
<li>
<div class="floatl">
<p class="red3"></p>
<p class="line1"></p>
</div>
<ul class="floatl">
<li class ="font16 padding-bottom">关于账号</li>
<li>修改个人信息</li>
<li>修改密码</li>
<li>找回密码</li>
</ul >
</li>
<li>
<div class="floatl">
<p class="red3"></p>
<p class="line1"></p>
</div>
<ul class="floatl">
<li class ="font16 padding-bottom">优惠活动</li>
<li>竞拍须知</li>
<li>抢购须知</li>
</ul >
</li>
</ul>
<div class ="clear"></div>
<div class="foot_line"></div>
<p align="center" class = "padding-top">Copyright 2015-2020 Q- Walking Fashion E&S
漫步时尚广场(QST教育)版权所有<br/>中国青岛 高新区广博路325号 青软教育集团
咨询热线: 400-658-0166 400-658-1022</p>
<p align="center"><img src="images/foot_pic.jpg"></p>
<div class="clear"></div >
</div>
<!--底部end-->
</body>
</html >
运行截图：
