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 }
浙公网安备 33010602011771号