【任务4-1】使用CSS样式美化购物列表页面中的菜单导航栏。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>购物列表-商品展示</title>
<style type="text/css">
*{padding:0;margin:0;}
li,ul{list-style:none;}
body{font-size:12px;font-family:microsoft yahei;margin:0;color:#000;}
.maddle{float:left;width:690px;}
.pic_list{float:left;}
.pic_list dl{float:left;width:152px;margin:0 10px 10px;}
.price{font-size: 15px;font-weight:700;color:red;float:left; }
.price2{font-size: 12px;font-weight:700;color:red;text-align:center;}
.font12{font-size:12px;color:#ccc;float:right;}
.pic_list dl img{padding:5px;border:1px solid #ccc;margin-bottom:10px;}
.pic_list dl dd{float:left;}
.pic_title{background:#ff9c01;line-height:40px;font-size:16px;text-indent:20px;text-align:left;
width:680px;float:left;color:#fff;margin:0 10px 10px;}
.pic_list2 li{float:left;}
.pic_list2{margin:0 6px 0 12px;}
.pic_list2 li{width:160px;float:left;margin:5px 4px;}
</style>
</head>
<body>
<div class="middle">
<h1 class="pic_title">最新上架</h1>
<div class="pic_list">
<dl>
<div><a href="shoppingDetail.html" target="_blank">
<img src=""/>
</a></div>
<dt><span class="price">￥198.00</span>
<span class="font12">348人购买</span></dt>
<dd>冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣</dd>
</dl><dl>
<div><a href="shoppingDetail.html" target="_blank">
<img src=""/>
</a></div>
<dt><span class="price">￥68.00</span>
<span class="font12">534人购买</span></dt>
<dd>夏新款韩版 透气舒适简约半截袖T恤</dd>
</dl>
</div>
<h1 class="pic_title">品牌活动</h1>
<ul class="pic_list2">
<li><img src=""><p>独家定制V双层欧根衬衫</p></li>
<li><img src=""><p>夏季新款连衣裙</p></li>
<li><img src=""><p>爱美斯夏季大摆裙</p></li>
<li><img src=""><p>夏季女士七分裤</p></li>
</ul>
</div>
</body>
</html>
【任务4-2】使用CSS样式美化购物列表页面中的商品展示区。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>导航栏——购物列表</title>
<style type="text/css">
*{padding:0;margin:0;}
li,ul {list-style: none;}
.nav_bg{background:#ce2626;width:100%;color:#fff;}
.nav_content{width:100%;margin:0 auto;height:40px;line-height:40px; }
.nav{width:100%;float:left;margin-left:200px;}
.nav li{font-size:16px;font-weight:700;color:#fff;width:80px;float:left;text-align: center;margin-right:15px;}
.orange{font-weight:700;color:#f60;}
.nav_active{background:#b12121;}
a.white{color:#fff;text-decoration:none;}
a.width:hover{color:#ff0;text-decoration:none;}
</style>
</head>
<body>
<div class="nav_bg">
<div class="nav_content">
<ul class="nav">
<li><a href="shoppingIndex.html" class="white">首页</a></li>
<li class="nav_active"><a href="shoppingShow.html" class="white">最新上架</a></li>
<li>品牌活动</li>
<li>原厂直供</li>
<li>团购</li>
<li>限时抢购</li>
<li>促销打折</li>
</ul>
</div>
</div>
</body>
</html>
【任务5-1】使用CSS样式实现购物列表页面的整体布局。
【任务5-2】使用CSS样式实现购物列表页面的左侧导航栏部分。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>导航栏——购物列表</title>
<style type="text/css">
*{padding:0;margin:0;}
li,ul {list-style: none;}
.nav_bg{background:#ce2626;width:100%;color:#fff;}
.nav_content{width:100%;margin:0 auto;height:40px;line-height:40px; }
.nav{width:100%;float:left;margin-left:200px;}
.nav li{font-size:16px;font-weight:700;color:#fff;width:80px;float:left;text-align: center;margin-right:15px;}
.orange{font-weight:700;color:#f60;}
.nav_active{background:#b12121;}
a.white{color:#fff;text-decoration:none;}
a.width:hover{color:#ff0;text-decoration:none;}
</style>
</head>
<body>
<div class="nav_bg">
<div class="nav_content">
<ul class="nav">
<li><a href="shoppingIndex.html" class="white">首页</a></li>
<li class="nav_active"><a href="shoppingShow.html" class="white">最新上架</a></li>
<li>品牌活动</li>
<li>原厂直供</li>
<li>团购</li>
<li>限时抢购</li>
<li>促销打折</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta http-equiv="Content" content="text/html" charset="utf-8">
<title>漫步时尚广场-购物列表</title>
<link rel="stylesheet" type="text/css" href="css/show_frame.css">
</head>
<body>
<!-- 顶部区域 -->
<div class="top_bg">
<div class="top_content"></div>
</div>
<!-- 顶部区域 end-->
<div class="clear"></div>
<!-- logo和banner start-->
<div class="logo">
<a href="../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-->
<div class="main">
<div class="middle"></div>
<h1 class="pic_title">最新上架</h1>
<div class="pic_list"></div>
<h1 class="pic_title">品牌活动</h1>
<ul class="pic_list2"></ul>
</div>
<div class="right_nav">
<h1 class="notice_title">热门推荐</h1>
<ul class="pic_list3"></ul>
</div>
</div>
<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>
</body>
body{font-size: 12px;font-family: microsoft yahei;margin: ;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;}
.math{margin: 10px auto;width: 1200px;height: 300px;background-color: #eee;}
/*头部*/
.top_bg{border-bottom: 1px soild #ccc;font-size: 12px;
line-height: 30px;background: #f7f7f7;height: 30px;}
.top_content{width: 100%;margin: 0 auto;height: 200px;}
.logo{margin: 5px auto;height: 200px;}
.nav_bg{background: #ce2626;width: 100%;color: #fff;height: 30px;}
/*左侧导航*/
.menu{width: 220px;float: left;border: 1px soild#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_title{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;float: right;border: 1px soild#eee;height: 345px;
background-color: #6FC;}
.notice_title{background: #eee;line-height: 40px;font-size: 16px;
text-indent:20px;text-align: left;}
/*foot*/
.fotter{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 soild #ccc;font-size: 12px;margin-top:10px;}
.foot_list{width: 100%;margin: 0 auto;padding-top: 20px;height: 60px;
background-color: #ddd;}
1963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
