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="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>
