zoukankan      html  css  js  c++  java
  • 项目二—国外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===========================*/
    reset.css
      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         }
    head.css
     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         }
    foot.css
      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>&or;</span></li>
     41                 <li><span style='padding-left:34px;padding-right:9px'>For Suppliers</span><span>&or;</span></li>
     42                 <li><span style='padding-left:47px;padding-right:10px'>English</span><span>&or;</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>&or;</span></li>
     58                         <li><span style='padding-left:58px;padding-right:16px;'>Product</span><span>&or;</span></li>
     59                         <li><span style='padding-left:69px;padding-right:18px;'>Suppliers</span><span>&or;</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="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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&nbsp;</li>
    165                     <span>|&nbsp;</span>
    166                     <li>Previous&nbsp;</li>
    167                     <span>|&nbsp;</span>
    168                     <li>Next&nbsp;</li>
    169                     <span>|&nbsp;</span>
    170                     <li style="padding-right:22px">Last&nbsp;</li>
    171                     <li>Page to :&nbsp;&nbsp;&nbsp; </li>
    172                     <li><select name="" id="" style="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:&nbsp;&nbsp;</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>
    information.html

  • 相关阅读:
    SQL-排名函数
    SQL-简单查询
    SQL-判断表是否存在
    HDU1557权利选举
    Bresenham画直线,任意斜率
    LCS最长公共子序列HDU1159
    zoj1276矩阵连乘dp
    OJ的文件流操作
    dp题目
    翻纸牌 高校俱乐部 英雄会 csdn
  • 原文地址:https://www.cnblogs.com/yoyoyoyoyoyo/p/5878670.html
Copyright © 2011-2022 走看看