JavaScript_homework1

基本网页编辑

【任务1-1】实现Q-Walking E&S购物列表页面中的菜单导航栏。
【任务1-2】实现Q-Walking E&S购物列表页面中的左侧导航栏。
【任务1-3】实现Q-Walking E&S购物列表页面中的商品展示区。
【任务1-4】实现Q-Walking E&S购物列表页面中的版权区域。

【任务1-1】实现Q-Walking E&S购物列表页面中的菜单导航栏。

• 1.项目代码

<!-- 菜单导航栏 strat-->
<div class="nav_bg">
	<div class="nav_content">
		<ul class="nav">
			<li><a href="shoppingIndex.html" class="white">首页</a></li>
			<li class="nac_active">
				<a href="shopping.html" class="white">最新上架</a>
			</li>
			<li>品牌活动</li>
			<li>原厂直供</li>
			<li>团购</li>
			<li>限时抢购</li>
			<li>促销打折</li>
		</ul>
	</div>
</div>
<!--菜单导航栏 end-->

• 2.网页效果
  

---

【任务1-2】实现Q-Walking E&S购物列表页面中的左侧导航栏。

• 1.项目代码

  <!--购物分类 start-->
  <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>
  <!--购物分类 end-->

• 2.网页效果
  

---

【任务1-3】实现Q-Walking E&S购物列表页面中的商品展示区。

• 1.项目代码

  <!--中间区 start-->
  <div class="middle">
  	<h1 class="pic_title">最新上架</h1>
  	<div class="pic_list">
  		<dl>
  			<div><a href="shoppingDetail.html" target="_blank">
  				<img src="images/shopshow/yifu1.jpg"></a></div>
  			<dt><span class="price">¥198.00元</span>
  				<span class="font12">324人购买</span></dt>
  			<dd>冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣</dd>
  		</dl>
  		<dl>
  			<div><img src="images/shopshow/yifu2.jpg"></div>
  			<dt><span class="price">¥69.00元</span>
  				<span class="font12">534人购买</span></dt>
  			<dd>2015夏新款韩版 透气舒适简约半截袖T恤衫</dd>
  		</dl>
  		<dl>
  			<div><img src="images/shopshow/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/shopshow/yifu4.jpg"></div>
  			<dt><span class="price">¥210.00元</span>
  				<span class="font12">678人购买</span></dt>
  			<dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd>
  		</dl>
  		<dl>
  			<div><img src="images/shopshow/yifu5.jpg"></div>
  			<dt><span class="price">¥99.00元</span>
  				<span class="font12">6991人购买</span></dt>
  			<dd>韩版甜美气质甜美学院立领格子衬衫</dd>
  		</dl>
  		<dl>
  			<div><img src="images/shopshow/yifu6.jpg"></div>
  			<dt><span class="price">¥150.00元</span>
  				<span class="font12">658人购买</span></dt>
  			<dd>冬季新款立领中袖套头格子衬衫娃娃衫</dd>
  		</dl>
  		<dl>
  			<div><img src="images/shopshow/yifu7.jpg"></div>
  			<dt><span class="price">¥110.00元</span>
  				<span class="font12">378人购买</span></dt>
  			<dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd>
  		</dl>
  		<dl>
  			<div><img src="images/shopshow/yifu8.jpg"></div>
  			<dt><span class="price">¥199.00元</span>
  				<span class="font12">655人购买</span></dt>
  			<dd>透气舒适简约头碎花连衣裙</dd>
  		</dl>
  	</div>
  </div>
  <!--中间区 end-->

• 2.网页效果
  

---

【任务1-4】实现Q-Walking E&S购物列表页面中的版权区域。

• 1.项目代码

  <!--版权 start-->
  <div class="foot_line">
  	<p align="center"><img src="images/foot_pic.jpg"></p>
  		<p align="center" class="padding-top">copyright 2015-2020 Q-Walking
  		Fashion E&S 漫步时尚广场（...）版权所有<br/>xxxxxxxxxx xxx xx xx 
  		咨询热线 xxx-xxx-xxxx xxx-xxx-xxxx
  	</p>
  	<div class="clear"></div>
  </div>
  <!-- 版权end-->

• 2.网页效果
  

---

最终显示效果：

--end