百度登录界面

  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>&nbsp;
214                 <a href="javascript:;" class="b">网页</a>&nbsp;
215                 <a href="javascript:;">贴吧</a>&nbsp;
216                 <a href="javascript:;">知道</a>&nbsp;
217                 <a href="javascript:;">mp3</a>&nbsp;
218                 <a href="javascript:;">图片</a>&nbsp;
219                 <a href="javascript:;">视频</a>&nbsp;
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>&nbsp;
233                 <a href="javascript:;">文库</a>&nbsp;
234                 <a href="http://www.hao123.com">hao123</a>&nbsp;
235                 <span>|</span>&nbsp;
236                 <a href="javascript:;">更多</a>&gt;&gt;
237             </p>
238         </div><br><br>
239         <div class="d"><!-- 把百度设为主页，添加到桌面 -->
240             <p>
241                 <a href="javascript:;">把百度设为主页</a>&nbsp;
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">&copy;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>