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 }
时间： 2024-10-17 19:29:54