关于完成“博雅首页”作业后的感想

　　经过一周多的时间，我们完成了HTML和CSS的学习，铭哥给我们留了一道作业，就是完成一个博雅首页的网页，铭哥说让我们用我们现在所学到的所有知识，尽自己的努力去完成他，经过3天的时间，通过与同学们的讨论和查阅资料终于完成了自己的第一张网页，看到自己努力的成果还是感到非常欣慰，也鉴定了自己继续学习的信念。

　　下面就是我完成过程的完整代码，大概我自己也看不懂了：D，大神们多指点指点。

HTML

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>博雅首页</title>
  6     <link rel="stylesheet" href="./css/css.css">
  7 </head>
  8 <body>
  9    <div class="headerBox">
 10     <div class="headerContent w">
 11         <div class="logoBox fl">
 12             <h1><a href="#">博雅首页</a></h1>
 13         </div>
 14         <div class="navBox fl">
 15             <ul class="fl navContent">
 16                 <li>
 17                     <a href="">首页</a>
 18                 </li>
 19                 <li>
 20                     <a href="">博雅游戏</a>
 21                 </li>
 22                 <li>
 23                     <a href="">博雅新闻</a>
 24                 </li>
 25                 <li>
 26                     <a href="">关于我们</a>
 27                 </li>
 28                 <li>
 29                     <a href="">客服中心</a>
 30                 </li>
 31                 <li>
 32                     <a href="">投资者关系</a>
 33                 </li>
 34             </ul>
 35         </div>
 36         <div class="goHome fl">
 37             <div class="joinOur fl">
 38                 <a href="#">加入我们</a>
 39             </div>
 40         </div>
 41         <div class="changeLang">
 42             <span>
 43                 <a href="#" class="china">中文</a>
 44                 <a href="#">EN</a>
 45             </span>
 46         </div>
 47     </div>
 48    </div>
 49    <div class="bodybox">
 50         <div class="topcenter">
 51             <div class="littlebox">
 52                 <dl>
 53                     <dt class="game">在线游戏</dt>
 54                     <dd>
 55                         <a href="#" class="part1"></a>
 56                         <a href="#" class="part2"></a>
 57                         <a href="#" class="part3"></a>
 58                     </dd>
 59                 </dl>
 60             </div>
 61             <div class="rightbox">
 62                 <p>风靡国内外的斗地主游戏，超低流量，玩法多样，居家旅行必备良品</p>
 63                 <dl>
 64                     <dt>下载游戏</dt>
 65                     <dd>
 66                         <a href="#" class="iPad">iPad</a>
 67                         <a href="#" class="iPhone">iPhone</a>
 68                         <a href="#" class="Adroid">Adroid</a>
 69                         <a href="#" class="TV">TV</a>
 70                         <span class="ewm">
 71                             <img src="./image/dza60080.png">
 72                         </span>
 73                     </dd>
 74                 </dl>
 75             </div>
 76         </div> 
 77         <div class="hd">
 78             <ul>
 79                 <li class="on">1</li>
 80                 <li class="off">2</li>
 81             </ul>
 82         </div>   
 83    </div>
 84    <div class="footerbox">
 85        <div class="middlecenter">
 86             <div class="box2">
 87                <ul>
 88                    <li class="box1">
 89                        <a href="#">
 90                             <img src="./image/byamaj.jpg">
 91                             <h5>麻将全集</h5>
 92                             <p><span>MAHJONG GAMES</span></p>
 93                        </a>
 94                    </li>
 95                    <li class="box1">
 96                        <a href="#">
 97                             <img src="./image/byqpai2.jpg">
 98                             <h5>博雅棋牌</h5>
 99                             <p><span>BOYAA CHESS</span></p>
