1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>珠峰培训</title> 6 <!--清除默认样式--> 7 <link rel="stylesheet" href="css/reset.css" type="text/css"> 8 <link rel="stylesheet" href="css/index.css" type="text/css"> 9 </head> 10 <body> 11 <!--header 头部--> 12 <div class="main clearfix"> 13 <h1> 14 <a href="###"><img src="img/logo.png" alt=""></a> 15 </h1> 16 <div class="nav"> 17 <ul class="clearfix"> 18 <li><a href="">Node培训课程</a></li> 19 <li><a href="">HTML5培训课程</a></li> 20 <li><a href="">视频教程</a></li> 21 <li><a href="">课程文档</a></li> 22 <li class="noMargin"><a href="">联系我们</a></li> 23 </ul> 24 </div> 25 <div class="login"> 26 <div class="car"> 27 <span class="carShop"><i></i>购物车</span> 28 29 <!--隐藏的盒子--> 30 <div class="car-hidden clearfix"> 31 <h3>我的购物车 <span>已加入0门课程</span></h3> 32 <div class="car-cont"> 33 <p class="carBg"></p> 34 <p class="carEmpty">购物车里空空如也</p> 35 <p class="course"><a href="###">快去这里选购你中意的课程</a></p> 36 </div> 37 <div class="car-bot"> 38 <span class="order">我的订单中心</span> 39 <a href="###">去购物车</a> 40 </div> 41 </div> 42 43 44 </div> 45 <a href="###" class="link">登录</a> 46 <a href="###" class="link">注册</a> 47 </div> 48 49 </div> 50 51 <!--banner--> 52 <div class="banner main"> 53 <div class="banImg"> 54 <ul class="clearfix"> 55 <li> 56 <img src="img/banner.jpg" alt=""> 57 </li> 58 <li> 59 <img src="img/banner.jpg" alt=""> 60 </li> 61 <li> 62 <img src="img/banner.jpg" alt=""> 63 </li> 64 <li> 65 <img src="img/banner.jpg" alt=""> 66 </li> 67 </ul> 68 </div> 69 <div class="sidebar"> 70 <ul class="clearfix"> 71 <li> 72 <a href=""> 73 <span>JavaScript免费基础课</span> 74 <i>></i> 75 </a> 76 <div class="ban-hidden"> 77 <dl> 78 <dt>目录</dt> 79 <dd>1、基本语句</dd> 80 <dd>2、基本语句</dd> 81 <dd>3、基本语句</dd> 82 <dd>4、基本语句</dd> 83 <dd>5、基本语句</dd> 84 <dd>6、基本语句</dd> 85 <dd>7、基本语句</dd> 86 </dl> 87 </div> 88 </li> 89 <li> 90 <a href=""> 91 <span>JavaScript免费基础课</span> 92 <i>></i> 93 </a> 94 <div class="ban-hidden hidden2"> 95 <dl> 96 <dt>2、目录</dt> 97 <dd>1、基本语句</dd> 98 <dd>2、基本语句</dd> 99 <dd>3、基本语句</dd> 100 <dd>4、基本语句</dd> 101 <dd>5、基本语句</dd> 102 <dd>6、基本语句</dd> 103 <dd>7、基本语句</dd> 104 </dl> 105 </div> 106 </li> 107 <li> 108 <a href=""> 109 <span>JavaScript免费基础课</span> 110 <i>></i> 111 </a> 112 <div class="ban-hidden hidden3"> 113 隐藏的盒子 114 </div> 115 </li> 116 <li> 117 <a href=""> 118 <span>JavaScript免费基础课</span> 119 <i>></i> 120 </a> 121 <div class="ban-hidden"> 122 隐藏的盒子 123 </div> 124 </li> 125 <li> 126 <a href="" class="noBorder"> 127 <span>JavaScript免费基础课</span> 128 <i>></i> 129 </a> 130 <div class="ban-hidden"> 131 隐藏的盒子 132 </div> 133 </li> 134 </ul> 135 </div> 136 </div> 137 138 <!--实战推荐--> 139 <div class="actual main"> 140 <h3>实战推荐</h3> 141 <div class="actualInfo"> 142 <ul class="clearfix"> 143 <li> 144 <img src="img/icon_1.jpg" alt=""> 145 <div class="topInfo"> 146 <h3>Vue.js高仿饿了么外卖APP</h3> 147 <h3>2016最火前端框架</h3> 148 <p>vue.js 兼具 angular.js 和 react.js 149 的优点，并剔除它们的缺点</p> 150 </div> 151 152 <div class="botInfo clearfix"> 153 <span class="icon-text">￥198.0</span> 154 <span class="text">1911人在学</span> 155 </div> 156 </li> 157 <li> 158 <img src="img/icon_1.jpg" alt=""> 159 <div class="topInfo"> 160 <h3>Vue.js高仿饿了么外卖APP</h3> 161 <h3>2016最火前端框架</h3> 162 <p>vue.js 兼具 angular.js 和 react.js 163 的优点，并剔除它们的缺点</p> 164 </div> 165 <div class="botInfo"> 166 <span class="icon-text">￥198.0</span> 167 <span class="text">1911人在学</span> 168 </div> 169 </li> 170 <li> 171 <img src="img/icon_1.jpg" alt=""> 172 <div class="topInfo"> 173 <h3>Vue.js高仿饿了么外卖APP</h3> 174 <h3>2016最火前端框架</h3> 175 <p>vue.js 兼具 angular.js 和 react.js 176 的优点，并剔除它们的缺点</p> 177 </div> 178 <div class="botInfo"> 179 <span class="icon-text">￥198.0</span> 180 <span class="text">1911人在学</span> 181 </div> 182 </li> 183 <li class="noMargin"> 184 <img src="img/icon_1.jpg" alt=""> 185 <div class="topInfo"> 186 <h3>Vue.js高仿饿了么外卖APP</h3> 187 <h3>2016最火前端框架</h3> 188 <p>vue.js 兼具 angular.js 和 react.js 189 的优点，并剔除它们的缺点</p> 190 </div> 191 <div class="botInfo"> 192 <span class="icon-text">￥198.0</span> 193 <span class="text">1911人在学</span> 194 </div> 195 </li> 196 </ul> 197 </div> 198 </div> 199 <div class="actual main"> 200 <h3>实战推荐</h3> 201 <div class="actualInfo"> 202 <ul class="clearfix"> 203 <li> 204 <img src="img/icon_1.jpg" alt=""> 205 <div class="topInfo"> 206 <h3>Vue.js高仿饿了么外卖APP</h3> 207 <h3>2016最火前端框架</h3> 208 <p>vue.js 兼具 angular.js 和 react.js 209 的优点，并剔除它们的缺点</p> 210 </div> 211 212 <div class="botInfo clearfix"> 213 <span class="icon-text">￥198.0</span> 214 <span class="text">1911人在学</span> 215 </div> 216 </li> 217 <li> 218 <img src="img/icon_1.jpg" alt=""> 219 <div class="topInfo"> 220 <h3>Vue.js高仿饿了么外卖APP</h3> 221 <h3>2016最火前端框架</h3> 222 <p>vue.js 兼具 angular.js 和 react.js 223 的优点，并剔除它们的缺点</p> 224 </div> 225 <div class="botInfo"> 226 <span class="icon-text">￥198.0</span> 227 <span class="text">1911人在学</span> 228 </div> 229 </li> 230 <li> 231 <img src="img/icon_1.jpg" alt=""> 232 <div class="topInfo"> 233 <h3>Vue.js高仿饿了么外卖APP</h3> 234 <h3>2016最火前端框架</h3> 235 <p>vue.js 兼具 angular.js 和 react.js 236 的优点，并剔除它们的缺点</p> 237 </div> 238 <div class="botInfo"> 239 <span class="icon-text">￥198.0</span> 240 <span class="text">1911人在学</span> 241 </div> 242 </li> 243 <li class="noMargin"> 244 <img src="img/icon_1.jpg" alt=""> 245 <div class="topInfo"> 246 <h3>Vue.js高仿饿了么外卖APP</h3> 247 <h3>2016最火前端框架</h3> 248 <p>vue.js 兼具 angular.js 和 react.js 249 的优点，并剔除它们的缺点</p> 250 </div> 251 <div class="botInfo"> 252 <span class="icon-text">￥198.0</span> 253 <span class="text">1911人在学</span> 254 </div> 255 </li> 256 </ul> 257 </div> 258 </div> 259 260 <!--footer 尾部--> 261 <div class="footer-top"> 262 <div class="main clearfix"><!--main 版心--> 263 <div class="foot-info"> 264 <dl> 265 <dt>关于我们</dt> 266 <dd>珠峰培训官方网站</dd> 267 <dd>珠峰培训官网</dd> 268 <dd>联系我们</dd> 269 </dl> 270 <dl> 271 <dt>关于我们</dt> 272 <dd>珠峰培训官方网站</dd> 273 <dd>珠峰培训官网</dd> 274 <dd>联系我们</dd> 275 </dl> 276 <dl> 277 <dt>关于我们</dt> 278 <dd>珠峰培训官方网站</dd> 279 <dd>珠峰培训官网</dd> 280 <dd>联系我们</dd> 281 </dl> 282 <dl> 283 <dt>关于我们</dt> 284 <dd>珠峰培训官方网站</dd> 285 <dd>珠峰培训官网</dd> 286 <dd>联系我们</dd> 287 </dl> 288 <dl class="noMargin"> 289 <dt>关于我们</dt> 290 <dd>珠峰培训官方网站</dd> 291 <dd>珠峰培训官网</dd> 292 <dd>联系我们</dd> 293 </dl> 294 </div> 295 <div class="foot-zf"> 296 <div class="foot-logo"></div> 297 <div class="zf-bot"> 298 <ul> 299 <li> 300 <span class="icon"></span> 301 <div class="zf-hidden"> 302 <i></i> 303 <img src="img/erweima.jpg" alt=""> 304 </div> 305 </li> 306 <li> 307 <span class="icon weixin"></span> 308 <div class="zf-hidden"> 309 <i></i> 310 <img src="img/erweima.jpg" alt=""> 311 </div> 312 </li> 313 <li> 314 <span class="icon iphone"></span> 315 <div class="zf-hidden"> 316 <i></i> 317 <img src="img/erweima.jpg" alt=""> 318 </div> 319 </li> 320 <li class="noMargin"> 321 <span class="icon anzhuo"></span> 322 <div class="zf-hidden"> 323 <i></i> 324 <img src="img/erweima.jpg" alt=""> 325 </div> 326 </li> 327 </ul> 328 </div> 329 </div> 330 </div> 331 </div> 332 333 334 </body> 335 </html>
1 .main {
2 margin: 0 auto; /*上下 左右*/
3 width: 1204px;
4 }
5
6 .main h1 {
7 float: left;
8 width: 176px;
9 margin: 16px 85px 16px 0; /*外边距：上 右 下 左*/
10 }
11
12 .main h1 a {
13 display: block;
14 }
15
16 .main h1 a img {
17 width: 100%;
18 }
19
20 .main .nav {
21 float: left;
22 }
23
24 .main .nav li {
25 float: left;
26 height: 84px;
27 line-height: 84px;
28 margin-right: 60px;
29 }
30
31 .main .nav li.noMargin {
32 margin-right: 0;
33 }
34
35 .main .nav li a {
36 color: #2a2a2a;
37 font-size: 14px;
38 }
39
40 .main .nav li a:hover {
41 color: #2b7dd1;
42 }
43
44 .main .login {
45 float: right;
46 }
47
48 .main .car {
49 position: relative; /*相对定位 作用：给绝对定位当做参照物*/
50 /*display: inline-block;*/
51 float: left;
52 line-height: 84px;
53 margin-right: 38px;
54 font-size: 14px;
55 color: #666767;
56 }
57
58 .main .car .carShop {
59 cursor: pointer;
60 }
61
62 .main .car .carShop i {
63 display: inline-block;
64 width: 24px;
65 height: 22px;
66 background: url("../img/icon.png") no-repeat;
67 vertical-align: middle;
68 margin-right: 7px;
69 }
70
71 .main .login .car:hover .carShop {
72 color: #2b7dd1;
73 }
74
75 .main .login .car:hover i {
76 background-position: -50px 0;
77 }
78
79 .main .login .car:hover .car-hidden {
80 display: block;
81 }
82
83 .main .link {
84 line-height: 84px;
85 font-size: 14px;
86 color: #666767;
87 padding-right: 30px;
88 }
89
90 .main .login .car-hidden {
91 display: none;
92 position: absolute; /*绝对定位*/
93 left: -149px;
94 top: 63px;
95 width: 323px;
96 /*border:1px solid red;*/
97 background: #fff;
98 box-shadow: 2px 2px 6px rgba(2, 2, 2, 0.34);
99 padding: 0 14px 0 13px; /*内边距:上 右 下 左*/
100 }
101
102 .login .car-hidden h3 {
103 font-size: 16px;
104 color: #333333;
105 font-weight: normal; /*去掉加粗*/
106 border-bottom: 1px solid #e1e1e1;
107 line-height: 52px;
108 }
109
110 .login .car-hidden h3 span {
111 float: right;
112 font-size: 12px;
113 color: #7d7d7d;
114 }
115
116 .login .car-hidden .car-cont {
117 width: 323px;
118 }
119
120 .login .car-hidden .car-cont .carBg {
121 margin: 59px auto 2px;
122 width: 68px;
123 height: 68px;
124 background: #9e9e9e url("../img/icon.png") no-repeat;
125 background-position: 14px -24px;
126 border-radius: 50%;
127 }
128
129 .login .car-hidden .car-cont .carEmpty {
130 margin: 0 auto;
131 width: 190px;
132 line-height: 60px;
133 color: #414141;
134 text-align: center;
135 font-size: 14px;
136 border-bottom: 1px solid #e1e1e1;
137 }
138
139 .login .car-hidden .car-cont .course {
140 text-align: center;
141 line-height: 74px;
142 }
143
144 .login .car-hidden .car-cont .course a {
145 font-size: 12px;
146 color: #4e91d7;
147 }
148
149 .login .car-hidden .car-bot {
150 margin-top: 25px;
151 border-top: 1px solid #e1e1e1;
152 line-height: 68px;
153 }
154
155 .login .car-hidden .car-bot .order {
156 font-size: 12px;
157 color: #7d7d7d;
158 }
159
160 .login .car-hidden .car-bot a {
161 float: right;
162 width: 79px;
163 height: 39px;
164 line-height: 39px;
165 text-align: center;
166 font-size: 12px;
167 background-color: #4e91d7;
168 border-radius: 5px;
169 color: #fff;
170 margin-top: 15px;
171 }
172
173 /*footer 尾部*/
174 .footer-top {
175 width: 100%;
176 background-color: #2e2e2e;
177 padding-bottom: 60px;
178 }
179
180 .footer-top .foot-info {
181 float: left;
182 }
183
184 .footer-top .foot-info dl {
185 float: left;
186 margin-top: 47px;
187 margin-right: 70px;
188 }
189
190 .footer-top .foot-info dl.noMargin, .footer-top .foot-zf .foot-icon li.noMargin {
191 margin-right: 0;
192 }
193
194 .footer-top .foot-info dl dt {
195 font-size: 16px;
196 color: #fefdfd;
197 line-height: 30px;
198 margin-bottom: 15px;
199 text-shadow: 3px 3px 3px rgba(2, 2, 2, .75);
200 }
201
202 .footer-top .foot-info dl dd {
203 font-size: 14px;
204 color: #a3a3a3;
205 line-height: 30px;
206 text-shadow: 3px 3px 3px rgba(2, 2, 2, .75);
207 }
208
209 .footer-top .foot-zf {
210 float: right;
211 margin-top: 63px;
212 }
213
214 .footer-top .foot-zf .foot-logo {
215 width: 199px;
216 height: 61px;
217 background: url("../img/icon_foot.png") no-repeat;
218 background-position: 0 -69px;
219 }
220
221 .footer-top .foot-zf .zf-bot {
222 margin-top: 17px;
223 }
224
225 .footer-top .foot-zf .zf-bot li {
226 position: relative;
227 float: left;
228 margin-right: 17px;
229 cursor: pointer;
230 }
231
232 .footer-top .foot-zf .zf-bot li span {
233 display: inline-block;
234 }
235
236 .footer-top .foot-zf .zf-bot li .icon {
237 width: 46px;
238 height: 46px;
239 background: url("../img/icon_foot.png") no-repeat;
240 }
241
242 .footer-top .foot-zf .zf-bot li span.weixin {
243 background-position: -74px 0;
244 }
245
246 .footer-top .foot-zf .zf-bot li span.iphone {
247 background-position: -158px 0;
248 }
249
250 .footer-top .foot-zf .zf-bot li span.anzhuo {
251 background-position: -237px 0;
252 }
253
254 .footer-top .foot-zf .zf-bot li:hover .zf-hidden {
255 display: block;
256 }
257
258 .footer-top .zf-hidden {
259 position: absolute;
260 left: -71px;
261 top: -208px;
262 display: none;
263 }
264
265 .footer-top .zf-hidden i {
266 position: absolute;
267 left: 79px;
268 top: 185px;
269 display: inline-block;
270 width: 23px;
271 height: 15px;
272 background: url("../img/icon_foot.png") no-repeat;
273 background-position: -260px -115px;
274 }
275
276 /*banner 广告位*/
277 .banner {
278 position: relative;
279 width: 1204px;
280 height: 360px;
281 overflow: hidden;
282 }
283
284 .banner .banImg {
285 width: 4816px;
286 }
287
288 .banner .banImg li {
289 float: left;
290 width: 1204px;
291 }
292
293 .banner .sidebar {
294 position: absolute;
295 left: 0;
296 top: 0;
297 width: 240px;
298 height: 360px;
299 background: rgba(0, 0, 0, .25);
300 }
301
302 .banner .sidebar li {
303 float: left;
304 width: 240px;
305 }
306
307 .banner .sidebar li a.noBorder {
308 border: none;
309 }
310
311 .banner .sidebar li a {
312 margin: 0 auto;
313 display: block;
314 width: 190px;
315 height: 71px;
316 line-height: 71px;
317 border-bottom: 1px solid #82b1cd;
318 }
319
320 .banner .sidebar li a span {
321 font-size: 14px;
322 color: #fdfdfe;
323 padding-left: 11px;
324 }
325
326 .banner .sidebar li a i {
327 float: right;
328 color: #fdfdfe;
329 font-style: normal; /*去掉斜体*/
330 padding-right: 8px;
331 font-size: 18px;
332 }
333
334 .banner .sidebar li:hover {
335 background: rgba(0, 0, 0, 0.4);
336 }
337
338 .banner .sidebar li:hover .ban-hidden {
339 display: block;
340 }
341
342 .banner .sidebar .ban-hidden {
343 display: none;
344 position: absolute;
345 left: 240px;
346 top: 0;
347 width: 573px;
348 height: 360px;
349 background: url("../img/bg1.jpg") no-repeat;
350 }
351
352 .banner .sidebar .ban-hidden dl {
353 margin: 32px 0 0 35px;
354 }
355
356 .banner .sidebar .ban-hidden dl dt {
357 font-size: 16px;
358 color: #0b0b0b;
359 margin-bottom: 7px;
360 }
361
362 .banner .sidebar .ban-hidden dl dd {
363 margin-top: 20px;
364 font-size: 14px;
365 color: #4a4b4b;
366 }
367
368 .banner .sidebar .hidden2 {
369 background: url("../img/bg2.jpg") no-repeat;
370 }
371
372 .banner .sidebar .hidden3 {
373 background: url("../img/bg3.jpg") no-repeat;
374 }
375
376 /*实战推荐*/
377 .actual{
378 margin-top:39px;
379 }
380 .actual h3{
381 font-weight: normal;
382 font-size: 16px;
383 color: #2d2d2d;
384 line-height: 14px;
385 }
386 .actual .actualInfo{
387 margin-top:20px;
388 }
389 .actual .actualInfo li{
390 position: relative;
391 float: left;
392 width:251px;
393 margin-right:65px;
394 height: 184px;
395 cursor: pointer;
396 }
397 .actual .actualInfo li.noMargin{
398 margin-right:0;
399 }
400 .actual .actualInfo li .topInfo{
401 position: absolute;
402 left:0;
403 bottom:0;
404 width:221px;
405 padding:15px;
406 background: url("../img/icon_bg.png") no-repeat;
407 transition: all 0.3s;
408 }
409 .actual .actualInfo li .topInfo h3{
410 color: #1e1e1e;
411 font-size: 14px;
412 line-height: 14px;
413 margin-top:8px;
414 }
415 .actual .actualInfo li .topInfo p{
416 color: #9e9d9d;
417 font-size: 12px;
418 line-height: 14px;
419 padding-top:10px;
420 }
421 .actual .actualInfo .botInfo{
422 position: absolute;
423 left:0;
424 bottom: 0;
425 width:221px;
426 height: 44px;
427 line-height: 44px;
428 background: #fff;
429 padding:0 15px;
430 }
431 .actual .actualInfo .botInfo .icon-text{
432 float: left;
433 font-size: 12px;
434 color: #c71b1b;
435 }
436 .actual .actualInfo .botInfo .text{
437 float: right;
438 font-size: 12px;
439 color: #868484;
440 }
441 .actual .actualInfo li:hover .topInfo{
442 bottom:40px;
443 }
时间： 2024-10-18 00:11:00