html网页制作期末大作业成品：基于HTML+CSS+JavaScript简洁汽车网站(7页)

• 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

💒CSS样式代码

@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, select{margin: 0;padding: 0;border: 0;}
table{ border-collapse:collapse;}
body{font-size:12px;color:#333; background:#e7e6e6;}
img,a{border:0; text-decoration:none;}
ol, ul {list-style: none; }
.clears{ clear:both;}
a{color:#333;}
a:hover{color:#F00;}

/*header*/
.heads{
	width:100%;
	height:40px;
	background:url(../images/headerBg.jpg) left top repeat-x;
	position:relative;
	}
.top{
	position:relative;
	width:85%;
	height:40px;
	margin:0 auto;
	}
.headerRight{
	position:absolute;
	right:0;top:9px;
	color:#fff;
	}

/*logo*/
.xlogo{
	padding:10px;
	height:97px;
	text-align:center;
	background:url(../images/logoBg.jpg) left top repeat-x;}
	


/*banner*/
/* slider
----------------------------------------------------------*/

.slide > * { position:relative;
    max-width: 100%;
}
.slider .slide-prev {
    cursor: pointer;
    height: 48px;
    width: 48px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -24px;
    background-color: rgba(255,255,255,0.8);
    padding: 0px;
}
.slider .slide-next {
    cursor: pointer;
    height: 48px;
    width: 48px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -24px;
    background-color: rgba(255,255,255,0.8);
    padding: 0px;
}
.slider .slide-next:hover, .slider .slide-prev:hover {
    background-color: rgba(255,255,255,0.9);
}
.slider .slide-next img, .slider .slide-prev img {
    position: relative;
    top: 0;
    left: 0;
    max-height: 100%;
    max-width: 100%;
}
.es-caption {
    position: absolute;
    bottom: 0;
    text-align: center;
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 14px;
    padding: 16px;
    margin: 10px;
    width: auto;
    left: 0;
    right: 0;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.3);
}
ul.es-pager {
    display: block;
    width: 100%;
    text-align: center;
    margin: 5px 0 0 0;
    padding: 0;
    line-height: 0px;
}
ul.es-pager li {
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 16px;
    width: 16px;
    /*background-image: url("../Images/pagericon.png");*/
    background-repeat: no-repeat;
    background-position: 0 -16px;
    cursor: pointer;
}
ul.es-pager li:hover, ul.es-pager li.act {
    background-position: 0 0;
}
ul.es-pager li.act {
    cursor: default;
}

/*hengfu*/
.removeHengfu{ display:none;}
.hengfu{width:85%;height:180px;margin:0 auto;margin-top:5px; overflow:hidden;}
.hengfuParBox{width:1140px; margin:0 auto;}
.hengfuPar{width:440px;padding:30px 0 0 30px;}
.hengfu h3,.removeHengfu h3{color:#fff;padding:0.8em 0; font-size:1.2em; font-weight:bold;}
.hengfu p,.removeHengfu p{padding:0.4em 0;line-height:25px;}
.hengfu .more{}
.hengfu .more a,.removeHengfu .more a{ display:block;height:20px;line-height:20px; background:url(../images/more.jpg) 0px center no-repeat;padding-left:25px;color:#fff;}
.hengfu .more a.zuojian{ background:none; background:url(../images/zuojian.jpg) 0px center no-repeat}
.hfBg1{ background:url(../images/hengfu1.jpg) center center no-repeat;color:#fff;}
.hfBg2{ background:url(../images/hengfu2.jpg) center center no-repeat;color:#fff;}
.hfBg2 .hengfuPar{float:right;}
.hfBg2 .hengfuPar{color:#000;}
.hfBg2 .hengfuPar h3{color:#185480;}
.hfBg2 .hengfuPar .more a{color:#000;}

.hfBg3{ background:url(../images/hengfu3.jpg) center center no-repeat;color:#fff;}
.hfBg3 .hengfuPar{color:#000;}
.hfBg3 .hengfuPar h3{color:#185480;}
.hfBg3 .hengfuPar .more a{color:#000;}

/*搜搜*/
.h4Title{width:85%;padding:0.5em 0;font-size:1.2em; font-weight:bold;color:#fff; background:#404040;margin:0 auto; text-indent:1em;margin-top:10px;}

/*selectBox*/
.h5Title{width:65px;height:21px; background:url(../images/h5Bg.jpg) left center no-repeat;line-height:21px;color:#fff; font-size:1em; font-weight:bold; text-align:center;}
.selectBox{width:85%;margin:0 auto;padding-top:10px; background:#ededed;}
.selectBox td{padding:5px 0;border-bottom:#D5D5D5 1px solid;} 
.sel1{width:75px;}
.selectBox td a{margin-left:5px;}
.sel2{line-height:20px;}

/*滚动*/
.scrolllist{width:85%;height:240px;margin:5px auto; padding:10px 0;}
.scrolllist .imglist_w{width:89%;height:240px;overflow:hidden;float:left;position:relative;/*必要元素*/margin-left:55px;}
.scrolllist a.abtn{display:block;height:239px;width:29px;overflow:hidden;}
.scrolllist a.aleft{float:left;position:relative;left:0;bottom:10px;}
.scrolllist a.agrayleft{cursor:default;background-position:2px 50%;}
.scrolllist a.aright{float:right;position:relative;right:0;z-index:10;bottom:10px;}
.scrolllist a.agrayright{cursor:default;background-position:-51px 50%;}

.scrolllist .imglist_w ul{width:20000px;position:absolute;left:0px;top:0px;}
.scrolllist .imglist_w li{width:244px;float:left;height:240px;margin-right:65px;}
.scrolllist .imglist_w li img{width:244px;height:154px;}
.scrolllist .imglist_w li a{color:#3366cc;text-decoration:none;float:left;}
.scrolllist .imglist_w li a:hover img{filter:alpha(opacity=86);-moz-opacity:0.86;opacity:0.86;}
.imglist h3{font-size:1.4em;color:#}
.imglist h3{color:#900; font-family:"微软雅黑";font-size:1.3em; font-weight:bold;line-height:30px;}
.imglist p{line-height:22px;}
.imglist .more{color:#610101; text-decoration:underline;}
.imglist p a{ display:inline;margin:0;padding:0; position:static; float:none; font-weight:400; font-size:1em;}
.imglist p a:hover{ background:none;color:#F00;}

/*footer*/
.footer{padding:20px 0;width:100%; background:#161012 url(../images/footbg.jpg) right top repeat-x;border-top:#000 5px solid;}
.footer p{line-height:25px;width:85%;margin:0 auto;color:#fff;}
.footer p a{color:#fff;padding:0 5px 0 5px;border-right:#FFF 1px solid;}
.footer p a:hover{color:#ccc; font-family:"宋体"}



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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185

六、🥇 如何让学习不再盲目

第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。

第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识

第三、学到了就要用到

有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.