DIV CSS 佈局教程網

我將利用三天的時間來完成制作京東首頁的靜態頁面效果，其中包含的內容有html以及css。

1、在開發進行之前，首先要配置開發環境：我們需要安裝sublime  webstorm  vscode  Hbuilder  atom等開發軟件，選擇其一即可。我所使用的是webstorm。

2、在主文件夾中建立相關的項目文件夾 ：為了將與項目相關的文件放在一塊，便於管理和以後的維護。

其中：包括與項目相關的一些文件

主頁或是首頁    index.html   default.html

 Css文件夾    css文件的  

             Base.css     global.css

 Images文件夾  用來放置網站中的所有的圖片

 Js文件

 音頻或是視頻文件

3、在這之後我們要進行樣式初始化，一般所有網站開發之前都會進行樣式初始化，例如淘寶、京東這樣的大網站，都有自己的樣式初始化css文件。如：

XML/HTML Code復制內容到剪貼板

1. html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {   
2.     margin: 0;   
3.     padding: 0;   
4. }   
5.   
6. fieldset, img, input, button {   
7.     border: none;   
8.     padding: 0;   
9.     margin: 0;   
10.     outline-style: none;   
11. }   
12.   
13. ul, ol {   
14.     list-style: none;   
15. }   
16.   
17. /*去掉原樣式中的小黑點*/   
18. input {   
19.     padding-top: 0;   
20.     padding-bottom: 0;   
21.     font-family: "SimSun", "宋體";   
22. }   
23.   
24. select, input {   
25.     vertical-align: middle;   
26. }   
27.   
28. /*輸入字居中顯示*/   
29. select, input, textarea {   
30.     font-size: 12px;   
31.     margin: 0;   
32. }   
33.   
34. /**/   
35. textarea {   
36.     resize: none;   
37. }   
38.   
39. /*防止拖動*/   
40. img {   
41.     border: 0;   
42.     vertical-align: middle; /*  去掉圖片底部默認的3像素空白縫隙*/   
43. }   
44.   
45. table {   
46.     border-collapse: collapse; /*合並外連線*/   
47. }   
48.   
49. body {   
50.     font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*unitedCode的寫法，宋體的寫法*/   
51.     color: #666; /*150%基於當前字體尺寸的百分比行間距*/   
52.     background: #fff;   
53. }   
54.   
55. .clearfix:before, .clearfix:after {   
56.     /*清除浮動，最好最標准的寫法*/   
57.     content: "";   
58.     display: table;   
59. }   
60.   
61. .clearfix:after {   
62.     clear: both;   
63. }   
64.   
65. .clearfix {   
66.     *zoom: 1; /*IE/7/6*/  /*兼容IE6下的寫法*/   
67. }   
68.   
69. a {   
70.     color: #666;   
71.     text-decoration: none;   
72. }   
73.   
74. a:hover {   
75.     color: #C81623;   
76. }   
77.   
78. h1, h2, h3, h4, h5, h6 {   
79.     text-decoration: none;   
80.     font-weight: normal;   
81.     font-size: 100%;   
82. }   
83.   
84. s, i, em {   
85.     font-style: normal;   
86.     text-decoration: none;   
87. }   
88.   
89. .col-red {   
90.     color: #C81623 !important;/*京東主色調*/   
91. }   
92.   
93. /*公共類*/   
94. .w {   
95.     /*版心 提取 */   
96.     width: 1210px;   
97.     margin: 0 auto;   
98. }   
99.   
100. .fl {   
101.     float: left;   
102. }   
103.   
104. .fr {   
105.     float: right;   
106. }   
107.   
108. .al {   
109.     text-align: left;   
110. }   
111.   
112. .ac {   
113.     text-align: center;   
114. }   
115.   
116. .ar {   
117.     text-align: right;   
118. }   
119.   
120. .hide {   
121.     display: none;   
122. }  

這樣可以方便開發人員對各個標簽的樣式的初始化以及公共類的重用。

4、分析網站結構

做網站的時候也有一個規范或是通例 

布局的順序一般是從上到下，從左到右

