博雅主页60%
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了博雅主页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 }
以上是关于博雅主页60%的主要内容，如果未能解决你的问题，请参考以下文章
PHP WordPress条件为主页SlideDeck主题代码片段