1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>百度一下</title>
6 <meta name="Keywords" content="关键字">
7 <meta name="Description" content="描述">
8 <style>
9 *{margin: 0;padding: 0;}
10 p
11 {
12 text-align: center ;
13 color: blue;
14 }
15 #right
16 {
17 text-align: right;
18 color: blue;
19 }
20 #aa,#bb,#cc,#dd
21 {
22 color: #2196F3;
23 }
24 .a
25 {
26 text-align: center;
27 color: blue;
28 }
29 .b
30 {
31 text-decoration:none;
32 }
33 .c
34 {
35 font-size: 15px;
36 }
37 .d
38 {
39 font-size: 13px;
40 }
41 a
42 {
43 color: blue;
44 }
45 .c,.b
46 {
47 color: black;
48 }
49 #bg1
50 {
51 width: 100%;
52 height: 100%;
53 background: #D9D9D9;
54 display: none;
55 opacity: 0.5;
56 filer:alpha(opacity:50);
57 position: absolute;
58 left: 0;
59 top: 0;
60 }
61 #bg2
62 {
63 width: 350px;
64 height: 400px;
65 background: #fff;
66 border: 1px solid #ccc;
67 display: none;
68 position: absolute;
69 left: 200px;
70 top: 200px;
71 }
72 #bg2:after
73 {
74 content: "";
75 clear: both;
76 display: block;
77 }
78 .top
79 {
80 width: 350px;
81 height: 50px;
82 background: #F7F7F7;
83 overflow: hidden;
84 }
85 .top_left
86 {
87 line-height: 50px;
88 color: #666666;
89 background: url(img/11.jpg) 20px center no-repeat;
90 padding-left: 55px;
91 width: 150px;
92 float: left;
93 }
94 #top_right
95 {
96 float: right;
97 line-height: 50px;
98 margin-right: 30px;
99 color: #CACACB;
100 font-size: 45px;
101 }
102 .middle
103 {
104 width:350px;
105 }
106 .middle:before
107 {
108 content: "";
109 clear: both;
110 display: block;
111 }
112 .middle:after
113 {
114 content: "";
115 clear: both;
116 display: block;
117 }
118 .middle_frist
119 {
120 margin-top: 30px;
121 float: right;
122 height: 40px;
123 margin-right: 18px;
124 color: #666666;
125 font-size: 22px;
126 background: url(img/tel.jpg) 0 9px no-repeat;
127 padding-left: 25px;
128 line-height:40px;
129 }
130 .middle_secord,.middle_three
131 {
132 height: 40px;
133 width: 265px;
134 border: 1px solid #DDDDDD;
135 margin-left: 18px;
136 margin-top: 18px;
137 line-height: 40px;
138 padding-left: 45px;
139 }
140 .middle_secord
141 {
142 background: url(img/people.jpg) 10px 5px no-repeat;
143 float: left;
144 }
145 .middle_three
146 {
147 background: url(img/suo.jpg) 10px 2px no-repeat;
148 float: left;
149 }
150 .middle_four
151 {
152 width: 310px;
153 margin-left: 18px;
154 float: left;
155 height: 40px;
156 }
157 .middle_four_check,.middle_four_con
158 {
159 margin-top: 15px;
160 float: left;
161 }
162 .middle_four_con
163 {
164 margin-left: 5px;
165 color: #666666;
166 float: left;
167 }
168 .middle_four_con1
169 {
170 float: right;
171 margin-top: 15px;
172 color: #1B66C7;
173 }
174 .middle_five
175 {
176 width: 310px;
177 margin-left: 18px;
178 float: left;
179 height: 40px;
180 text-align: center;
181 line-height: 40px;
182 color: #fff;
183 background: #3F89EC;
184 }
185 .middle_six
186 {
187 margin-left: 18px;
188 float: right;
189 height: 40px;
190 text-align: center;
191 line-height: 40px;
192 margin-right: 18px;
193 color: #1B66C7;
194 }
195 </style>
196
197 </head>
198 <body>
199 <div>
200 <div class="d"><!-- 搜索设置，登录，注册 -->
201 <p id="right">
202 <a href="javascript:;">搜索设置</a>
203 <span>|</span>
204 <a href="javascript:;" id="dl">登录</a>
205 <a href="javascript:;">注册</a>
206 </p>
207 </div><!-- 百度logo -->
208 <div class="a">
209 <img src="img/logo.png" alt="百度一下" title="百度一下" >
210 </div>
211 <div class="c"><!-- 标题 -->
212 <p>
213 <a href="javascript:;">新闻</a>
214 <a href="javascript:;" class="b">网页</a>
215 <a href="javascript:;">贴吧</a>
216 <a href="javascript:;">知道</a>
217 <a href="javascript:;">mp3</a>
218 <a href="javascript:;">图片</a>
219 <a href="javascript:;">视频</a>
220 <a href="javascript:;">地图</a>
221 </p>
222 </div>
223 <div class="a"> <!-- 输入框 -->
224 <form action="http://h2.qq.com/" method="post">
225 <input type="text" name="输入框" value="" style="width:400px;height:28px;
226 ">
227 <input type="submit" name="百度一下" value="百度一下" style="height:33px;">
228 </form>
229 </div>
230 <div class="c"><!-- 输入框下方 -->
231 <p>
232 <a href="javascript:;">百科</a>
233 <a href="javascript:;">文库</a>
234 <a href="http://www.hao123.com">hao123</a>
235 <span>|</span>
236 <a href="javascript:;">更多</a>>>
237 </p>
238 </div><br><br>
239 <div class="d"><!-- 把百度设为主页，添加到桌面 -->
240 <p>
241 <a href="javascript:;">把百度设为主页</a>
242 <a href="javascript:;">把百度添加到桌面</a>
243 </p>
244 </div>
245 <div class="d"><!-- 加入百度推广 -->
246 <p>
247 <a href="javascript:;">加入百度推广</a><span>|</span>
248 <a href="javascript:;">搜索风云榜</a><span>|</span>
249 <a href="javascript:;">关于百度</a><span>|</span>
250 <a href="javascript:;" id="dd">About Baidu</a>
251 </p>
252 </div>
253 <div class="d"><!-- 注释，最后一行 -->
254 <p>
255 <a href="javascript:;" class="b" id="bb">©2012Baidu</a>
256 <a href="javascript:;" id="cc">使用百度前必读</a>
257 <a href="javascript:;" id="aa">京ICP证030173号</a>
258 </p>
259 </div>
260 </div>
261 <div id="bg1"></div>
262 <div id="bg2">
263 <div class="top">
264 <p class="top_left">登录百度账号</p>
265 <p id="top_right">X</p>
266 </div>
267 <div class="middle">
268 <div class="middle_frist">
269 <p>短信快捷登录</p>
270 </div>
271 <input type="text" class="middle_secord">
272 <input type="text" class="middle_three">
273 <div class="middle_four">
274 <input type="checkbox" class="middle_four_check">
275 <h5 class="middle_four_con">下次自动登录</h5>
276 <h5 class="middle_four_con1">登录遇到问题</h5>
277 </div>
278 <h4 class="middle_five">登录</h4>
279 <h5 class="middle_six">立即登录</h5>
280 </div>
281 </div>
282 <script>
283 var dl=document.getElementById('dl');
284 var bg1=document.getElementById('bg1');
285 var bg2=document.getElementById('bg2');
286 var close=document.getElementById('top_right');
287 dl.onclick=function() {
288 bg1.style.display="block";
289 bg2.style.display="block";
290 var winw=document.documentElement.clientWidth;
291 var winh=document.documentElement.clientHeight;
292 var bg2w=bg2.offsetWidth;
293 var bg2h=bg2.offsetHeight;
294 bg2.style.left=(winw-bg2w)/2+"px";
295 bg2.style.top=(winh-bg2h)/2+"px";
296 };
297 close.onclick=function() {
298 bg1.style.display="none";
299 bg2.style.display="none";
300 };
301 window.onresize=function() {
302 var winw=document.documentElement.clientWidth;
303 var winh=document.documentElement.clientHeight;
304 var bg2w=bg2.offsetWidth;
305 var bg2h=bg2.offsetHeight;
306 bg2.style.left=(winw-bg2w)/2+"px";
307 bg2.style.top=(winh-bg2h)/2+"px";
308 };
309 </script>
310 </body>
311 </html>
