1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <link rel="stylesheet" type="text/css" href="博雅.css"/>
7 </head>
8 <body>
9 <div class="box">
10 <!--顶部开始-->
11 <div class="dingbu">
12 <div class="daohanglan">
13 <div class="logo floatL"><img src="images/logo.png"/></div>
14 <div class="caidan floatL">
15 <ul>
16 <li class="li-1"><a href="#">首页</a></li>
17 <li><a href="#">博雅游戏</a></li>
18 <li><a href="#">博雅新闻</a></li>
19 <li><a href="#">关于我们</a></li>
20 <li><a href="#">客服中心</a></li>
21 <li><a href="#">投资者关系</a></li>
22 </ul>
23 </div>
24 <div class="jiaruwomen floatR"><a href="#"><img src="images/jrwm.png"/></a></div>
25 <div class="clear"></div>
26 </div>
27 <!--顶部结束-->
28 <!--招聘图开始-->
29 <div class="zhaopintu"></div>
30 <!--招聘图开始-->
31 <!--宣传栏开始-->
32 <div class="xuanchuanlan">
33 <div class="bpt">
34 <ul>
35 <li>
36 <img src="images/bpt1.jpg">
37 <h3>BPT宣传片</h3>
38 <a href="#">点击播放</a>
39 </li>
40 <li>
41 <img src="images/bpt2.jpg">
42 <h3>博雅互动宣传视频</h3>
43 <a href="#">点击播放</a>
44 </li>
45 <li>
46 <img src="images/bpt3.jpg">
47 <h3>斗地主</h3>
48 <a href="#">点击播放</a>
49 </li>
50 <li class="li-1">
51 <img src="images/bpt4.jpg">
52 <h3>德州扑克</h3>
53 <a href="#">点击播放</a>
54 </li>
55 </ul>
56 </div>
57 </div>
58 <!--宣传栏结束-->
59
60 <!--博雅新闻开始-->
61 <div class="boyaxinwen">
62 <div class="boyaxinwenL floatL">
63 <div class="xinwenliebiao">
64 <ul>
65 <li>博雅互动公布2016第三季度业绩 公司收益稳步增长<span>11/29</span> </li>
66 <li>博雅互动公布2016第三季度业绩 公司收益稳步增长<span>11/29</span> </li>
67 <li>博雅互动公布2016第三季度业绩 公司收益稳步增长<span>11/29</span> </li>
68 <li>博雅互动公布2016第三季度业绩 公司收益稳步增长<span>11/29</span> </li>
69 </ul>
70 </div>
74 </div>
78 </div>
79 <!--博雅新闻结束-->
80 <div class="zhaopinlan"></div>
81 </div>
82 </body>
83 </html>
1 body,ul,li,div,span{padding: 0px;margin: 0px;}/*第一件事件将HTML中的一些有默认的内填充与外边距的标签清除*/
2
3 .box{
4 width: 1920px;
5 height: 2000px;
6 margin: 0 auto;
7 }
8 /*顶部开始*/
9 .dingbu{
10 widows: 100%;
11 height: 58px;
12 background-color: #191D3A;
13 }
14 .dingbu .daohanglan{
15 margin: 0 auto;
16 width: 1000px;
17 height: 58px;
18 line-height: 58px;
19 }
20 .dingbu .daohanglan .caidan ul li{
21 float: left;
22 border-right:1px solid #252947;
23 width: 90px;
24 text-align: center;
25 }
26 .dingbu .daohanglan .caidan ul .li-1{
27 background:#252947 ;
28 }
29 .dingbu .daohanglan .caidan ul li a{
30 color: #818496;
31 display: block;
32 }
33 .dingbu .daohanglan .caidan ul li a:hover{
34 color: #fff;
35 }
36 .dingbu .daohanglan .jiaruwomen{
37 padding-top: 12px;
38 height: 46px;
39 }
40 /*顶部结束*/
41 /*招聘图开始*/
42 .zhaopintu{
43 width: 1920px;
44 height: 465px;
45 background: url(images/banner.jpg);
46 margin-bottom: 50px;
47 }
48 /*招聘图结束*/
49 /*宣传栏开始*/
50 .xuanchuanlan{
51 width: 1000px;
52 height: 240px;
53 margin: 0 auto;
54 border-bottom: 1px solid #DBE1E7;
55 }
56 .xuanchuanlan .bpt{
57 float: left;
58 height: 280px;
59 width: 1000px;
60 }
61 .xuanchuanlan .bpt ul li{
62 float: left;
63 width: 218px;
64 height: 280px;
65 margin-right: 43px;
66 }
67 .xuanchuanlan .bpt ul .li-1{
68 margin-right: 0;
69 width: 217px;
70 height: 280px;
71 }
72 .xuanchuanlan .bpt ul img{
73 width: 218px;
74 height: 130px;
75 }
76 .xuanchuanlan .bpt ul li h3{
77 text-align: center;
78 font-family: "微软雅黑";
79 margin-top: 5px;
80 margin-bottom: 5px;
81 }
82 .xuanchuanlan .bpt ul li a{
83 color: #38B774;
84 padding-left: 80px;
85 padding-right: 12px;
86 background: url(images/xjt.png) no-repeat right center;
87 font-size: 12px;
88 }
89 /*宣传栏结束*/
90
91 /*博雅新闻开始*/
92 .boyaxinwen{
93 width: 1000px;
94 height: 500px;
95 background: pink;
96 margin:0 auto;
97 }
98 .boyaxinwen .boyaxinwenL{
99 width: 500px;
100 height: 310px;
101 background: url(images/bynewsbg.jpg);
102
103 }
104 .boyaxinwen .boyaxinwenL .xinwenliebiao ul li{
105 height: 30px;
106 line-height: 30px;
107 }
108
109
110 /*使用伪类选择器对超级链接进行美化*/
111 a:link,a:visited{text-decoration: none;color: #444;}
112 a:hover{color: #f00;}
113 ul{list-style: none;}
114 .floatL{
115 float:left;
116 }
117 .floatR{
118 float:right;
119 }
120 .clear{
121 clear: both;
122 }