100                        </a>
101                    </li>
102                    <li class="box1">
103                        <a href="#">
104                             <img src="./image/gamepic2.jpg">
105                             <h5>四川麻将</h5>
106                             <p><span>SICHUAN MAHJONG</span></p>
107                        </a>
108                    </li>
109                    <li>
110                        <a href="#">
111                             <img src="./image/gamepic6.jpg">
112                             <h5>四人斗地主</h5>
113                             <p><span>FOUR LANDLORDS</span></p>
114                        </a>
115                    </li>
116                </ul>
117            </div>
118            <div class="box3">
119                <ul>
120                    <li class="one">1</li>
121                    <li class="two">2</li>
122                </ul>
123            </div>
124        </div>
125        <div class="footercenter">
126             <div class="news">
127                 <div class="title-1">
128                     <span class="more-1">
129                         <a href="#">MORE<sup>+</sup></a>
130                     </span>
131                 </div>
132                 <div class="newscon">
133                     <ul>
134                         <li><span class="time">06 / 28</span><a href="">回馈玩家，回报社会——记博雅互动印尼开斋节系列活动</a></li>
135                         <li><span class="time">06 / 20</span><a href="">首个越南卫星赛成功落幕，2017 BPT即将开启</a></li>
136                         <li><span class="time">06 / 01</span><a href="">博雅互动赞助台湾校园德扑大赛 普及绿色竞技文化</a></li>
137                         <li><span class="time">05 / 17</span><a href="">博雅互动公布2017年第一季度业绩，纯利增6.2%</a></li>
138                     </ul>
139                 </div>
140             </div>
141             <div class="jobs">
142                 <div class="title-1">
143                     <span class="more-2">
144                         <a href="#">MORE<sup>+</sup></a>
145                     </span>
146                     <div class="text1">
147                         <h2>专场招聘</h2>
148                         <p>BOYAA JOBS</p>
149                     </div>
150                 </div>
151                 <div class="station">
152                     <h3>专职招聘岗位 :</h3>
153                     <ul>
154                         <li><a href="">PHP开发工程师</a></li>
155                         <li><a href="">C++开发工程师</a></li>
156                         <li><a href="">WEb前端开发工程师</a></li>
157                         <li><a href="">大数据开发工程师</a></li>
158                     </ul>
159                 </div>
160             </div>
161        </div>
162    </div>
163    <div class="yejiao">
164        <div class="nav">
165            <p>
166                <span class="C1">
167                    <a href="">网站地图</a> |
168                    <a href="">免责声明</a> |
169                    <a href="">监督举报</a>
170                </span>
171            </p>
172            <p class="copy">
173               Copyright © 2004 - 2019 博雅互动(Boyaa Interactive)
174               <a href="">粤ICP备05062536号</a> 
175            </p>
176            <p class="xukezheng">
177                <span>网络文化经营许可证：粤网文[2015]1991-405号 | 互联网出版许可证：新出网证（粤）字062号 | 增值电信业务经营许可证：粤B2-20110513 
178                <a href="">
179                    <img src="./image/govIcon (1).gif" width="36" height="50" style="vertical-align: middle">
180                </a>
181                </span>
182            </p>
183        </div>
184    </div>
185 </body>
186 </html>

  1 /*
  2  这是初始化样式
  3  */
  4 *{
  5     margin: 0;
  6     padding: 0;
  7 }
  8 ul{
  9     list-style: none;
 10 }
 11 a{
 12     text-decoration: none;
 13 }
 14 h1{
 15     font-weight: normal;
 16 }
 17 .w{
 18     width: 1000px;
 19     margin: 0 auto;
 20 }
 21 .fl{
 22     float: left;
 23 }
 24 .fr{
 25     float: right;
 26 }
 27 .clear{
 28     clear: both;
 29 }
 30 /*
 31     header头部样式
 32  */
 33 .headerBox{
 34     /*margin: 0 auto;*/
 35     height: 58px;
 36     background-color: #191d3a;
 37 }
 38 /*.headerContent{
 39     margin: 0 auto;
 40 }*/
 41 .headerContent>.logoBox{
 42     width: 225px;
 43     height: 58px;
 44     background: url("../image/logo.png") no-repeat center center;
 45     text-indent: -99999px;
 46 }
 47 .headerContent>.navBox{
 48     height: 58px;
 49 }
 50 .headerContent>.navBox>.navContent>li{
 51     width: 87px;
 52     text-align: center;
 53     line-height: 58px;
 54     float: left;
 55     font-size: 13px;
 56     border-left: 1px solid rgb(37, 41, 71);
 57     border-right: 1px solid rgb(37, 41, 71);
 58 }
 59 .headerContent>.navBox>.navContent>li>a{
 60     color:#818496;
 61     display: block;
 62 }
 63 .headerContent>.navBox>.navContent>li>a:hover{
 64     color: white;
 65 }
 66 
 67 .headerContent>.logoBox>h1{
 68     width: 100%;
 69     height: 58px;
 70     /*text-indent: -99999px;*/
 71 
 72 }
 73 .headerContent>.logoBox>h1>a{
 74     height: 58px;
 75     display: block;
 76 }
 77 
 78 .joinOur a{
 79     display: inline-block;
 80     width: 100px;
 81     height: 35px;
 82     background: #38b774;
 83     /*display: block;*/
 84     color: #fff;
 85     text-align: center;
 86     line-height: 35px;
 87     margin-top:10px;
 88     margin-left: 10px;
 89     border-radius: 3px;
 90     font-size: 13px;
 91 }
 92 .joinOur a:hover{
 93     background: #2ba364;
 94 }
 95 .changeLang{
 96     /*color: #444866;*/
 97     float: right;
 98     line-height: 58px;
 99     font-size: 14px;
100 }
101 .china{
102     color: #38b774;
103 }
104 a.china+a{
105     color: #444866;
106 }
107 /*
108 header  结束
109  */
110 /*主体开始*/
111 .topcenter{
112     position: relative;
113     height: 355px;
114     width: 1000px;
115     margin: 0 auto;
116     /*border: 1px solid orange;*/
117 }
118         .littlebox{
119             position: absolute;
120             left: 850px;
121             top: 80px;
122             /*margin: 0 auto;*/
123             width: 115px;
124             /*background: red;*/
125             /*position: absolute;*/
126 
127         }
128         .littlebox dt{
129             padding-left: 15px;
130             line-height: 32px;
131             width: 100px;
132             height: 37px;
133             background:url("../image/online.png") no-repeat;
134             /*border: 1px solid red;*/
135         }
136         .littlebox dd{
137             display: none;
138             width: 102px;
139             background-color: #fff;
140             padding: 2px 0 8px 13px;
141             border-bottom-left-radius: 10px;
142             border-bottom-right-radius: 10px;
143             /*position: relative;
144             top: -12px;*/
145         }
146         .part1{
147             /*margin-top: 10px;*/
148             display: inline-block;
149             width: 24px;
150             height: 24px;
151             margin-right: 4px;
152             background: url(../image/online.png) no-repeat 0 -48px;
153         }
154         .part2{
155             /*margin-top: 10px;*/
156                 display: inline-block;
157             width: 24px;
158             height: 24px;
159             margin-right: 4px;
160             background: url(../image/online.png) no-repeat -25px -48px;
161         }
162         .part3{
163             /*margin-top: 10px;*/
164                 display: inline-block;
165             width: 24px;
166             height: 24px;
167             margin-right: 4px;
168             background: url(../image/online.png) no-repeat -50px -48px;
169         }
170         .littlebox dl:hover>dt{
171             background: url(../image/online.png) no-repeat -119px 0;
172             /*background: red;*/
173         }
174         .littlebox dl:hover>dd{
175             display: block;
176         }
177         .littlebox>dl>dd:hover{
178             display: block;
179         }
180 .bodybox{
181     position: relative;
182     /*margin:0 auto;*/
183     height: 459px;
184     background: url("../image/probanner4.jpg") no-repeat;
185     background-position: top center;
186     background-repeat: repeat-x;
187     /*width: 100%;*/
188 }
189 .rightbox{
190     width: 460px;
191     height: 197px;
192     /*border: 1px solid green;*/
193     position: absolute;
194     left: 540px;
195     top:158px;
196 }
197 .rightbox p{
198     font-size: 14px;
199     padding-right: 20px;
200     color: #191d3a;
201     line-height: 30px;
202 }
203 .rightbox dt{
204     color: #191d3a;
205     font-size: 18px;
206     font-weight: bold;
207     padding-left: 30px;
208     height: 35px;
209     line-height: 35px;
210     background: url("../image/download.png") no-repeat 5px 10px;
211     margin-bottom: 8px;
212 }
213  a.iPad{
214     float: left;
215     width: 83px;
216     height: 35px;
217     color: #444866;
218     text-align: center;
219     background: url("../image/iPad.png") no-repeat 28px -180px;
220     background-color:#F2F7FD;
221     margin-right: 1px;
222     font-size: 14px;
223     padding-top: 71px;
224     border-top-left-radius: 5px;
225     border-bottom-left-radius: 5px;
226 }
227 a.iPhone{
228     float: left;
229     width: 83px;
230     height: 35px;
231     color: #444866;
232     text-align: center;
233     background: url("../image/iPad.png") no-repeat 25px 20px;
234     background-color:#F2F7FD;
235     margin-right: 1px;
236     font-size: 14px;
237     padding-top: 71px;
238 }
239 a.Adroid{
240     float: left;
241     width: 83px;
242     height: 35px;
243     color: #444866;
244     text-align: center;
245     background: url("../image/iPad.png") no-repeat 21px -77px;
246     background-color:#F2F7F5;
247     margin-right: 1px;
248     font-size: 14px;
249     padding-top: 71px;
250 }
251 a.TV{
252     float: left;
253     width: 83px;
254     height: 35px;
255     color: #444866;
256     text-align: center;
257     background: url("../image/iPad.png") no-repeat 23px -475px;
258     background-color:#F2F7F5;
259     margin-right: 1px;
260     font-size: 14px;
261     padding-top: 71px;
262 }
263 .ewm{
264     float: left;
265     background-color: #F2F7F5;
266     width: 111px;
267     height: 93px;
268     text-align: center;
269     padding-top: 13px;
270     border-top-right-radius: 5px;
271     border-bottom-right-radius: 5px;
272 }
273 dd a:hover{
274     background-color: #fff;
275 }
276 .hd ul{
277     width: 130px;
278     position: absolute;
279     left: 50%;
280     bottom: 20px;
281     margin-left: -20px;
282 }
283 .on{
284     float: left;
285     width: 12px;
286     height: 12px;
287     background-color: #fff;
288     margin-right: 15px;
289     overflow: hidden;
290     text-indent: -9999px;
291     border-radius: 5px;
292 }
293 .off{
294     float: left;
295     width: 12px;
296     height: 12px;
297     background-color: #d2d7d5;
298     margin-right: 15px;
299     overflow: hidden;
300     text-indent: -9999px;
301     border-radius: 5px;
302 }
303 .footerbox{
304     height: 643px;
305     padding-bottom: 57px;
306     /*border: 1px solid orange;*/
307 }
308 .middlecenter{
309     margin: 0 auto;
310     width: 1000px;
311     height: 248px;
312     padding-top: 50px;
313     margin-bottom: 35px;
314     /*border: 1px solid orange;*/
315 }
316 .middlecenter ul li{
317     float: left;
318     width: 217px;
319     height: 200px;
320     /*border: 1px solid green;*/
321 }
322 .box1{
323     margin-right: 43px;
324 }
325 .middlecenter li img{
326     width: 218px;
327     height: 128px;
328 }
329 .middlecenter li h5{
330     font-size: 16px;
331     text-align: center;
332     color: #444866;
333     padding:5px 0 10px 0;
334 }
335 .middlecenter li p{
336     text-align: center;
337     padding-bottom: 10px;
338 }
339 .middlecenter li p span{
340     display: inline-block;
341     color: #38b774;
342     padding-right: 11px;
343 }
344 .middlecenter ul li a{
345     display: block;
346     width: 218px;
347     height: 200px;
348 }
349 .middlecenter ul li a:hover{
350     background: #2FBB72;
351 }
352 .middlecenter ul li a:hover h5{
353     color: #fff;
354 }
355 .middlecenter ul li a:hover span{
356     color: #fff;
357 }
358 .box2{
359     height: 200px;
360     margin-bottom: 29px;
361 }
362 .box3{
363     border-top: 1px solid #dbe1e7;
364     clear: both;
365     height: 18px;
366     margin-top: 30px;
367 }
368 .box3 ul{
369     width: 50px;
370     padding-left: 17px;
371     height: 11px;
372     margin:-6px auto 0;
373     background-color: #fff;
374 }
375 .box3 ul li{
376     float: left;
377     width: 11px;
378     height: 11px;
379     margin-right: 12px;
380     overflow: hidden;
381     border-radius: 6px;
382     text-indent: -9999px;
383 }
384 .one{
385     background-color: #2fbc71;
386 }
387 .two{
388     background-color: #b5c0cb;
389 }
390 .footercenter{
391     width: 1000px;
392     /*border: 1px solid #ccc;*/
393     margin: 0 auto;
394 }
395 .news{
396     width: 50%;
397     float: left;
398     background: url(../image/bynewsbg.jpg) no-repeat 0 -10px;
399 }
400 .jobs{
401     float: right;
402     background: url(../image/byhrbg3.jpg) no-repeat;
403 }
404 .title-1{
405     width: 284px;
406     height: 70px;
407     padding-top: 40px;
408     padding-right: 216px;
409 }
410 .more-1{
411     float: right;
412 }
413 .more-1>a{
414     display: inline-block;
415     width: 64px;
416     text-align: center;
417     height: 26px;
418     border-radius: 5px;
419     color: #30bd72;
420     border:1px solid #33b972;
421 }
422 .more-1 a:hover{
423     background-color: #33b972;
424     color: #fff;
425 }
426 .newscon ul{
427     padding: 0 20px;
428 }
429 .newscon ul li{
430     border-bottom: 1px solid #dbe1e7;
431     padding: 10px 0;
432     font-size: 15px;
433     line-height: 29px;
434 }
435 .time{
436     float: right;
437     margin-left: 18px;
438     color: #afbecf;
439     font-size: 12px;
440 }
441 .newscon ul li a{
442     display: block;
443     color: #444866;
444 }
445 .newscon ul li a:hover{
446     color: #33b972;
447 }
448 .text1{
449     padding-left: 80px;
450     float: left;
451     color: #fff;
452 }
453 .text1 h2{
454     font-size: 28px;
455     display: block;
456     line-height: 34px;
457     font-weight: 700;
458 }
459 .text1 p{
460     font-size: 12px;
461 }
462 
463 .more-2{
464     float: right;
465 }
466 .more-2>a{
467     display: inline-block;
468     width: 64px;
469     text-align: center;
470     height: 26px;
471     border-radius: 5px;
472     color: #fff;
473     border:1px solid #fff;
474 }
475 .more-2 a:hover{
476     background-color: #fff;
477     color: #33b972;
478 }
479 .station{
480     padding-left: 24px;
481     margin-bottom: 28px;
482     width: 300px;
483 }
484 .station h3{
485     font-size: 16px;
486     color: #fff;
487 }
488 .station ul li{
489     padding: 4px 0;
490     border-bottom: 1px solid #6fdea3;
491     font-size: 16px;
492     height: 29px;
493     overflow: hidden;
494     color: #fff;
495 }
496 .station ul li a{
497     color: #fff;
498 }
499 .yejiao{
500     height: 192px;
501     background-color: #191d3a;
502     clear: both;
503     line-height: 50px;
504 }
505 .nav{
506     width: 1000px;
507     margin: 0 auto;
508     padding: 20px 0;
509 }
510 .nav p{
511     overflow: auto;
512     font-size: 12px;
513     color: #6c6e7e;
514 }
515 .C1{
516     float: left;
517     vertical-align: middle;
518     /*color: #6c6e7e;*/
519 }
520 div a{
521     color: #6c6e7e;
522 }
523 .nav a:hover{
524     color: #fff;
525 }
526 /*.nav p span a{
527     color: #6c6e7e;
528     /*font-size: 12px;*/
529 }
530 /*.copy a{
531     color: #6c6e7e;
532 }*/
533 /*.xukezheng a{
534     color: #6c6e7e;s
535 }*/

CSS

　　多一份努力，多一份收获。同学们一起加油！

posted @ 2017-08-01 20:47 一个光头阅读(667) 评论(0) 收藏举报

一个光头

关于完成“博雅首页”作业后的感想

公告