项目二—国外information
1 @charset "utf-8"; 2 /*=========================Reset_start==========================*/ 3 body,h1,h2,h3,h4,h5,h6,div,p,dl,dt,dd,ol,ul,li,form,table,th,td,a,img,span,strong,var,em,input,textarea,select,option 4 { 5 margin: 0; padding: 0; 6 } 7 body{ 8 background: #eeeeee; 9 } 10 html,body 11 { 12 font-family:"微软雅黑","宋体",Arail,Tabhoma; 13 text-align: left; 14 } 15 ul,ol 16 { 17 list-style: none; 18 } 19 img 20 { 21 border: 0 none;/*浏览器兼容问题，边框问题*/ 22 } 23 input,select,textarea 24 { 25 outline:0;/*去除外面的实线*/ 26 } 27 textarea 28 { 29 resize:none;/*固定文本框*/ 30 overflow: auto;/*自定义的出现滚动条*/ 31 } 32 table 33 { 34 border-collapse: collapse; 35 border-spacing: 0; 36 } 37 th,strong,var,em 38 { 39 font-weight: normal; 40 font-style: normal; 41 } 42 a 43 { 44 text-decoration: none; 45 color: black; 46 } 47 48 /*==========================Reset_End===========================*/
1 ._head 2 { 3 width: 1200px; 4 background: #fff; 5 margin: 0px auto; 6 min-width: 1200px; 7 } 8 ._head_top 9 { 10 width: 1200px; 11 height: 32px; 12 } 13 ._head_top_left 14 { 15 float: left; 16 margin-left: 60px; 17 height: 32px; 18 } 19 ._head_top_left li 20 { 21 float: left; 22 } 23 ._head_top_left li a 24 { 25 line-height: 32px; 26 } 27 ._head_top_left_l1 28 { 29 padding-right: 14px; 30 } 31 ._head_top_left_l3 32 { 33 padding-left: 11px; 34 } 35 ._head_top_right 36 { 37 float: right; 38 margin-right: 33px; 39 width: 380px; 40 height: 32px; 41 } 42 ._head_top_right li 43 { 44 float: left; 45 height: 32px; 46 line-height: 32px; 47 color: #666666; 48 } 49 ._head_bottom 50 { 51 width: 1200px; 52 height: 122px; 53 } 54 ._head_bottom_bg 55 { 56 height: 122px; 57 background: url(../images/head_sanceng.jpg) 0 0 repeat-x; 58 overflow: hidden; 59 } 60 ._head_bottom_left 61 { 62 float: left; 63 width: 88px; 64 height: 96px; 65 padding-top: 23px; 66 padding-left: 8px; 67 } 68 ._head_bottom_center 69 { 70 float: left; 71 padding-top:79px; 72 width: 239px; 73 height: 33px; 74 margin-left: 4px; 75 color: #787878; 76 } 77 ._head_bottom_right 78 { 79 float: left; 80 width: 842px; 81 height: 85px; 82 padding-top: 32px; 83 margin-left: 19px; 84 } 85 ._head_bottom_right ul 86 { 87 width: 727px; 88 height: 40px; 89 overflow: hidden; 90 color: #333333; 91 font-size: 18px; 92 font-weight: bold; 93 } 94 ._head_bottom_right ul li 95 { 96 float: left; 97 } 98 ._head_bottom_right_box 99 { 100 width: 842px; 101 height: 50px; 102 overflow: hidden; 103 } 104 ._head_bottom_right_box2 105 { 106 width: 98px; 107 height: 48px; 108 border: 1px solid #d9b997; 109 background: #f78c19; 110 float: left; 111 margin-left: 8px; 112 text-align: center; 113 line-height: 48px; 114 color: #fff; 115 cursor: pointer; 116 } 117 ._head_bottom_right_box1 118 { 119 width: 725px; 120 height: 48px; 121 border: 1px solid #dadada; 122 float: left; 123 } 124 ._head_bottom_right_box1 div 125 { 126 width: 143px; 127 height: 48px; 128 border-right: 1px solid #dbdbdb; 129 float: left; 130 } 131 ._head_bottom_right_box1_pro 132 { 133 line-height: 48px; 134 padding-left: 28px; 135 padding-right: 20px; 136 } 137 ._head_bottom_right_box1 input 138 { 139 width: 581px; 140 height: 48px; 141 float: left; 142 border: 0px; 143 color: #a3a2a2; 144 }
1 ._foot 2 { 3 width: 1200px; 4 margin-top: 1px; 5 min-width: 1200px; 6 margin: 0 auto; 7 } 8 ._foot_top 9 { 10 width: 1200px; 11 height: 250px; 12 } 13 ._foot_top_bg 14 { 15 width: 979px; 16 height: 223px; 17 margin: 0 auto; 18 margin-top: 28px; 19 } 20 ._foot_top_bg ul 21 { 22 margin-right: 130px; 23 float: left; 24 color: #999999; 25 } 26 ._foot_top_u1 li 27 { 28 margin-bottom: 13px; 29 } 30 ._foot_top_bg ._foot_top_u1_l 31 { 32 color: #333333; 33 margin-bottom: 24px; 34 } 35 ._foot_center 36 { 37 width: 1179px; 38 height: 58px; 39 border-top: 1px solid #c9c9c9; 40 border-bottom: 1px solid #c9c9c9; 41 } 42 ._foot_center ul 43 { 44 width: 1000px; 45 height: 58px; 46 margin-left: 96px; 47 line-height: 58px; 48 } 49 ._foot_center ul li 50 { 51 float: left; 52 } 53 ._foot_center ul li img 54 { 55 width: 35px; 56 height: 35px; 57 margin-right: 8px; 58 margin-top: 13px; 59 } 60 ._foot_center_peo 61 { 62 background: url(../images/foot_people.png) 0px 16px no-repeat; 63 padding-left: 32px; 64 } 65 ._foot_bottom 66 { 67 width: 1200px; 68 height: 138px; 69 } 70 ._foot_bottom ul 71 { 72 width: 800px; 73 height: 78px; 74 margin: 0 auto; 75 } 76 ._foot_bottom ul 77 { 78 overflow: hidden; 79 } 80 ._foot_bottom li 81 { 82 float: left; 83 margin-bottom: 4px; 84 color: #a6a6a6; 85 }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" href="css/head.css"> 8 <link rel="stylesheet" href="css/foot.css"> 9 <link rel="stylesheet" href="css/information.css"> 10 <style> 11 ._main_imgs 12 { 13 width: 1200px; 14 height: 141px; 15 margin: 0 auto; 16 min-width: 1200px; 17 } 18 ._main_imgs img 19 { 20 width: 1200px; 21 height: 141px; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="_head"> 27 <div class="_head_top"> 28 <ul class="_head_top_left"> 29 <li class="_head_top_left_l1"> 30 <a href="javascript:;" style="color:#1a2f72">Sign In</a> 31 </li> 32 <li> 33 <a href="javascript:;" style="color:#dfdfdf">|</a> 34 </li> 35 <li class="_head_top_left_l3"> 36 <a href="javascript:;" style="color:#1a2f72">Join Free</a> 37 </li> 38 </ul> 39 <ul class="_head_top_right"> 40 <li><span style='padding-right:9px'>For Buyers</span><span>∨</span></li> 41 <li><span style='padding-left:34px;padding-right:9px'>For Suppliers</span><span>∨</span></li> 42 <li><span style='padding-left:47px;padding-right:10px'>English</span><span>∨</span></li> 43 </ul> 44 </div> 45 <div class="_head_bottom"> 46 <div class="_head_bottom_bg"> 47 <div class="_head_bottom_left"> 48 <a href="javascript:;"><img src="images/head_left.png" alt=""></a> 49 </div> 50 <div class="_head_bottom_center"> 51 <p>For sino industry products</p> 52 <p>business and trade information</p> 53 </div> 54 <div class="_head_bottom_right"> 55 <ul> 56 <li><span style='padding-left:11px;padding-right:70px;'>Home</span></li> 57 <li><span style='padding-right:17px;'>Information</span><span>∨</span></li> 58 <li><span style='padding-left:58px;padding-right:16px;'>Product</span><span>∨</span></li> 59 <li><span style='padding-left:69px;padding-right:18px;'>Suppliers</span><span>∨</span></li> 60 <li><span style='padding-left:30px;'>Service</span></li> 61 </ul> 62 <div class="_head_bottom_right_box"> 63 <div class="_head_bottom_right_box1"> 64 <div> 65 <span class='_head_bottom_right_box1_pro'>Product</span> 66 <span> <img src="images/head_daosanjiao.png" alt=""></span> 67 </div> 68 <input type="text" value=" Please enter the contenr you want to search"> 69 </div> 70 <div class="_head_bottom_right_box2"> 71 <p>SEARCH</p> 72 </div> 73 </div> 74 </div> 75 </div> 76 </div> 77 </div> 78 <div class="_main"> 79 <div class="_main_left"> 80 <p class="_main_left_top"> Home> Information</p> 81 <ul> 82 <li class="_main_left_cote"><p>Cotegories</p></li> 83 <li style="background:#f78c19;"><a href="javascript:;">Maket</a></li> 84 <li><a href="javascript:;">Dynamic</a></li> 85 <li><a href="javascript:;">Exhibition</a></li> 86 <li><a href="javascript:;">Project</a></li> 87 </ul> 88 </div> 89 <div class="_main_center"> 90 <div class="_main_center_top"> 91 <div class="_main_center_top_left"><img src="images/information_tong.jpg" alt=""></div> 92 <ul class="_main_center_top_right"> 93 <li> 94 <a href="javascript:;" style="font-size:14px;font-weight:bold">Exclusive: OPEC president says output freeze will work</a> 95 </li> 96 <li> 97 <a href="javascript:;" style="font-size:14px;">Oil prices could move back above $50 a barrel within a</a> 98 </li> 99 <li> 100 <a href="javascript:;" style="font-size:14px;">year as an OPEC initiative to freeze production gains</a> 101 </li> 102 <li> 103 <a href="javascript:;" style="font-size:14px;">support, and smaller producers go to the wall.</a> 104 </li> 105 <li> 106 <a href="javascript:;" style="font-size:14px;">2016-02-25</a> 107 </li> 108 </ul> 109 </div> 110 <div class="_main_center_middle"> 111 <ul> 112 <li> 113 <span>Apple to court: Government cant force us to write code</span> 114 <span class='_main_center_middle_sp'> 115 2016-02-26 116 </span> 117 </li> 118 <li> 119 <span>Apple to court: Government cant force us to write code</span> 120 <span class='_main_center_middle_sp'> 121 2016-02-26 122 </span> 123 </li> 124 <li> 125 <span>Apple to court: Government cant force us to write code</span> 126 <span class='_main_center_middle_sp'> 127 2016-02-26 128 </span> 129 </li> 130 <li> 131 <span>Apple to court: Government cant force us to write code</span> 132 <span class='_main_center_middle_sp'> 133 2016-02-26 134 </span> 135 </li> 136 <li> 137 <span>Apple to court: Government cant force us to write code</span> 138 <span class='_main_center_middle_sp'> 139 2016-02-26 140 </span> 141 </li> 142 <li> 143 <span>Apple to court: Government cant force us to write code</span> 144 <span class='_main_center_middle_sp'> 145 2016-02-26 146 </span> 147 </li> 148 <li> 149 <span>Apple to court: Government cant force us to write code</span> 150 <span class='_main_center_middle_sp'> 151 2016-02-26 152 </span> 153 </li> 154 <li> 155 <span>Apple to court: Government cant force us to write code</span> 156 <span class='_main_center_middle_sp'> 157 2016-02-26 158 </span> 159 </li> 160 </ul> 161 </div> 162 <div class="_main_center_bottom"> 163 <ul> 164 <li>First </li> 165 <span>| </span> 166 <li>Previous </li> 167 <span>| </span> 168 <li>Next </li> 169 <span>| </span> 170 <li style="padding-right:22px">Last </li> 171 <li>Page to : </li> 172 <li><select name="" id="" style="width:66px;height:20px"></select></li> 173 </ul> 174 </div> 175 </div> 176 <div class="_main_right"> 177 <ul> 178 <li class='_main_right_l1'> 179 <p></p> 180 <span>Hot</span> 181 </li> 182 <li class="_main_right_l2"> 183 <img src="images/information_oil.jpg" alt=""> 184 </li> 185 <li class="_main_right_l3"> 186 <p>Oil crash: Halliburton slashes</p> 187 <p>another 5,000 jobs</p> 188 </li> 189 <li class="_main_right_l4"> 190 <img src="images/information_women.jpg" alt=""> 191 </li> 192 <li class="_main_right_l3"> 193 <p>Oil crash: Halliburton slashes</p> 194 <p>another 5,000 jobs</p> 195 </li> 196 <li class="_main_right_l6"> 197 <p>ADVERTISING</p> 198 </li> 199 <li class="_main_right_l7"> 200 <img src="images/information_news.jpg" alt=""> 201 </li> 202 </ul> 203 </div> 204 </div> 205 <div class="_main_imgs"> 206 <img src="images/information_bg.jpg" alt=""> 207 </div> 208 <div class="_foot"> 209 <div class="_foot_top"> 210 <div class="_foot_top_bg"> 211 <ul> 212 <li class="_foot_top_u1_l">Information</li> 213 <li>Market</li> 214 <li>Dynamic</li> 215 <li>Exhibition</li> 216 <li>Project</li> 217 </ul> 218 <ul> 219 <li class="_foot_top_u1_l">Products</li> 220 <li>Environmental Protection</li> 221 <li>Ironmaking</li> 222 <li>Steelmaking</li> 223 <li>Rolling</li> 224 <li>Refractory</li> 225 <li>Others</li> 226 </ul> 227 <ul> 228 <li class="_foot_top_u1_l">Seller</li> 229 <li>Environmental Protection</li> 230 <li>Ironmaking</li> 231 <li>Steelmaking</li> 232 <li>Rolling</li> 233 <li>Refractory</li> 234 <li>Others</li> 235 </ul> 236 <ul style="margin-right:0px;"> 237 <li class="_foot_top_u1_l">Service</li> 238 <li>Online Service</li> 239 <li>Online Service</li> 240 <li>VAS</li> 241 </ul> 242 </div> 243 </div> 244 <div class="_foot_center"> 245 <ul> 246 <li style="margin-right:34px">Follow Us :</li> 247 <li><img src="images/foot_f.png" alt=""></li> 248 <li><img src="images/foot_in.png" alt=""></li> 249 <li><img src="images/foot_k.png" alt=""></li> 250 <li><img src="images/foot_+.png" alt=""></li> 251 <li><img src="images/foot_weibo.png" alt=""></li> 252 <li><img src="images/foot_you.png" alt=""></li> 253 <li style="margin-left:142px">Service hotline: </li> 254 <li style="color:#999999;margin-right:115px">400-8603-139</li> 255 <li class="_foot_center_peo">Contact Us</li> 256 </ul> 257 </div> 258 <div class="_foot_bottom"> 259 <ul> 260 <li class="_foot_bottom_l1">Copyright © 2006 ibicn.com Inc. All rights reserved</li> 261 <li>Beijing public security ICP Card No. 11010602100087 Beijing Beijing No. 120067 ICP No. 09020853 - 112</li> 262 <li>Beijing United Media Information & Technology Corp</li> 263 </ul> 264 </div> 265 </div> 266 <!-- ********* --> 267 <script> 268 269 </script> 270 </body> 271 </html>
