《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》-漫步时尚广场代码-5

第五章

注: 素材图片路径需要根据实际情况修改

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

运行截图:
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读