Web前端学习记录(一)
程序员文章站
2022-04-22 14:58:15
...
1."购物列表"页面的菜单导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漫步时尚广场</title>
</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."购物列表"页面的左侧导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漫步时尚广场</title>
</head>
<body>
<ul class="menu">
<li><span class="title">女装</span></li>
<li><span class="red_dot"></span><a href="#">上衣</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#">下装</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#">连衣裙</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#">内衣</a><span class="right_arrow"></span></li>
<li><span class="title">男装</span></li>
<li><span class="red_dot"></span><a href="#">T恤</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#">短裤</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#">衬衫</a><span class="right_arrow"></span></li>
<li><span class="title">童装</span></li>
<li><span class="red_dot"></span><a href="#">上衣</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#">裤子</a><span class="right_arrow"></span></li>
<li><span class="title">运动</span></li>
<li><span class="red_dot"></span><a href="#">运动裤</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#">跑步鞋</a><span class="right_arrow"></span></li>
</ul>
</body>
</html>
预览如下：
3."购物列表"页面的商品展示区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漫步时尚广场</title>
</head>
<body>
<div class="title">
<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>
</div>
</body>
</html>
预览如下：
虽然衣服图片不是很符合衣服标题，但是漂亮呀！！！
4."购物列表"页面的版权区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="foot_line"></div>
<p align="center" class="padding - top">Copyright 2015 - 2020 Q - Walking Fashion E&S 漫步时尚广场（QST教育）版权所有<br/> 中国青岛 高新区广博路 325号 青软教育集团 咨询热线： 400-628-1022</p>
<p align="center"><img src="images/yifu2.jpg"></p>
<div class="clear"></div>
</body>
</html>
预览如下：