首页 > 代码库 > 博雅互动

博雅互动

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>博雅互动</title>
  6     <style class="text/css">
  7         *{
  8             margin: 0px;
  9             padding: 0px;
 10         }
 11         .header{
 12             width: 100%;
 13             height:58px;
 14             background: black;
 15         }
 16         .top{
 17             width: 1000px;
 18             height: 58px;
 19             margin: 0px auto;    
 20         }
 21         .top li{
 22             width:100px;
 23             height: 58px; 
 24             line-height: 58px;
 25             font-size: 14px;
 26             list-style: none;
 27             float: left;
 28             text-align: center;
 29         }
 30         a{
 31             text-decoration: none;
 32             color: #f0f0f0;
 33         }
 34         .top li a:hover{
 35             color: red;
 36         }
 37         .top .top_img{
 38             width: 184px;
 39         }
 40         .top .top_footer{
 41             width: 134px;
 42             background: url(images/jrwm.png) no-repeat center center;
 43         }
 44         .center{
 45             width: 100%;
 46             height: 465px;
 47             background: url(images/banner.jpg) center;
 48         }
 49         .bottom{
 50             width:1200px;
 51             height: 280px;
 52             margin: 0px auto;
 53         }
 54         .bottom div p a{
 55             color:#00ff00;
 56         }    
 57         .bottom .bottom_1{
 58             width: 218px;
 59             height: 130px;
 60             font-weight: bold;
 61             text-align:center; 
 62             margin:50px 40px;
 63             float: left;
 64         }
 65         p{
 66             font-size: 5px;
 67             margin-top: 10px;
 68             color: green;
 69         }
 70         .footer{
 71             width:1000px;
 72             height: 420px;
 73             margin: 0px auto;
 74             border-top: 1px solid #a0a0a0;    
 75         }
 76         .footer .xinwen{
 77             width:500px;
 78             height: 310px;
 79             margin-top: 50px;
 80             background: url(images/bynewsbg.jpg) no-repeat;
 81             float: left;
 82         }
 83         .xinwen ul{
 84             margin-top: 120px;
 85             list-style-type: none;
 86             margin:120px 50px 0px 50px;
 87         }
 88         .xinwen li{
 89             border-bottom: 1px solid #f0f0f0;
 90             width: 400px;
 91             height: 30px; 
 92             line-height: 30px;
 93             font-size: 16px;
 94             font-family: "黑体";
 95             padding:7px 0px 7px 7px;
 96         }
 97         .xinwen li a{
 98 
 99             color: black;
100 
101         }
102         .xinwen li span{
103             float: right;
104             color: #a0a0a0;
105         }
106         .footer .zhaopin{
107             width:500px;
108             height: 310px;
109             margin-top: 50px;
110             float: right;
111             background: url(images/zczp.jpg) no-repeat;
112         }    
113         .zhaopin h1{
114             width: 500px;
115             height: 50px;
116             text-align: center;
117             color: black;
118         }
119         .zhaopin .gw{
120             margin-top: 60px;
121             width: 300px;
122             height:190px;
123         }
124         .zhaopin .gw ul{
125             margin-left: 15px;
126             list-style-type:none;
127         }
128         
129         .zhaopin ul li{
130             width: 400px;
131             height: 42px; 
132             line-height: 30px;
133             font-size: 16px;
134         }
135         .zhaopin ul a{
136             color: black;
137         }
138         .zhaopin ul a:hover{
139             color: white;
140         }
141     </style>
142 </head>
143 <body>
144     <div class="header">
145         <div class="top">        
146                 <ul>
147                     <li class="top_img"><a href="#"><img src="images/logo.png" /></a></li>
148                     <li><a href="#">首页</a></li>
149                     <li><a href="#">博雅游戏</a></li>
150                     <li><a href="#">博雅新闻</a></li>
151                     <li><a href="#">关于我们</a></li>
152                     <li><a href="#">客服中心</a></li>
153                     <li><a href="#">投资者关系</a></li>
154                     <li class="top_footer"></li>
155                 </ul>
156         </div>
157     </div>
158     <div class="center"></div>
159     <div class="bottom">
160         <div class="bottom_1"><img src="images/bpt1.jpg"><br/>BPT宣传片<br/><p><a href="#">点击播放</a> <img src="images/xjt.png"></p>
161         </div>
162         <div class="bottom_1"><img src="images/bpt1.jpg"><br/>BPT宣传片<br/><p><a href="#">点击播放</a> <img src="images/xjt.png"></p>
163         </div>
164         <div class="bottom_1"><img src="images/bpt1.jpg"><br/>BPT宣传片<br/><p><a href="#">点击播放</a> <img src="images/xjt.png"></p>
165         </div>
166         <div class="bottom_1"><img src="images/bpt1.jpg"><br/>BPT宣传片<br/><p><a href="#">点击播放</a> <img src="images/xjt.png"></p>
167         </div>
168     </div>
169     <div class="footer">
170         <div class="xinwen">
171             <ul>
172                     
173                 <li><a href="#">深圳市政协副主席徐友军一行莅临博雅相互调研</a><span>9/23</span></li>
174                 <li><a href="#">深圳市政协副主席徐友军一行莅临博雅相互调研</a><span>9/23</span></li>
175                 <li><a href="#">深圳市政协副主席徐友军一行莅临博雅相互调研</a><span>9/23</span></li>
176                 <li><a href="#">深圳市政协副主席徐友军一行莅临博雅相互调研</a><span>9/23</span></li>
177             </ul>
178         </div>
179         <div class="zhaopin">
180                 <h1>专场招聘</h1>
181                 <div class="gw">
182                     <h2>专场招聘岗位</h2>
183                     <ul>
184                         <li><a href="#">PHP开发工程师</a></li>
185                         <li><a href="#">C++开发工程师</a></li>
186                         <li><a href="#">WEB前端开发工程师</a></li>
187                         <li><a href="#">大数据开发工程师</a></li>
188                     </ul>
189                 </div>
190         </div>
191     </div>
192     
193 </body>
194 </html>

技术分享

技术分享

 

博雅互动