用HTML+css模拟的百度首页特效：
<!DOCTYPE <a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'><u>html</u></a> PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>百度一下,就就知道了 -IT<a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=%BD%C' target='_blank'><u>教学网</u></a>itjxue.com</title> <style type="text/css"> /* *{margin:0px;padding:0px;font-size:14px;} 不要使用*，会影响整体的速度，只对需要重置的标签进行定义就可以了,还有当一个属性的数值为 0 时可以不加px，属性中的最后一个分号可以不写（个人习惯） */ body,div,form,input{font-size:14px;margin:0;padding:0} /* a{color:rgb(0, 0, 204);} 我个人还是不习惯使用rgb表示颜色，1.不容易记 2.难于书写 3.不能简写，字符多，个人还是习惯使用十六进制表示颜色你可以去了解一下“web安全色” */ a{color:#0000cc} a:active{color:#f90} /* #top_right{position:absolute;top:0px;padding:6px 10px;right:0px;font-size:12px;color:rgb(153, 153, 153);} 重复之前讲的 */ #top_right{color:#999;font-size:12px;padding:6px 10px;position:absolute;right:0;top:0} #top_right a{font-size:12px} /*头部结束*/ #main{margin:25px auto 100px auto;padding:0 35px;width:530px} #main h1{margin-bottom:4px;text-align:center} #main h1 a img{border:none} #main ul{list-style-type:none;padding:0 0 0 45px;width:410px} #main ul li{float:left;margin-right:18px} #main ul li a.mr{color:#000;font-weight:bold} #search_form{clear:both;margin-left:15px;padding-top:4px} #keyword{ /* border:1px solid #ccc; 第二个border */ /* border:none; 第一个border */ /* border-left:1px solid #999; 第四个border */ /* border-top:1px solid #999; 第三个border */ background:url(http://www.itjxue.comimg/1_015311.png) no-repeat -304px 0px; border-color:#999 #ccc #ccc #999; border-style:solid; border-width:1px; float:left; font-size:18px; height:30px; line-height:30px; text-indent:10px; width:408px; } /* 上面这四个border属性，这样写感觉不是很好，不易阅读 */ #main .search_btn{background:url(http://www.itjxue.comimg/1_015311.png) no-repeat 0 0;border:none;cursor:pointer;float:left;font-size:12px;height:32px;line-height:32px;margin-left:6px;width:95px; } #main .down_btn{} #main p{float:left;margin-top:35px;text-align:center;width:520px; } #cl{clear:both} /*内容结束*/ #footer{margin:50px auto;width:600px} #footer p{font-size:12px;margin-bottom:15px;text-align:center} #footer p.jr{margin-bottom:5px} #footer p a{font-size:12px} #footer p.bq{color:#77c} #footer p.bq a{color:#77c} /*尾部结束*/ /* 之后再说一点，再写注释的时候，尤其是中中有中文的时候，注释的前后加空格，可以防止当文件的字符编码错误时，中文产生乱码导致这个css无效 */ </style> </head> <body> <div id="top_right"> <a href="#">搜索设置</a> | <a href="#">登陆</a> <a href="#">注册</a> </div> <div id="main"> <h1> <a href="#" class="logo"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"></a></h1> <ul class="nav"> <li><a href="#">新闻</a></li> <li><a href="#" class="mr"><a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=+++%C' target='_blank'><u>网页</u></a></a></li> <li><a href="#">贴吧</a></li> <li><a href="#">知道</a></li> <li><a href="#">MP3</a></li> <li><a href="#">图片</a></li> <li><a href="#">视频</a></li> <li><a href="#">地图</a></li> </ul> <form action="#" method="post" id="search_form"> <input name="" type="text" id="keyword"> <input name="" type="button" value="百度一下" class="search_btn" onmouseout="'this.className='search_btn'" onmousedown="'this.className.down_btn'"> </form> <p> <a href="#">空间</a> <a href="#">百科</a> <a href="#">hao123</a> | <a href="#">更多>></a> </p><div id="cl"></div> </div> <div id="footer"> <p> <a href="#">把百度设为主页</a> <a href="#">把百度添加到桌面</a> </p><p class="jr"> <a href="#">加入百度推广</a> | <a href="#">搜索风云榜</a> | <a href="#">关于百度</a> | <a href="#">About Baidu</a> </p> <p class="bq"> 2012 Baidu <a href="#">使用百度前必读</a> <a href="#">京ICP证030173号</a> <img src="http://www.baidu.com/cache/global/img/gs.gif"> </p> </div> </body></html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
网页特效中用到的图片：
