我將利用三天的時(shí)間來(lái)完成制作京東首頁(yè)的靜態(tài)頁(yè)面效果，其中包含的內(nèi)容有html以及css。

1、在開(kāi)發(fā)進(jìn)行之前，首先要配置開(kāi)發(fā)環(huán)境：我們需要安裝sublime webstorm vscode Hbuilder atom等開(kāi)發(fā)軟件，選擇其一即可。我所使用的是webstorm。

2、在主文件夾中建立相關(guān)的項(xiàng)目文件夾 ：為了將與項(xiàng)目相關(guān)的文件放在一塊，便于管理和以后的維護(hù)。

其中：包括與項(xiàng)目相關(guān)的一些文件

主頁(yè)或是首頁(yè) index.html default.html

Css文件夾 css文件的

 Base.css global.css

Images文件夾 用來(lái)放置網(wǎng)站中的所有的圖片

Js文件

音頻或是視頻文件

3、在這之后我們要進(jìn)行樣式初始化，一般所有網(wǎng)站開(kāi)發(fā)之前都會(huì)進(jìn)行樣式初始化，例如淘寶、京東這樣的大網(wǎng)站，都有自己的樣式初始化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; /*去掉原樣式中的小黑點(diǎn)*/ 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; /*防止拖動(dòng)*/ img {  border: 0;  vertical-align: middle; /* 去掉圖片底部默認(rèn)的3像素空白縫隙*/ table {  border-collapse: collapse; /*合并外連線*/ body {  font: 12px/150% Arial, Verdana, /5b8b/4f53 /*unitedCode的寫法，宋體的寫法*/  color: #666; /*150%基于當(dāng)前字體尺寸的百分比行間距*/  background: #fff; .clearfix:before, .clearfix:after {  /*清除浮動(dòng)，最好最標(biāo)準(zhǔn)的寫法*/  content:  display: table; .clearfix:after {  clear: both; .clearfix {  *zoom: 1; /*IE/7/6*/ /*兼容IE6下的寫法*/  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;/*京東主色調(diào)*/ /*公共類*/ .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; }

這樣可以方便開(kāi)發(fā)人員對(duì)各個(gè)標(biāo)簽的樣式的初始化以及公共類的重用。

4、分析網(wǎng)站結(jié)構(gòu)

做網(wǎng)站的時(shí)候也有一個(gè)規(guī)范或是通例

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

在寫頁(yè)面的時(shí)候，一般考慮使用標(biāo)準(zhǔn)流的元素，其次才使用浮動(dòng)或是定位。

就在標(biāo)準(zhǔn)流元素當(dāng)中，寬高是最穩(wěn)定的，其實(shí)才使用padding,最后或者可以使用margin.

我們網(wǎng)站結(jié)構(gòu)中的任何標(biāo)簽 都可以看成是一個(gè)盒模型，都可以設(shè)置寬高，只是有的元素設(shè)置了寬高之后，不起作用。

要想讓行內(nèi)元素的寬高起作用：

1. 將行內(nèi)元素轉(zhuǎn)換成塊級(jí)元素或是行內(nèi)塊元素

2. 浮動(dòng) 脫標(biāo)

3. 定位 脫標(biāo)

在布局行內(nèi)塊元素時(shí)，行內(nèi)塊元素之間有默認(rèn)的幾像素的間距。這幾像素的間距只能用浮動(dòng)來(lái)清除。

定位有四種：

Fixed absolute relative static

一般我們?cè)诜治鼍W(wǎng)站結(jié)構(gòu)時(shí)，使用火狐瀏覽器可以將這個(gè)網(wǎng)頁(yè)截圖之后保存下來(lái)：

然后我們可以使用fireworks來(lái)提取網(wǎng)站中的具體內(nèi)容的寬高、顏色等。

Fw的常用快捷鍵：

I 滴管工具 吸取顏色

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

Z 放大鏡工具

V 移動(dòng)

A 指針工具

常用的復(fù)合屬性：

Background

mso-char-indent-count:3.4900; 浮動(dòng)的原因就是因?yàn)楦负凶記](méi)有高度，原來(lái)的高度是靠標(biāo)準(zhǔn)流中的子元素?fù)纹饋?lái)，但是子元素浮動(dòng)了之后 ，脫離標(biāo)準(zhǔn)流了，造成父級(jí)元素的高度為0;

1.給父盒子設(shè)置一個(gè)高度

2.Clear: both

3.Overflow: hidden 觸發(fā)了BFC模式 也可以用來(lái)清除浮動(dòng)

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

.clearfix:before, .clearfix:after {  /*清除浮動(dòng)，最好最標(biāo)準(zhǔn)的寫法*/  content:  display: table; .clearfix:after {  clear: both; .clearfix {  *zoom: 1; /*IE/7/6*/ /*兼容IE6下的寫法*/ }

（一般常用偽元素的方法來(lái)清除浮動(dòng)）

定位元素的層級(jí)問(wèn)題：

如果只給一個(gè)元素絕對(duì)定位，而不寫trbl值的話，會(huì)以原位顯示

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

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

另外要注意，position:relative依舊會(huì)占據(jù)標(biāo)準(zhǔn)流中的位置，會(huì)導(dǎo)致其他內(nèi)容無(wú)法在其層級(jí)上顯示。

透明度opacity

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

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

僅讓背景色透明，內(nèi)容不透明

相鄰元素的層級(jí)問(wèn)題

淘寶網(wǎng)頁(yè)中鼠標(biāo)移入后邊框閃現(xiàn)效果

 style  * {  margin: 0;  padding: 0;  p {  width: 200px;  height: 500px;  border: 10px solid blue;  float: left;  /*margin-right: 10px;*/  margin-left: -10px;  position: relative; /*定位了的元素，默認(rèn)的都會(huì)有層級(jí)的概念，而且默認(rèn)的層級(jí)都是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 

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php 其它相關(guān)文章！

相關(guān)閱讀：

HTML文本格式化的實(shí)例詳解

html里的列表標(biāo)簽有哪些？

html的有序列表、無(wú)序列表與定義列表應(yīng)該如何使用

以上就是html以及css的常用用法的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。