在寫頁面的時候，一般考慮使用標准流的元素，其次才使用浮動或是定位。

就在標准流元素當中，寬高是最穩定的，其實才使用padding,最後或者可以使用margin.

我們網站結構中的任何標簽 都可以看成是一個盒模型，都可以設置寬高，只是有的元素設置了寬高之後，不起作用。

要想讓行內元素的寬高起作用：

1. 將行內元素轉換成塊級元素或是行內塊元素

2. 浮動   脫標  

3. 定位   脫標

在布局行內塊元素時，行內塊元素之間有默認的幾像素的間距。這幾像素的間距只能用浮動來清除。

定位有四種：

Fixed    absolute    relative   static

一般我們在分析網站結構時，使用火狐浏覽器可以將這個網頁截圖之後保存下來：

然後我們可以使用fireworks來提取網站中的具體內容的寬高、顏色等。

Fw的常用快捷鍵：

I      滴管工具   吸取顏色

K     切片工具    量取元素的寬度

Z   放大鏡工具  

V     移動

A     指針工具

常用的復合屬性：

Background

mso-char-indent-count:3.4900;">浮動的原因就是因為父盒子沒有高度，原來的高度是靠標准流中的子元素撐起來，但是子元素浮動了之後 ，脫離標准流了，造成父級元素的高度為0;

1.給父盒子設置一個高度

2.Clear: both

3.Overflow: hidden   觸發了BFC模式 也可以用來清除浮動

4.偽元素或是雙偽元素清除法

XML/HTML Code復制內容到剪貼板

1. .clearfix:before, .clearfix:after {   
2.     /*清除浮動，最好最標准的寫法*/   
3.     content: "";   
4.     display: table;   
5. }   
6.   
7. .clearfix:after {   
8.     clear: both;   
9. }   
10.   
11. .clearfix {   
12.     *zoom: 1; /*IE/7/6*/  /*兼容IE6下的寫法*/   
13. }   
14.   

（一般常用偽元素的方法來清除浮動）

定位元素的層級問題：

如果只給一個元素絕對定位，而不寫trbl值的話，會以原位顯示

定位(相對和絕對或固定)的元素都有一個層級的屬性或是概念。如果定位了的相鄰多個元素，在同一個位置的話，後面的元素默認會壓住前面的元素。如果同樣是定位了的元素，默認他們的層級都是0，只不過後面的元素會壓住前面的元素。如果想讓當前的元素顯示在後面的元素之上，這個時候就需要改變層級的關系,用z-index來改變。

z-index的取值范圍0---9999999，最好是正數，盡量不要用負數。

另外要注意，position:relative依舊會占據標准流中的位置，會導致其他內容無法在其層級上顯示。
 
透明度opacity

Opacity:有兼容性問題，而且不但讓背景顏色透明，而且還讓裡面的內容也透明

background: rgba(0,0,0,.3);

僅讓背景色透明，內容不透明

相鄰元素的層級問題

淘寶網頁中鼠標移入後邊框閃現效果

XML/HTML Code復制內容到剪貼板

1. <style>  
2.         * {   
3.             margin: 0;   
4.             padding: 0;   
5.         }   
6.         div {   
7.             width: 200px;   
8.             height: 500px;   
9.             border: 10px solid blue;   
10.             float: left;   
11.             /*margin-right: 10px;*/   
12.             margin-left: -10px;   
13.             position: relative; /*定位了的元素，默認的都會有層級的概念，而且默認的層級都是0*/   
14.         }   
15.         div:hover {   
16.             border-color: red;   
17.             position: relative;   
18.             z-index: 1;   
19.         }   
20.     </style>  
21. </head>  
22. <body>  
23. <div></div>  
24. <div></div>  
25. <div></div>  
26. <div></div>  
27. <div></div>  
28. </body>  
29.   

這樣就可以通過相鄰元素的層級問題，用hover偽元素來控制邊框的顏色以及其他屬性，達到淘寶那樣的效果。

以上這篇簡單html以及css的用法詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/moyong/archive/2016/07/27/5709491.html