絕對定位百度首頁練習
<!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" 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=""> </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>