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

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

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

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

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

Css文件夾 css文件的

             Base.css     global.css

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

Js文件

音頻或是視頻文件

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

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {   
    margin: 0;   
    padding: 0;   
}   
  
fieldset, img, input, button {   
    border: none;   
    padding: 0;   
    margin: 0;   
    outline-style: none;   
}   
  
ul, ol {   
    list-style: none;   
}   
  
/*去掉原樣式中的小黑點*/   
input {   
    padding-top: 0;   
    padding-bottom: 0;   
    font-family: "SimSun", "宋體";   
}   
  
select, input {   
    vertical-align: middle;   
}   
  
/*輸入字居中顯示*/   
select, input, textarea {   
    font-size: 12px;   
    margin: 0;   
}   
  
/**/   
textarea {   
    resize: none;   
}   
  
/*防止拖動*/   
img {   
    border: 0;   
    vertical-align: middle; /*  去掉圖片底部默認的3像素空白縫隙*/   
}   
  
table {   
    border-collapse: collapse; /*合并外連線*/   
}   
  
body {   
    font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*unitedCode的寫法，宋體的寫法*/   
    color: #666; /*150%基于當前字體尺寸的百分比行間距*/   
    background: #fff;   
}   
  
.clearfix:before, .clearfix:after {   
    /*清除浮動，最好最標準的寫法*/   
    content: "";   
    display: table;   
}   
  
.clearfix:after {   
    clear: both;   
}   
  
.clearfix {   
    *zoom: 1; /*IE/7/6*/  /*兼容IE6下的寫法*/   
}   
  
a {   
    color: #666;   
    text-decoration: none;   
}   
  
a:hover {   
    color: #C81623;   
}   
  
h1, h2, h3, h4, h5, h6 {   
    text-decoration: none;   
    font-weight: normal;   
    font-size: 100%;   
}   
  
s, i, em {   
    font-style: normal;   
    text-decoration: none;   
}   
  
.col-red {   
    color: #C81623 !important;/*京東主色調*/   
}   
  
/*公共類*/   
.w {   
    /*版心 提取 */   
    width: 1210px;   
    margin: 0 auto;   
}   
  
.fl {   
    float: left;   
}   
  
.fr {   
    float: right;   
}   
  
.al {   
    text-align: left;   
}   
  
.ac {   
    text-align: center;   
}   
  
.ar {   
    text-align: right;   
}   
  
.hide {   
    display: none;   
}

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

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

.clearfix:before, .clearfix:after {   
    /*清除浮動，最好最標準的寫法*/   
    content: "";   
    display: table;   
}   
  
.clearfix:after {   
    clear: both;   
}   
  
.clearfix {   
    *zoom: 1; /*IE/7/6*/  /*兼容IE6下的寫法*/   
}

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

定位元素的層級問題：

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

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

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

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

透明度opacity

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

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

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

相鄰元素的層級問題

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

<style>  
        * {   
            margin: 0;   
            padding: 0;   
        }   
        p {   
            width: 200px;   
            height: 500px;   
            border: 10px solid blue;   
            float: left;   
            /*margin-right: 10px;*/   
            margin-left: -10px;   
            position: relative; /*定位了的元素，默認的都會有層級的概念，而且默認的層級都是0*/   
        }   
        p:hover {   
            border-color: red;   
            position: relative;   
            z-index: 1;   
        }   
    </style>  
</head>  
<body>  
<p></p>  
<p></p>  
<p></p>  
<p></p>  
<p></p>  
</body>

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

HTML文本格式化的實例詳解

html里的列表標簽有哪些？

html的有序列表、無序列表與定義列表應該如何使用

以上就是html以及css的常用用法的詳細內容，更多請關注php中文網其它相關文章！