html佈局小練習（百度首頁）

時間 2021-01-20

標籤 css html 佈局 post this url spa code orm 欄目 HTML 简体版

原文原文鏈接

絕對定位百度首頁練習css

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>百度練習</title>
 6         <style type="text/css">
 7         .top{float: right;position: absolute;top: 10px;right: 10px;}
 8         .top ul li{display: inline; list-style: none;float:left margin-left: 20px;}
 9          .more{background-color: dodgerblue;color: white;border: 0;}
10          #text1{width:570px;height: 40px;}
11          #baidu{height: 45px;background-color: dodgerblue;color: white;border: 0;}
12          #center{margin-top: 140px;margin-left: 350px;}
13          .under{text-align: center; font-size: smaller;color: darkgrey;position: absolute;left: 450px; bottom: 10px;}
14          .under a{color: darkgrey;}
15         </style>
16         
17     </head>
18     <body>
19     
20         <div class="top"><ul>
21             <li><a href="#">糯米</a></li>
22             <li><a href="#">hao123</a></li>
23             <li><a href="#">地圖</a></li>
24             <li><a href="#">視頻</a></li>
25             <li><a href="#">貼吧</a></li>
26             <li><a href="#">個人帳號</a></li>
27             <li><a href="#">設置</a></li>
28             <li><input type="button" class="more" value="更多產品" /></li>
29         </ul> 
30         </div>
31         
32         <div id="center">
33             <div class="pic">
34             <img src="../img/baidu.jpg" />    
35             </div>
36             
37         <div class="center">
38                 <input id="text1" type="text" /><input id="baidu" type="button" value="百度一下"   />
39         </div>
40         </div>
41         
42         
43         <div class="under">
44             <a href="#">設爲首頁</a>
45             ©2016 Baidu <a href="#">使用前必讀</a> <a href="#">意見反饋</a>
46             京ICP證123456號<br />
47             京安網安備111111111125222001號
48         </div>
49         
50     </body>
51 </html>

頁面稍複雜的一版html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>百度一下,你就知道</title>
 6 <style type="text/css">
 7 
 8 
 9 body,div,form,input{font-size:14px;margin:0;padding:0}
10 a{color:#0000cc}
11 a:active{color:#f90}
12 #top_right{color:#999;font-size:12px;padding:6px 10px;position:absolute;right:0;top:0}
13 #top_right a{font-size:12px}
14 
15 
16 #main{margin:25px auto 100px auto;padding:0 35px;width:530px}
17 #main h1{margin-bottom:4px;text-align:center}
18 #main h1 a img{border:none}
19 #main ul{list-style-type:none;padding:0 0 0 45px;width:410px}
20 #main ul li{float:left;margin-right:18px}
21 #main ul li a.mr{color:#000;font-weight:bold}
22 #search_form{clear:both;margin-left:15px;padding-top:4px}
23 
24 
25 #keyword{
26 background:url(
27 ) no-repeat -304px 0px;
28 border-color:#999 #ccc #ccc #999;
29 border-style:solid;
30 border-width:1px;
31 float:left;
32 font-size:18px;
33 height:30px;
34 line-height:30px;
35 text-indent:10px;
36 width:408px;
37 }
38 
39 
40 #main .search_btn{background:url(
41 ) no-repeat 0 0;border:none;cursor:pointer;float:left;font-size:12px;height:32px;line-height:32px;margin-left:6px;width:95px; }
42 #main .down_btn{}
43 #main p{float:left;margin-top:35px;text-align:center;width:520px; }
44 #cl{clear:both}
45 
46 
47 #footer{margin:50px auto;width:600px}
48 #footer p{font-size:12px;margin-bottom:15px;text-align:center}
49 #footer p.jr{margin-bottom:5px}
50 #footer p a{font-size:12px}
51 #footer p.bq{color:#77c}
52 #footer p.bq a{color:#77c}
53 </style>
54 </head>
55 
56 
57 <body>
58 <div id="top_right">
59 <a href="#">搜索設置</a> | <a href="#">登錄</a> <a href="#">註冊</a>
60 </div>
61 <div id="main">
62 <h1>
63 <a href="#" class="logo"><img src="../img/baidu.jpg"></a></h1>
64 <ul class="nav">
65 <li><a href="#">新聞</a></li>
66 <li><a href="#" class="mr">網頁</a></li>
67 <li><a href="#">貼吧</a></li>
68 <li><a href="#">知道</a></li>
69 <li><a href="#">MP3</a></li>
70 <li><a href="#">圖片</a></li>
71 <li><a href="#">視頻</a></li>
72 <li><a href="#">地圖</a></li>
73 </ul>
74 <form action="#" method="post" id="search_form">
75 <input name="" type="text" id="keyword">
76 <input name="" type="button" value="百度一下" class="search_btn" onmouseout="'this.className='search_btn'" onmousedown="'this.className.down_btn'">
77 </form>
78 <p>
79 <a href="#">空間</a>
80 <a href="#">百科</a>
81 <a href="#">hao123</a> | 
82 <a href="#">更多>></a>
83 </p><div id="cl"></div>
84 </div>
85 <div id="footer">
86 <p>
87 <a href="#">把百度設爲主頁</a>
88 <a href="#">把百度添加到桌面</a>
89 </p><p class="jr">
90 <a href="#">加入百度推廣</a> | <a href="#">搜索風雲榜</a> | <a href="#">關於百度</a> | <a href="#">About Baidu</a>
91 </p>
92 <p class="bq">
93 2012 Baidu <a href="#">使用百度前必讀</a> <a href="#">京ICP證030173號</a>  <img src="">
94 </p>
95 </div>
96 
97 
98 </body>
99 </html>

