JavaScript_Homework1

JavaScript作业一:基本网页编辑

最终效果

这里写图片描述

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

这里写图片描述

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 导航栏区域-->
<div class="panel-body col-md-offset-4">
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">最新上架</a></li>
<li><a href="#">品牌活动</a></li>
<li><a href="#">原厂直销</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">限时抢购</a></li>
<li><a href="#">促销打折</a></li>
</ul>
</div>


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

这里写图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul class="nav nav-list col-md-2 list-group" contenteditable="true">
<li class="nav-header list-group-item active">女装</li>
<li><a href="#">•&nbsp;上衣</a></li>
<li><a href="#">•&nbsp;下装</a></li>
<li><a href="#">•&nbsp;连衣裙</a></li>
<li><a href="#">•&nbsp;内衣</a></li>

<li class="nav-header list-group-item">男装</li>
<li><a href="#">•&nbsp;T恤</a></li>
<li><a href="#">•&nbsp;短裤</a></li>
<li><a href="#">•&nbsp;衬衫</a></li>

<li class="nav-header list-group-item">童装</li>
<li><a href="#">•&nbsp;上衣</a></li>
<li><a href="#">•&nbsp;裤子</a></li>

<li class="nav-header list-group-item">运动</li>
<li><a href="#">•&nbsp;运动裤</a></li>
<li><a href="#">•&nbsp;跑步鞋</a></li>
</ul>

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

这里写图片描述

1
2
3
4
5
6
7
<div class="col-md-2">
<img src="images/dress1.jpg" class="img-thumbnail">
<div class="caption">
<h3>价格:¥199.00</h3>
<p>新款花色短袖简约修身大摆裙</p>
</div>
</div>


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

这里写图片描述

1
2
3
4
5
6
7
<!-- 版权区域-->
<div class="panel-body">
<div class="foot_line"></div>
<p align="center" class="padding-top">Copyright 2015-2020 Q-Walking Fashion E&S 漫步时尚广场(QST教育)版权所有<br> 中国青岛 高新区广博路325号 青软教育集团 咨询热线:400-658-0166 400-658-1022</p>
<p align="center"><img src="images/foot_pic.jpg"></p>
<div class="clear"></div>
</div>


最终效果

这里写图片描述

---------------- The End ----------------
May丶乘剑 wechat
欢迎扫描二维码关注我的微信公众号~~
0%