減少很多不必要的代碼，html+css可以很方便的進行網(wǎng)頁的排版布局。小伙伴們收藏好哦~

一.文本設置

1、font-size: 字號參數(shù)

2、font-style: 字體格式

3、font-weight: 字體粗細

4、顏色屬性

color: 參數(shù)

注意使用網(wǎng)頁安全色

二、超鏈接設置

text-decoration: 參數(shù)

主要用途是改變?yōu)g覽器顯示文字鏈接時的下劃線。

參數(shù)取值范圍：

• underline：為文字加下劃線

• overline：為文字加上劃線

• line-through：為文字加刪除線

• blink：使文字閃爍

• none：不顯示上述任何效果

三、背景

1、背景顏色

background-color: 參數(shù)

2、背景圖片

background-image: url(URL)

• URL就是背景圖片的存放路徑，none表示無。

3、背景圖片重復

background-repeat: 參數(shù)

參數(shù)取值范圍 ：

• no-repeat：不重復平鋪背景圖片

• repeat-x：使圖片只在水平方向上平鋪

• repeat-y：使圖片只在垂直方向上平鋪

如果不指定背景圖片重復屬性，瀏覽器默認的是背景圖片向水平、垂直兩個方向上平鋪。

4、背景圖片固定

背景圖片固定控制背景圖片是否隨網(wǎng)頁的滾動而滾動。如果不設置背景圖片固定屬性，瀏覽器默認背景圖片隨網(wǎng)頁的滾動而滾動。為了避免過于花哨的背景圖片在滾動時轉移瀏覽者的注意力，一般都設為固定

background-attachment: 參數(shù)

參數(shù)取值范圍：

• fixed：網(wǎng)頁滾動時，背景圖片相對于瀏覽器的窗口而言，固定不動

• scroll：網(wǎng)頁滾動時，背景圖片相對于瀏覽器的窗口而言，一起滾動

四、區(qū)塊

1、單詞間距

word-spacing: 間隔距離

2、字母間距

letter-spacing: 字母間距

3、文本對齊

text-align: 參數(shù)

參數(shù)的取值：

• left：左對齊

• right：右對齊

• center：居中對齊

• justify：相對左右對齊

4、垂直對齊

• vertical-align: 參數(shù)

• top：頂對齊

• bottom：底對齊

• text-top：相對文本頂對齊

• text-bottom：相對文本底對齊

• baseline：基準線對齊

• middle：中心對齊

• sub：以下標的形式顯示

• super：以上標的形式顯示

5、文本縮進

text-indent: 縮進距離

12px相當于一個文字距離

6、空格

white-space: 參數(shù)

• normal 正常

• pre 保留

• nowrap 不換行

7、顯示樣式

display: 參數(shù)

參數(shù)取值范圍：

• block：塊級元素，在對象前后都換行

• inline：在對象前后都不換行

• list-item：在對象前后都換行，增加了項目符號

• none：無顯示

五、方框

• height 高度

• width 寬度

• padding 內(nèi)邊距

• margin 外邊距

• float（浮動）：可以讓塊級元素在一行中排列，例如橫向菜單。

• clear 清除浮動

六、邊框

1、樣式

border-style 參數(shù)

邊框樣式的參數(shù)：

• none：無邊框

• dotted：邊框為點線

• dashed：邊框為長短線

• solid：邊框為實線

• double：邊框為雙線

2、寬度

border-width:參數(shù)

3、顏色

border-color:參數(shù)

七、列表

list-style-type:列表樣式

不同瀏覽器的列表符可能不相同，可能會影響到網(wǎng)頁，所以網(wǎng)頁中的列表大多都是由背景圖片顯示。

控制用戶界面的樣式

八、鼠標

cursor:鼠標形狀參數(shù)

CSS鼠標形狀參數(shù)表：

鼠標形狀：CSS代碼

style="cursor:hand" 　　　　　手形 style="cursor:crosshair" 　　十字形 style="cursor:text" 　　　　　文本形 style="cursor:wait" 　　　　　沙漏形 style="cursor:move" 　　　　十字箭頭形： style="cursor:help" 　　　　　問號形 style="cursor:e-resize" 　　　右箭頭形 style="cursor:n-resize" 　　　上箭頭形 style="cursor:nw-resize" 　　左上箭頭形 style="cursor:w-resize" 　　　左箭頭形 style="cursor:s-resize" 　　　下箭頭形  style="cursor:se-resize" 　　右下箭頭形  style="cursor:sw-resize" 　　左下箭頭形

總結：

用常用HTML+CSS的代碼做一個漂亮簡單的個人網(wǎng)頁，小伙伴來試試。

推薦學習：CSS視頻教程