Web前端学习记录(五)
程序员文章站
2022-04-22 15:01:55
...
1.css美化的菜单导航栏
预览如下：
shoppingShow_menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta 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.white: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="shoppingIndex.html" class="white">最新上架</a></li>
<li>品牌活动</li>
<li>原厂直供</li>
<li>团购</li>
<li>限时抢购</li>
<li>促销打折</li>
</ul>
</div>
</div>
</body>
</html>
2.css美化的商品展示区
预览如下：
shoppingShow_goods.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta 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}
.middle{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: 700px;color: red;float: left;}
.price2{font-size: 12px;font-weight: 700px;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">
<hl class="pic_title">最新上架</hl>
<div class="pic_list">
<dl>
<div><a href="shoppingDetail.html" target="_blank"></a><img src="images/yifu5.jpg"></div>
<dt><span class="price">￥198.00元</span>
<span class="font12">324人购买</span></dt>
<dd>冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣</dd>
</dl>
<dl>
<div><img src="images/yifu2.jpg"></div>
<dt><span class="price">￥69.00元</span>
<span class="font12">524人购买</span></dt>
<dd>2015夏新款韩版 透气舒适简约半截袖T恤衫</dd>
</dl>
<dl>
<div><img src="images/yifu3.jpg"></div>
<dt><span class="price">￥160.00元</span>
<span class="font12">643人购买</span></dt>
<dd>韩版甜美气质亮片热气球字母中长款圆领短袖T恤</dd>
</dl>
<dl>
<div><img src="images/yifu4.jpg"></div>
<dt><span class="price">￥210.00元</span>
<span class="font12">678人购买</span></dt>
<dd>2015款秋新款甜美学院立领中袖姥姥衫</dd>
</dl>
</div>
<hl class="pic_title">品牌活动</hl>
<ul class="pic_list2">
<li>
<img src="images/dress1.jpg">
<p>独家定制V双层欧根纱里衬 色织时装料大牌范蓬蓬长裙</p>
</li>
<li>
<img src="images/dress2.jpg">
<p>夏季新款 子域D565E简约通勤腰带修身大摆短袖连衣裙</p>
</li>
<li>
<img src="images/dress3.jpg">
<p>爱美斯2015夏季优雅显瘦大摆长裙 中长款复古印花淑女裙</p>
</li>
<li>
<img src="images/dress4.jpg">
<p>亿婷2015夏女装新品显瘦飘逸黑白竖条纹阔腿裤七分裤裙</p>
</li>
</ul>
</div>
</body>
</html>
上一篇： 历史上著名的两位让皇帝，他们分别是谁？