博雅主页60%

  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 }

posted on 2016-12-04 00:34 91xiaozhu 阅读(174) 评论(1) 收藏举报