项目二—国外information

Posted 舍近求猿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了项目二—国外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="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:&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

技术分享技术分享

以上是关于项目二—国外information的主要内容,如果未能解决你的问题,请参考以下文章

编程导航国外大神总结的实用代码,30 秒学会!

如何更改片段 Kotlin

OnLine information gathering

片段替换显示两个片段

为啥无法显示片段布局?

12个用得着的 JQuery 代码片段