JavaScript_Homework3

JavaScript作业三 CSS应用

最终效果

这里写图片描述

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

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
/*头部*/
.top_line{
border-bottom:1px solid #ccc;
font-size:12px;
font-family:"宋体";
line-height:30px
}

.nav_font16{
font-size:16px;
font-weight:700;
color:#fff
}

.orange{
font-weight:700;
color:#f60
}

.nav_active{
background:#b12121;
padding:5px 0;
height:30px
}

a.white{
color:#fff;
text-decoration:none
}

a.white:hover{
color:#ff0;
text-decoration:none
}

.shopcart{
background:url(../images/shoppingcart.png) no-repeat center;
width:16px;
height:16px;
display:inline-block
}

【任务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
body{
font-size:12px;
font-family:microsoft yahei;
margin:0;color:#000
}

a{
color:#000;
text-decoration:none
}

a:hover{
color:#ce2626;
text-decoration:none
}

img{
border:none
}

.font14{
font-size:14px;
font-weight:700
}
.font16{
font-size:16px;
font-weight:700
}
.padding-top{
padding-top:8px
}

【任务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
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
@charset "utf-8";
body{
font-size:12px;
font-family:microsoft yahei;
margin:0;color:#000
}
a{
color:#000;
text-decoration:none
}
a:hover{
color:#ce2626;
text-decoration:none
}
img{
border:none
}
.font14{
font-size:14px;
font-weight:700
}
.font16{
font-size:16px;
font-weight:700
}
.padding-top{
padding-top:8px
}
/*头部*/
.top_line{
border-bottom:1px solid #ccc;
font-size:12px;
font-family:"宋体";
line-height:30px
}
.nav_font16{
font-size:16px;
font-weight:700;
color:#fff
}
.orange{
font-weight:700;
color:#f60
}
.nav_active{
background:#b12121;
padding:5px 0;
height:30px
}
a.white{
color:#fff;
text-decoration:none
}
a.white:hover{
color:#ff0;
text-decoration:none
}
.shopcart{
background:url(../images/shoppingcart.png) no-repeat center;
width:16px;
height:16px;
display:inline-block
}
/*左侧导航*/
.table1 tr th{
height:33px;
background:#e5e4e1;
font-size:15px;
text-indent:10px;
text-align:left
}
.table1 tr td{
height:33px;
background:#fafafa;
font-size:14px;
text-indent:10px;
text-align:left
}
.red_dot{
font-size:25px;
margin-right:10px;
background:url(../images/red_dot.gif) no-repeat;
width:8px;height:8px;
display:inline-block
}
/*右侧公告*/
.notice_title{
font-size:16px;
text-indent:20px;
text-align:left
}
.gray_dot{
color:#ccc;
font-size:25px;
margin-right:10px;
background:url(../images/gray_dot.gif) no-repeat;
width:8px;
height:8px;
display:inline-block
}
.notice_text{display:block;
width:230px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
text-align:left
}
/*foot*/
.foot_bg{
line-height:20px;
padding-top:10px;
font-size:12px
}
.padding-bottom{
padding-bottom:10px
}
.foot_line{
border-bottom:1px solid #ccc;
font-size:12px;
margin-top:10px
}

【任务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

/*左侧导航*/
.table1 tr th{
height:33px;
background:#e5e4e1;
font-size:15px;
text-indent:10px;
text-align:left
}

.table1 tr td{
height:33px;
background:#fafafa;
font-size:14px;
text-indent:10px;
text-align:left
}

.red_dot{
font-size:25px;
margin-right:10px;
background:url(../images/red_dot.gif) no-repeat;
width:8px;height:8px;
display:inline-block
}
---------------- The End ----------------
May丶乘剑 wechat
欢迎扫描二维码关注我的微信公众号~~
0%