Web前端學習第十二天·fighting_HTML頁面設計技巧總結（一）

本文轉載自查看原文 2016-05-27 21:12 1943 CSS/ 前端

公共和個性化樣式的合並

　　靈感：來自京東首頁滾動廣告右邊的圖標，如下圖所示。

　　提取公共部分樣式，個性化的再單獨設置。

示例代碼如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>公共和個性化樣式的合並</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         ul, li {
 9             margin:0px;
10             padding:0px;
11             list-style:none;
12             width:25px;
13             height:25px;
14             margin-bottom:10px;
15         }
16         .bg {
17             background:url(../img/jd.png) no-repeat;
18         }
19         .for2 {
20             background-position:0 -25px;
21             float:left;
22             margin-left:50px;
23         }
24         .for1 {
25             background-position:0 -100px;
26             float:left;
27             margin-left:50px;
28         }
29         .for3 {
30             background-position:0 -50px;
31         }
32         .for4 {
33             background-position:0 -75px;
34         }
35 
36     </style>
37 </head>
38 <body>
39     <ul>
40         <li class="for1 bg">
41 
42         </li>
43         <li class="for2 bg">
44             
45         </li>
46         <li class="for3 bg">
47 
48         </li>
49         <li class="for4 bg">
50 
51         </li>
52     </ul>
53 </body>
54 </html>

運行結果：

分類菜單布局的實現

　　從整體上搭好框架，如下：（我一定是來搞笑的……）

　　“上部分類”做父容器。“左分類”使用沖出層樣式，設定它的高度比父容器的高度還要高。

　　“廣告”使用margin-left，空出“做分類”的寬度，於是露出“廣告”部分。

　　“快報”是另外的一個層，使用position定位到最右邊。

　　……………………

　　於是基本框架結構圖應該如下：

我畫起來圖畫自己都害怕……

寫起來代碼更害怕！

示例代碼如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>京東分類菜單框架設計</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         .w {
 9             width:980px; /*一般不使用100%，通常用固定的像素值.設置為公共屬性*/
10         }
11         #menu {
12             height: 35px;
13             line-height: 35px;
14             border: 2px solid green;
15             position:relative;/*因為子元素需要精確絕對定位*/
16         }
17 
18             #menu #y-menu {
19                 height:350px;
20                 width:200px;
21                 border:2px solid red;
22                 position:absolute;
23                 left:0;
24                 top:0;
25             }
26             #menu #x-menu {
27                 height:35px;
28                 line-height:35px;
29                 background-color:pink;
30                 position:absolute;
31                 right:0;
32                 width:776px;
33             }
34         #ad {
35             height:314px;
36             border:2px solid blue;
37         }
38             #ad #ad-img {
39                 width:550px;
40                 height:315px;
41                 margin-left:202px;
42                 background-color:purple;
43             }
44             #report #report-content {
45                 width:227px;
46                 height:314px;
47                 background-color:orange;
48                 position:absolute;
49                 right:-2px;
50                 top:-316px;
51             }
52         #report {
53             background-color:gray;
54             position:relative;/*方便調整子元素的位置，用top值等於負數調整到上面去，此時此父容器高度為0*/
55         }
56     </style>
57 </head>
58 <body>
59     <!--橫向和縱向分類菜單-大層固定-->
60     <div id="menu" class="w">
61         <!--縱向菜單-->
62         <div id="y-menu">
63 
64         </div>
65         <!--橫向菜單-->
66         <div id="x-menu">
67 
68         </div>
69     </div>
70     <!--廣告-->
71     <div id="ad" class="w">
72         <!--圖片-->
73         <div id="ad-img">
74 
75         </div>
76     </div>
77     <!--快報-->
78     <div id="report" class="w">
79         <div id="report-content">
80             
81         </div>
82     </div>
83 </body>
84 </html>

運行結果如下：

父容器高度為0

　　為什么有子元素，而父容器的高度依然是0？

　　　　情況一：子元素為絕對定位，也就是說position：absolute

示例代碼如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>父容器高度為0的兩種情況</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         #parent {
 9             background-color:red;
10         }
11         #child {
12             position:absolute;
13             background-color:pink;
14         }
15     </style>
16 </head>
17 <body>
18     <div id="parent">
19         <div id="child">這是一個子元素</div>
20     </div>
21 </body>
22 </html>

運行結果：

　　在京東分類菜單布局的實現的案例中，“快報”部分就是使用了這種思想：它把“快報”部分設置為position：absolute后，“快報”部分的父容器高度變成了0。此時才能在整個分類菜單的下面顯示新的div框架，用來顯示物品的列表，中間並沒有“快報”父元素所占用的空隙。示例代碼如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>京東分類菜單框架設計</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         .w {
 9             width:980px; /*一般不使用100%，通常用固定的像素值.設置為公共屬性*/
10         }
11         #menu {
12             height: 35px;
13             line-height: 35px;
14             border: 2px solid green;
15             position:relative;/*因為子元素需要精確絕對定位*/
16         }
17 
18             #menu #y-menu {
19                 height:350px;
20                 width:200px;
21                 border:2px solid red;
22                 position:absolute;
23                 left:0;
24                 top:0;
25             }
26             #menu #x-menu {
27                 height:35px;
28                 line-height:35px;
29                 background-color:pink;
30                 position:absolute;
31                 right:0;
32                 width:776px;
33             }
34         #ad {
35             height:314px;
36             border:2px solid blue;
37         }
38             #ad #ad-img {
39                 width:550px;
40                 height:315px;
41                 margin-left:202px;
42                 background-color:purple;
43             }
44             #report #report-content {
45                 width:227px;
46                 height:314px;
47                 background-color:orange;
48                 position:absolute;
49                 right:-2px;
50                 top:-316px;
51             }
52         #report {
53             background-color:gray;
54             position:relative;/*方便調整子元素的位置，用top值等於負數調整到上面去，此時此父容器高度為0*/
55         }
56     </style>
57 </head>
58 <body>
59     <!--橫向和縱向分類菜單-大層固定-->
60     <div id="menu" class="w">
61         <!--縱向菜單-->
62         <div id="y-menu">
63 
64         </div>
65         <!--橫向菜單-->
66         <div id="x-menu">
67 
68         </div>
69     </div>
70     <!--廣告-->
71     <div id="ad" class="w">
72         <!--圖片-->
73         <div id="ad-img">
74 
75         </div>
76     </div>
77     <!--快報-->
78     <div id="report" class="w">
79         <div id="report-content">
80             
81         </div>
82     </div>
83     <div class="w" style="height:200px;line-height:200px; background-color:gray;text-align:center;">
84         <b style="font-size:larger;">這部分在“快報”父容器div的下邊</b>
85     </div>
86 </body>
87 </html>

運行結果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Web前端學習第十三天·fighting_HTML頁面設計技巧總結（二） swift學習第十二天：類的屬性定義 Web前端學習第二天·fighting_標簽的子標簽敏捷結果30天之第二十二天：設計你的一天 C語言Windows程序設計 -> 第十二天 -> 使用計時器 linux 學習第十二天（網絡會話connection、bond、ssh配置） Web前端學習第一天·fighting_與網頁設計相關的名詞術語 Web前端學習第十四天·fighting_JavaScript概述十二天深入理解計算機系統（三）十五天精通WCF——第十二天說說wcf中的那幾種序列化