頁面簡單佈局佈局

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>簡單佈局</title>
  6         <style type="text/css">
  7                 
  8             /*清除默認樣式*/
  9             *{
 10                 margin: 0;
 11                 padding: 0;
 12             }
 13             .header{
 14                 /*設置寬，高，背景色*/
 15                 width:1000px;
 16                 height:100px;
 17                 background-color: yellowgreen;
 18                 /*居中*/
 19                 margin: 0 auto;
 20             }
 21             
 22             .content{
 23                 width: 1000px;
 24                 height: 400px;
 25                 background-color: orange;
 26                 margin: 10px auto;
 27             }
 28             /*中部div的三個分區的設置*/
 29             
 30             .left{
 31                 width: 200px;
 32                 height: 400px;
 33                 background-color: skyblue;
 34                 /*向左浮動*/
 35                 float: left;
 36             }
 37             .center{
 38                 width: 580px;
 39                 /*高度也能夠用%來表示*/
 40                 height: 100%;
 41                 background-color: cadetblue;
 42                 /*向左浮動*/
 43                 float: left;
 44                 
 45                 /*設置水平外邊距*/
 46                 margin: 0 10px;
 47             }
 48             
 49             .centerheader{
 50                 width: 580px;
 51                 height:190px;
 52                 background-color: darkgoldenrod;
 53             }
 54             .centerfooter{
 55                 width: 580px;
 56                 height: 190px;
 57                 background-color: green;
 58                 /*設置上下兩個div之間邊距爲10px*/
 59                 margin-top: 10px;
 60             }
 61             
 62             .right{
 63                 width: 200px;
 64                 height: 400px;
 65                 background-color: grey;
 66                 /*向左浮動
 67                  * 浮動的塊之間沒有邊距，塊與塊之間 margin 爲0                 * 
 68                  * */
 69                 float: left;
 70             }
 71             
 72             .footer{
 73                 /*設置寬，高，背景色*/
 74                 width:1000px;
 75                 height:100px;
 76                 background-color: pink;
 77                 /*居中*/
 78                 margin: 0 auto;
 79             }
 80         </style>
 81     </head>
 82     <body>
 83         <!--頭部div-->
 84         <div class="header"></div>
 85         <!--中間div-->
 86         <div class="content">
 87             <!--中部div水平分區 -->
 88             <div class="left"></div>
 89             <div class="center">
 90                 <!--小中部div垂直分區-->
 91                 <div class="centerheader"></div>
 92                 <div class="centerfooter"></div>
 93             </div>
 94             <div class="right"></div>
 95             
 96         </div>
 97         <!--底部div-->
 98         <div class="footer"></div>
 99         
100     </body>
101 </html>