最近学了html和css，于是就找了个百度页面案例来练练手
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>百度一下，你就知道</title> <style type="text/css" media="screen"> .top{ width:100%; height:64px; margin-top:17px; } .top>.title{ height:64px; float:right; } .top>.title>a{ font-size:13.5px; font-family:"宋体"; color:black; text-decoration:underline; } .top>.title>.bold{ font-weight:bold; } .top>.title>.list{ border:0; height:25px; width:60px; background:#06F; color:#fff; } .pic{ text-align:center; margin-top:25px; } .search{ text-align:center; margin-top:20px; } .input{ width:540px; height:30px; } .btn{ border:0; width:100px; height:36px; background:#06F; font-size:15px; color:#fff; } .bottom-one{ text-align:center; margin-top:220px; } .page1{ font-size:12px; font-family:"微软雅黑"; font-weight:bold; color:#666; margin-top:0px; } .bottom-two{ text-align:center; margin-top:17px; } .page2{ font-size:12px; font-family:"微软雅黑"; color:#999; text-decoration:underline; } .page3{ font-size:12px; font-family:"微软雅黑"; color:#999; } </style> </head> <body> <div class="top"> <div class="title"> <a class="bold" href="#">新闻</a> <a class="bold" href="#">hao123</a> <a class="bold" href="#">地图</a> <a class="bold" href="#">视频</a> <a class="bold" href="#">贴吧</a> <a class="bold" href="#">学术</a> <a href="#">登录</a> <a href="#">设置</a> <input class="list" type="submit" value="更多产品" name="submit" /> </div> </div> <div class="body"> <div class="pic"> <img src="log.png" width="233px" height="83"> </div> </div> <div class="search"> <from> <label for="search"></label> <input class="input" type="text" name="search" id="search"><input class="btn" type="submit" name="submit" value="百度一下" name="submit"> </from> </div> <div class="bottom-one"> <img src="2.png" width="62" height="62"> <br /> <p class="page1">手机百度</p> </div> <div class="bottom-two"> <a class="page2" href="#">把百度设为主页</a> <a class="page2" href="#">关于百度</a> <a class="page2" href="#">About BaiDu</a> <a class="page2" href="#">百度推广</a> <br /> <span class="page3">©2017 Baidu</span> <a class="page2" href="#">使用百度前必读</a> <span class="page3">京ICP证030173号 </span> <a class="page2" href="#">京公网安备11000002000001号</a> </div> </body> </html>
效果并不是很好，还有百度页面在笔记本和台式机的显示不一样，哎真是学的太浅什么都不懂，以后有时间再改吧
推荐学习基础网站：http://www.imooc.com/learn/9
w3school 可以查基本语法
