JavaScript_Homework1

JavaScript

JavaScript作业一：基本网页编辑

最终效果

这里写图片描述

代码与效果

  • 菜单导航栏
    这里写图片描述

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div class="nav_bg">
    	<div class="nav_content">
    		<ul class="nav">
    			<li><a href="#" class="white">首页</a></li>
    			<li><a href="#" class="white">最新上架</a></li>
    			<li>品牌活动</li>
    			<li>原厂直供</li>
    			<li>团购</li>
    			<li>限时抢购</li>
    			<li>促销打折</li>
    		</ul>
    	</div>
    </div>

  • 左侧导航栏
    这里写图片描述

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <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>

  • 商品展示区
    这里写图片描述

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    <div class="middle">
    	<h1 class="pic_title">最新上架</h1>
    	<div class="pic_list">
    		<dl>
    			<div><a href="">
    				<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>夏新款韩版 透气舒适简约半截袖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">¥70.00元</span>
    					<span class="font12">735人购买</span></dt>
    				<dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd>
    		</dl>

    		<dl>
    			<div><img src="images/shopshow/yifu6.jpg"></div>
    				<dt><span class="price">¥146.00元</span>
    					<span class="font12">634人购买</span></dt>
    				<dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd>
    		</dl>

    		<dl>
    			<div><img src="images/shopshow/yifu7.jpg"></div>
    				<dt><span class="price">¥69.00元</span>
    					<span class="font12">734人购买</span></dt>
    				<dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd>
    		</dl>

    		<dl>
    			<div><img src="images/shopshow/yifu8.jpg"></div>
    				<dt><span class="price">¥239.00元</span>
    					<span class="font12">534人购买</span></dt>
    				<dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd>
    		</dl>
    	</div>
    	<h1 class="pic_title">最新动态</h1>
    	<div class="pic_list">
    		<dl>
    			<div><img src="images/shopshow/dress5.jpg"></div>
    			<dd>夏新款韩版 透气舒适简约半截袖T恤衫</dd>
    		</dl>
    		<dl>
    			<div><img src="images/shopshow/dress6.jpg"></div>
    			<dd>夏新款韩版 透气舒适简约半截袖T恤衫</dd>
    		</dl>
    		<dl>
    			<div><img src="images/shopshow/dress7.jpg"></div>
    			<dd>夏新款韩版 透气舒适简约半截袖T恤衫</dd>
    		</dl>
    		<dl>
    			<div><img src="images/shopshow/dress8.jpg"></div>
    			<dd>夏新款韩版 透气舒适简约半截袖T恤衫</dd>
    		</dl>
    	</div>
    </div>

  • 右侧展示区

这里写图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="right_nav">
		<h1 class="notice_title">热门推荐</h1>
		<div class="pic_list3">
			<li><img src="images/shopshow/s1.jpg"><dd>夏新款韩版</dd></li>
			<li><img src="images/shopshow/s2.jpg"><dd>夏新款韩版</dd></li>
			<li><img src="images/shopshow/s3.jpg"><dd>夏新款韩版</dd></li>
			<li><img src="images/shopshow/s4.jpg"><dd>夏新款韩版</dd></li>
			<li><img src="images/shopshow/s5.jpg"><dd>夏新款韩版</dd></li>
			<li><img src="images/shopshow/s6.jpg"><dd>夏新款韩版</dd></li>
			<li><img src="images/shopshow/s7.jpg"><dd>夏新款韩版</dd></li>
			<li><img src="images/shopshow/s8.jpg"><dd>夏新款韩版</dd></li>
			<li><img src="images/shopshow/s9.jpg"><dd>夏新款韩版</dd></li>
		</div>
</div>

  • 版权区域
    这里写图片描述
    1
    2
    3
    4
    5
    6
    7
    <div class="cnmp">
    		<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>

最终效果

这里写图片描述

本文标题:JavaScript_Homework1

文章作者:mao

发布时间:2018-03-13, 12:46:00

最后更新:2018-04-01, 22:23:41

原始链接:https://maojinkang.github.io/2018/03/13/JavaScript_Homework1/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. JavaScript作业一：基本网页编辑
  • 最终效果
    1. 0.1. 代码与效果
  • 1. 最终效果