首页 > 代码库 > html布局小练习（百度首页）
html布局小练习（百度首页）
绝对定位百度首页练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度练习</title> <style type="text/css"> .top{float: right;position: absolute;top: 10px;right: 10px;} .top ul li{display: inline; list-style: none;float:left margin-left: 20px;} .more{background-color: dodgerblue;color: white;border: 0;} #text1{width:570px;height: 40px;} #baidu{height: 45px;background-color: dodgerblue;color: white;border: 0;} #center{margin-top: 140px;margin-left: 350px;} .under{text-align: center; font-size: smaller;color: darkgrey;position: absolute;left: 450px; bottom: 10px;} .under a{color: darkgrey;} </style> </head> <body> <div class="top"><ul> <li><a href="#">糯米</a></li> <li><a href="#">hao123</a></li> <li><a href="#">地图</a></li> <li><a href="#">视频</a></li> <li><a href="#">贴吧</a></li> <li><a href="#">我的账号</a></li> <li><a href="#">设置</a></li> <li><input type="button" class="more" value="更多产品" /></li> </ul> </div> <div id="center"> <div class="pic"> <img src="../img/baidu.jpg" /> </div> <div class="center"> <input id="text1" type="text" /><input id="baidu" type="button" value="百度一下" /> </div> </div> <div class="under"> <a href="#">设为首页</a> ©2016 Baidu <a href="#">使用前必读</a> <a href="#">意见反馈</a> 京ICP证123456号<br /> 京安网安备111111111125222001号 </div> </body> </html>
页面稍复杂的一版
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>百度一下,你就知道</title> <style type="text/css"> body,div,form,input{font-size:14px;margin:0;padding:0} a{color:#0000cc} a:active{color:#f90} #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{ background:url( ) 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; } #main .search_btn{background:url( ) 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} </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="../img/baidu.jpg"></a></h1> <ul class="nav"> <li><a href="#">新闻</a></li> <li><a href="#" class="mr">网页</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" onm ouseout="‘this.className=‘search_btn‘" onm ousedown="‘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=""> </p> </div> </body> </html>
页面简单布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单布局</title> <style type="text/css"> /*清除默认样式*/ *{ margin: 0; padding: 0; } .header{ /*设置宽，高，背景色*/ width:1000px; height:100px; background-color: yellowgreen; /*居中*/ margin: 0 auto; } .content{ width: 1000px; height: 400px; background-color: orange; margin: 10px auto; } /*中部div的三个分区的设置*/ .left{ width: 200px; height: 400px; background-color: skyblue; /*向左浮动*/ float: left; } .center{ width: 580px; /*高度也可以用%来表示*/ height: 100%; background-color: cadetblue; /*向左浮动*/ float: left; /*设置水平外边距*/ margin: 0 10px; } .centerheader{ width: 580px; height:190px; background-color: darkgoldenrod; } .centerfooter{ width: 580px; height: 190px; background-color: green; /*设置上下两个div之间边距为10px*/ margin-top: 10px; } .right{ width: 200px; height: 400px; background-color: grey; /*向左浮动 * 浮动的块之间没有边距，块与块之间 margin 为0 * * */ float: left; } .footer{ /*设置宽，高，背景色*/ width:1000px; height:100px; background-color: pink; /*居中*/ margin: 0 auto; } </style> </head> <body> <!--头部div--> <div class="header"></div> <!--中间div--> <div class="content"> <!--中部div水平分区 --> <div class="left"></div> <div class="center"> <!--小中部div垂直分区--> <div class="centerheader"></div> <div class="centerfooter"></div> </div> <div class="right"></div> </div> <!--底部div--> <div class="footer"></div> </body> </html>
html布局小练习（百度首页）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。