JavaScript_Homework3

JavaScript

JavaScript作业三 CSS应用

JavaScript作业三

【任务4-1】使用CSS样式美化购物列表页面中的菜单导航栏

这里写图片描述

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
	<!DOCTYPE html>
<html>
<head>
	<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:1200px;margin:0 auto;height:40px;line-height:40px}
		.nav{width:700px;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="#" class="white">首页</a></li>
				<li><a href="#" class="white">最新上架</a></li>
				<li>品牌活动</li>
				<li>原厂直供</li>
				<li>团购</li>
				<li>限时抢购</li>
				<li>促销打折</li>
			</ul>
		</div>
	</div>
</body>
</html>

【任务4-2】使用CSS样式美化购物列表页面中的商品展示区

这里写图片描述

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
	<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body{font-size:12px;font-family:microsoft yahei;margin:0;color:#000}
		*{padding:0;margin:0}
		li,ul{list-style:none}
		.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:700;color:red;float:left}
		.price2{font-size:12px;font-weight:700;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">
		<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>
</body>
</html>

【任务5-1】使用CSS样式实现购物列表页面的整体布局

这里写图片描述

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
	<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<link type="text/css" rel="stylesheet" href="css/show_frame.css">
</head>
<body>
	<!--顶部区域-->
	<div class="top_bg">
		<div class="top_content"></div>
	</div>
	<!--顶部区域end-->

	<div class="clear"></div>
    <!--logo和bannner start-->
    <div class="logo">
    	<a href="../index.html"><img src="images/logo.jpg"></a>
    	<img src="images/banner.jpg" class="floatr">
    </div>
      <!--logo和bannner end-->
    <!--菜单导航栏start-->
    <div class="nav_bg"></div>
    <!--菜单导航栏end-->
    <!--中间部分start-->
    <div class="main">
    	<!--购物分类start-->
    	<ul class="menu"></ul>
    	<!--购物分类end-->
    	<!--中间区start-->
    	<div class="middle">
    		<h1 class="pic_title">最新上架</h1>
    		<div class="pic_list"></div>
    		<!--品牌活动-->
    		<h1 class="pic_title">品牌活动</h1>
    		<div class="pic_list2"></div>
    	</div>
    <!--中间部分end-->	
    <!--右侧热门推荐start-->
    <div class="right_nav">
    	<h1 class="notice_title">热门推荐</h1>
    	<ul class="pic_list3"></ul>
    </div>
    <!--右侧热门推荐end-->
</div>
<!--中间部分end--><!--底部start-->
<div class="clear"></div>
<div class="footer">
<div class="foot_title"></div>
<ul class="foot_list"></ul>
<div class="clear"></div>
<div class="foot_line"></div>
</div>
</body>
</html>

【任务5-2】使用CSS样式实现购物列表页面的左侧导航栏部分

这里写图片描述

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
	<!DOCTYPE html >
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>漫步时代广场-购物列表-底部模块</title>
	<style type="text/css">
	body{font-size:12px;font-family:microsoft yahei;margin:0;color:#000}
    *{padding:0;margin:0}
    li,ul{list-style:none}
	img{border:none}
    .font16{font-size:16px;font-weight:700}
    .clear{clear:both}
    .floatl{float:left}
	.footer{width:100%;background:#efefef;height:310px;margin-top:15px}
    .foot_title{background:#6a6665;width:100%;height:40px;padding-top:8px}
    .foot_pic{margin:0 auto;width:1200px}
    .padding-bottom{padding-bottom:10px}
    .padding-top{padding-top:10px}
    .foot_line{border-bottom:1px solid #ccc;font-size:12px;margin-top:10px}
    .line1{background:url(../images/line1.jpg) no-repeat;width:20px;height:100px;display:inline-block}
    .red1{background:url(../images/red1.jpg) no-repeat;width:35px;height:31px;display:block}
    .red2{background:url(../images/red2.jpg) no-repeat;width:35px;height:31px;display:block}
    .foot_list>li{float:left;width:170px}
    .foot_list{width:1100px;margin:0 auto;padding-top:20px}
     .foot_list li ul{padding-left:10px}
</style>
</head>
<body>
<!-- 底部 start--><Br/>g
<table width="100%" border="0" cellpadding="3" cellspacing="0" bgcolor="#6a6665" height="35" class="foot_bg">

	<tr>
		<td class="padding-top">
			<table width="1200" border="0" align="center" cellpadding="0" cellspacing="0">
				<tr>
					<td width="20%" align="center"><img src="images/gray1.jpg"></td>
					<td width="20%" align="center"><img src="images/gary2.jpg"></td>
					<td width="20%" align="center"><img src="images/gray3.jpg"></td>
					<td width="20%" align="center"><img src="images/gray4.jpg"></td>
					<td width="20%" align="center"><img src="images/gray5.jpg"></td>
	               
   </tr>
</table>
</td>
</tr>
<tr>
	<td bgcolor="#efefef" class="foot_line padding-top">
		<table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
			<tr>
				<td align="center" valign="top"><img src="images/red1.jpg"><br>
					<img src="images/line1.jpg"/></td>
					<td width="15%" valign="top">
						<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
							<tr><td class="font16 padding-bottom">新手指导</td></tr>
							<tr><td>用户注册</td></tr>
							<tr><td>电话下单</td></tr>
							<tr><td>购物流程</td></tr>
							<tr><td>购物保障</td></tr>
                            <tr><td>服务协议</td></tr>
                        </table>
                     </td>

     				<td align="center" valign="top"><img src="images/red2.jpg"><br>
                    <img src="images/line1.jpg"/></td>
                    <td width="15%" valign="top">
						<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
							<tr><td class="font16 padding-bottom">支付方式</td></tr>
							<tr><td>货到付款</td></tr>
							<tr><td>商城卡支付</td></tr>
							<tr><td>支付宝 网银支付</td></tr>
							<tr><td>优惠卷</td></tr>
                          
                        </table>
                   

                    <td align="center" valign="top"><img src="images/red3.jpg"><br>
					<img src="images/line1.jpg"/></td>
                    <td width="15%" valign="top">
						<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
							<tr><td class="font16 padding-bottom">配送方式</td></tr>
							<tr><td>闪电发货</td></tr>
							<tr><td>满百包邮</td></tr>
							<tr><td>配送范围及时间</td></tr>
							<tr><td>验收及签收</td></tr>
							<tr><td>服务协议</td></tr>
                          
                        </table>
                    </td>
                    <td align="center" valign="top"><img src="images/red4.jpg"><br>
					<img src="images/line1.jpg"/></td>
                    <td width="15%" valign="top">
						<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
							<tr><td class="font16 padding-bottom">售后服务</td></tr>
							<tr><td>退换货协议</td></tr>
							<tr><td>关于发票</td></tr>
							<tr><td>退换货流程</td></tr>
							<tr><td>退换货运费</td></tr>
                          
                        </table>
                    </td>
                    <td align="center" valign="top"><img src="images/red5.jpg"><br>
					<img src="images/line1.jpg"/></td>
                    <td width="15%" valign="top">
						<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
							<tr><td class="font16 padding-bottom">关于账号</td></tr>
							<tr><td>修改个人信息</td></tr>
							<tr><td>修改密码</td></tr>
							<tr><td>支付宝 网银支付</td></tr>
							<tr><td>找回密码</td></tr>
                          
                        </table>
                    </td>
                    <td align="center" valign="top"><img src="images/red6.jpg"><br>
					<img src="images/line1.jpg"/></td>
                    <td width="15%" valign="top">
						<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
							<tr><td class="font16 padding-bottom">优惠活动</td></tr>
							<tr><td>竞拍须知</td></tr>
							<tr><td>抢购须知</td></tr>
						
                        </table>
                    </td>
             
        </tr></table>
    </td>
</tr>
<tr>
	<td bgcolor="#efefef" align="center" class="padding-top">
		Copyright 2015-2020 Q- Walking
             	Fashion E&S漫步时尚广场（QST教育）版权所有<br/> 湖南娄底 湖南人文科技学院 
             阳光五栋 咨询热线：187-1185-7095<br/>
             <img src="images/foot_pic.jpg"></td>
         </tr>
     </tr>

</td>

</table>
</body>
</html>

本文标题:JavaScript_Homework3

文章作者:mao

发布时间:2018-04-01, 22:33:00

最后更新:2018-04-01, 22:39:57

原始链接:https://maojinkang.github.io/2018/04/01/JavaScript_Homework3/

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

文章目录
  1. 1. JavaScript作业三 CSS应用
  2. 2. 【任务4-1】使用CSS样式美化购物列表页面中的菜单导航栏
  3. 3. 【任务4-2】使用CSS样式美化购物列表页面中的商品展示区
  4. 4. 【任务5-1】使用CSS样式实现购物列表页面的整体布局
  5. 5. 【任务5-2】使用CSS样式实现购物列表页面的左侧导航栏部分