Charp5任务:
第5章的任务5-1 5-2 与上一次的4-1 4-2进行整合,成为一个完整的页面。
页面运行效果截图:
一个静态的购物页面
实现源代码:
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>任务5-1,2</title>
<link rel="stylesheet" href="11-5.1css.css">
</head>
<body>
<!-- 顶部空白区start -->
<div class="top"></div>
<!-- 顶部end -->
<!-- 顶部图片 start -->
<div class="logo">
<img src="../img/shop/images/logo.jpg">
<img src="../img/shop/images/banner.jpg" class="floatr">
</div>
<!-- 顶部图片 end -->
<!-- 菜单导航栏start -->
<div class="nav_bg">
<ul>
<li><a hre=" " class="white">首页</a></li>
<li>最新上架</li>
<li>品牌活动</li>
<li>原厂直供</li>
<li>团购</li>
<li>限时抢购</li>
<li>促销打折</li>
</ul>
</div>
<!-- 菜单导航栏start -->
<!-- 中间部分start -->
<div class="main">
<ul class="menu"></ul>
<div class="middle">
<h3 class="pic_title">最新上架</h3>
<div class="pic_list">
<dl>
<div><img src="../img/b8251010-755b-4405-8db3-db456b9d6057_353x353_90.jpg" alt=""></div>
<dt><span class="font">¥198.00元</span></dt>
<dt class="font">夏款韩版透气舒适简约半截袖</dt>
</dl>
<dl>
<div><img src="../img/b9e6c5cb-08cc-4860-adcf-bf5ede2df6ec_353x353_90.jpg" alt=""></div>
<dt><span class="font">¥198.00元</span></dt>
<dt class="font">夏款韩版透气舒适简约半截袖</dt>
</dl>
<dl>
<div><img src="../img/c4ca6678-2dfd-4041-bb80-2a85a5371710.jpg" alt=""></div>
<dt><span class="font">¥198.00元</span></dt>
<dt class="font">夏款韩版透气舒适简约半截袖</dt>
</dl>
<dl>
<div><img src="../img/c985a93c-56fd-43f4-adee-baf593ac588d_353x353_90.jpg" alt=""></div>
<dt><span class="font">¥198.00元</span></dt>
<dt class="font">夏款韩版透气舒适简约半截袖</dt>
</dl>
</div>
<div class="clear"></div>
<h3 class="pic_title">品牌活动</h3>
<ul class="pic_list1">
<li><img src="../img/ce78e999-3c4d-4f61-a1f6-57d5526d8a64_353x353_90.jpg" alt="">
<p class="font">独家定制v双层欧根纱里衬</p>
</li>
<li><img src="../img/f3a28502-82e5-4250-bcf0-c34752935e9c_353x353_90.jpg" alt="">
<p class="font">独家定制v双层欧根纱里衬</p>
</li>
<li><img src="../img/0dd6e585-8211-4702-bf26-4f14fd5b8c52_353x353_90.jpg" alt="">
<p class="font">独家定制v双层欧根纱里衬</p>
</li>
<li><img src="../img/120358002HA1_1_1614567177_353x353_90.jpg" alt="">
<p class="font">独家定制v双层欧根纱里衬</p>
</li>
</ul>
</div>
</div>
<!-- 右侧热门推荐start -->
<div class="right_nav">
<h3 class="notice_title">热门推荐</h3>
<div class="pic_list3"></div>
</div>
<!-- 中间区end -->
<!-- 底部start -->
<div class="clear"></div>
<div class="footer">
<div class="foot_title">
<ul class="foot_pic">
<li><img src="../img/shop/images/gray1.jpg" alt=""></li>
<li><img src="../img/shop/images/gray2.jpg" alt=""></li>
<li><img src="../img/shop/images/gray3.jpg" alt=""></li>
<li><img src="../img/shop/images/gray4.jpg" alt=""></li>
<li><img src="../img/shop/images/gray5.jpg" alt=""></li>
</ul>
</div>
<ul class="foot_list">
<li>
<div class="floatl">
<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="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="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="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="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="line1"></p>
</div>
<ul class="floatl">
<li class="font16 padding-bottom">新手指导</li>
<li>用户注册</li>
<li>电话下单</li>
<li>购物流程</li>
<li>购物保障</li>
<li>服务协议</li>
</ul>
</li>
</ul>
<div class="clear"></div>
<div class="foot_line">
<p class="font12">Copyright 2015-2020 Q-Walking Fashion E&S 漫步时代广场(QST教育)
版权所有<br>中国青岛 高新区河东路888号 青软教育集团,咨询热线:400
-658-0166 400-658-1022
</p>
<p align="center"><img src="../img/shop/images/foot_pic.jpg" alt=""></p>
</div>
</div>
</body>
</html>
CSS代码:
* {
margin: 0px;
padding: 0px;
}
ul li{
list-style:none;
}
.clear {
clear: both;
}
.floatr {
float: right;
}
/* 头部 */
.top {
height: 30px;
width: 1200px;
background-color: rgb(175, 173, 173);
border-bottom: 1px dashed rgb(68, 66, 66);
margin-bottom: 10px;
}
.logo {
width: 1200px;
}
.nav_bg {
background-color: red;
height: 30px;
width: 1200px;
margin-bottom: 10px;
}
.nav_bg ul{
margin-left: 250px;
}
.nav_bg li{
float:left;
text-align: center;
margin-right: 50px;
/* background-color: blue; */
line-height: 30px;
color:white;
}
/* 左侧导航 */
.main{
width:1200px;
}
.menu {
float:left;
width: 220px;
height: 500px;
background-color: grey;
margin-right: 10px;
}
/* 最中间部分 */
.middle {
width: 690px;
float: left;
height:500px;
}
.pic_title{
height: 30px;
background-color: red;
}
.pic_list {
margin:10px 0 10px 0;
height:200px;
background-color: sandybrown;
}
dl{
width:100px;
height:200px;
float:left;
margin:15px 15px 15px 40px;
}
.pic_list img{
height:125px;
width:120px;
border:1px dashed grey;
}
.font{
font-size:10px;
}
.pic_list1 {
margin:10px 0 10px 0;
height:200px;
background-color: sandybrown;
}
.pic_list1 li{
float:left;
height:200px;
width:100px;
margin:25px 25px 25px 40px;
}
.pic_list1 img{
height:130px;
width:100px;
}
.right_nav{
float:left;
width:270px;
margin-left: 10px;
}
.notice_title{
background-color: red;
height:30px;
}
.pic_list3{
height:460px;
background-color: grey;
margin-top:10px;
}
/* 底部 */
.footer{
width:1200px;
background-color:#efefef;
margin-top:15px;
}
.foot_title{
height:30px;
background-color:#6a6665;
}
.foot_list{
height:170px;
border-bottom: 1px dashed grey;
}
.foot_pic img{
width:100px;
height:30px;
}
.foot_pic li{
margin:0 70px 0 70px;
float:left;
}
.line1{
background:url(../img/shop/images/line1.jpg);
width:20px;
height:100px;
display:inline-block;
margin:40px 30px 0 0;
}
.floatl{
float:left;
}
.font16{
font-size: 20px;
font-weight:700
}
.foot-list>li{
float:left;
width:170px;
}
.foot_list ul{
margin-right: 70px;
}
/* 最下层 */
.foot_line{
height:100px;
width:1200px;
border-bottom:1px solid grey;
margin-top:15px;
}
.font12{
font-size:12px;
text-align: center;
}