百度页面： 实现效果： 代码： html文件：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度一下，你就知道</title> <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> </head> <body> <div id="d1"> <div > <ul id="k"> <li><a href="http://news.baidu.com/ " >新闻</a></li> <li><a href="https://www.hao123.com/" >hao123</a></li> <li><a href="http://map.baidu.com/">地图</a></li> <li><a href="http://v.baidu.com/" >视频</a></li> <li><a href="http://tieba.baidu.com/" >贴吧</a></li> <li><a href="http://xueshu.baidu.com/">学术</a></li> <li><a href="http://www.baidu.com/gaoji/preferences.html">设置</a></li> <li><a href="#">更多</a></li> <p style="color: red;float:right;font-family:微软雅黑;font-size: 18px ">高考加油</p> </ul> </div> </div> <div id="d2" > <a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_PclogoS_8whnvm25&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs" id="a1"> <img src="image/logo.jpg"> </a><br /> <form action="http://www.baidu.com/s"> <div id="l"> <input type="text" name="wd"> <input type="submit" class="input_out" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" value="百度一下"> </div> </form> </div> <div id="d3"> <div align="center" class="p"> <ul> <li><a href="https://www.baidu.com/cache/sethelp/index.html" >设为首页</a></li> <li><a href="https://home.baidu.com/" >关于百度</a></li> <li><a href="http://ir.baidu.com/" >About Baidu</a></li> <li><a href="https://isite.baidu.com/site/e.baidu.com/d38e8023-2131-4904-adf7-a8d1108f51ef?refer=888" >百度营销</a></li> <li><a href="https://www.baidu.com/duty/">使用百度前必读</a></li> <li><a href="https://help.baidu.com/newadd?prod_id=1&category=4" >意见反馈</a></li> <li><a href="https://help.baidu.com/">帮助中心</a></li> <p class="gg" style="font-size: 4px;color: gray">©2020 Baidu (京)-经营性-2017-0020 <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" style="font-size: 4px;color: gray">京公网安备11000002000001号</a> 京ICP证030173号 </p> </ul> </div> </div> </body> </html>index.css2文件：
#d1{ position: absolute; width: 2000px; height: 20px; } #d1 ul{ list-style: none; } #d1 a{ font-family: "微软雅黑"; color: black; font-size: 18px; } #d1 li{ float: left; margin-right: 35px; text-align: center; } #k li:hover>a{ color:blue; } #d2{ position:relative; text-align: center; top: 100px } #d2 input[type="text"]{ width:600px; height:48px; margin-top: 41px; font-size: 20px; border-width: 2px; border-color: blue; border-top-left-radius: 10px; /*圆角*/ border-bottom-left-radius: 10px; /*圆角*/ } .input_out{ height: 54px; width:100px; margin-top: 41px; background-color: blue; border-width: 0px; font-size: 20px; color: white; margin-left: -5px; border-top-right-radius: 10px; /*圆角*/ border-bottom-right-radius: 10px; /*圆角*/ } .input_move{ height: 54px; width:100px; margin-top: 41px; background-color: mediumblue; border-width: 0px; font-size: 20px; color: white; margin-left: -5px; border-top-right-radius: 10px; /*圆角*/ border-bottom-right-radius: 10px; /*圆角*/ } #d2 input[type="submit"]:hover{ cursor: pointer; } #d3{ position: absolute; width: 2000px; height: 20px; margin-top: 730px; } #d3 ul{ list-style: none; } #d3 a{ font-family: "微软雅黑"; color: gray; font-size: 15px; } #d3 li{ float: left; margin-right: 35px; text-align: center; } #a1{ margin-bottom:100px; } a{ text-decoration:none; } .gg{ float: right; } #t:active{ border-color: mediumblue; }