html入門之css基礎詳解

今天分享下html入門之css基礎詳解這篇文章，文中根據執行個體編碼詳細介紹，或許對大家的程式設計之路有着一定的參考空間與使用價值，需要的朋友接下來跟着雲南仟龍Mark一起學習一下吧。

我将利用三天的時間段來進行制做京東首頁的靜态網頁實際效果，在其中含有的主要内容有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. fieldset, img, input, button {   
6.     border: none;   
9.     outline-style: none;   
11. ul, ol {   
12.     list-style: none;   
14. /*去掉原樣式中的小黑點*/   
15. input {   
16.     padding-top: 0;   
17.     padding-bottom: 0;   
18.     font-family: "SimSun", "宋體";   
20. select, input {   
21.     vertical-align: middle;   
23. /*輸入字居中顯示*/   
24. select, input, textarea {   
25.     font-size: 12px;   
28. /**/   
29. textarea {   
30.     resize: none;   
32. /*防止拖動*/   
33. img {   
34.     border: 0;   
35.     vertical-align: middle; /*  去掉圖檔底部預設的3像素空白縫隙*/   
37. table {   
38.     border-collapse: collapse; /*合并外連線*/   
40. body {   
41.     font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*unitedCode的寫法，宋體的寫法*/   
42.     color: #666; /*150%基于目前字型尺寸的百分比行間距*/   
43.     background: #fff;   
45. .clearfix:before, .clearfix:after {   
46.     /*清除浮動，最好最标準的寫法*/   
47.     content: "";   
48.     display: table;   
50. .clearfix:after {   
51.     clear: both;   
53. .clearfix {   
54.     *zoom: 1; /*IE/7/6*/  /*相容IE6下的寫法*/   
56. a {   
57.     color: #666;   
58.     text-decoration: none;   
60. a:hover {   
61.     color: #C81623;   
63. h1, h2, h3, h4, h5, h6 {   
65.     font-weight: normal;   
66.     font-size: 100%;   
68. s, i, em {   
69.     font-style: normal;   
72. .col-red {   
73.     color: #C81623 !important;/*京東主色調*/   
75. /*公共類*/   
76. .w {   
77.     /*版心 提取 */   
78.     width: 1210px;   
79.     margin: 0 auto;   
81. .fl {   
82.     float: left;   
84. .fr {   
85.     float: right;   
87. .al {   
88.     text-align: left;   
90. .ac {   
91.     text-align: center;   
93. .ar {   
94.     text-align: right;   
96. .hide {   
97.     display: none;   
98. }  

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

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.僞元素或是雙僞元素清除法

4.     display: table: http://www.qlyl1688.com ;   

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

定位元素的層級問題：

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

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

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

另外要注意，position:relative依舊會占據标準流中的位置，會導緻其他内容無法在其層級上顯示。

透明度opacity

Opacity:有相容性問題，而且不但讓背景顔色透明，而且還讓裡面的内容也透明

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

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

相鄰元素的層級問題

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*/   
15.         div:hover {   
16.             border-color: red;   
17.             position: relative;   
18.             z-index: 1;   
20.     </style>  
21. </head>  
22. <body>  
23. <div></div>  
28. </body>