承接上篇文章，本文小編為您繼續書寫文欄位落的相關內容。主要內容如下：
接下來只是簡單的幾句代碼可以展示簡單的網頁效果。其實CSS代碼本身就是用最簡單的語言來控制儘可能多的格式。
1、水平對齊：text-align
這是分別採用靠左對齊、靠右對齊、置中對齊的三種效果：
代碼：
<html><head><style>p{ font-size:12px; }p.left{ text-align:left; }/* 靠左對齊 */p.right{ text-align:right; }/* 靠右對齊 */p.center{ text-align:center; }/* 置中對齊 */p.justify{ text-align:justify; }/* 左右對齊 */</style> </head><body><p class="left">這個段落採用靠左對齊的方式，text-align:left，因此文字都採用靠左對齊。<br>床前明月光，疑是地上霜。<br>舉頭望明月，低頭思故鄉。<br>李白</p><p class="right">這個段落採用靠右對齊的方式，text-align:right，因此文字都採用靠右對齊。<br>床前明月光，疑是地上霜。<br>舉頭望明月，低頭思故鄉。<br>李白</p><p class="center">這個段落採用置中對齊的方式，text-align:center，因此文字都採用置中對齊。<br>床前明月光，疑是地上霜。<br>舉頭望明月，低頭思故鄉。<br>李白</p><p class="justify">這個段落採用靠左對齊的方式，text-align:justify，因此文字都採用靠左對齊。床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。<br>李白</p></body></html>
2、垂直對齊：vertical-align
代碼：
<head><title>垂直對齊</title><style> td.top{ vertical-align:top; }/* 頂端對齊 */ td.bottom{ vertical-align:bottom; }/* 底端對齊 */ td.middle{ vertical-align:middle; }/* 中間對齊 */</style> </head><body><table cellpadding="2" cellspacing="0" border="1"><tr><td><img src="02.jpg" border="0"></td><td class="top">垂直對齊，top</td></tr><tr><td><img src="02.jpg" border="0"></td><td class="bottom">垂直對齊，bottom</td></tr><tr><td><img src="02.jpg" border="0"></td><td class="middle">垂直對齊，middle</td></tr></table></body></html>
3、間距：letter-spacing
代碼：
<html><head><title>字間距</title><style>p.one{font-size:10pt;letter-spacing:-2pt;/* 字間距，絕對數值，負數 */}p.second{ font-size:18px; }p.third{ font-size:11px; }p.second, p.third{letter-spacing: .5em;/* 字間距，相對數值 */}</style> </head><body><p class="one">文字間距1，負數</p><p class="second">文字間距2，相對數值</p><p class="third">文字間距3，相對數值</p></body></html>
4、首字下沉：float
代碼：
<html><head><style>body{background-color:black;/* 背景色 */}p{font-size:15px;/* 文字大小 */color:white;/* 文字顏色 */}p span{font-size:60px;/* 首字大小 */float:left;/* 首字下沉 */padding-right:5px;/* 與右邊的間隔 */font-weight:bold;/* 粗體字 */font-family:黑體;/* 黑體字 */color:yellow;/* 字型顏色 */}</style> </head><body><p><span>人</span>生若只如初見，何事秋風悲畫扇。等閑變卻故人心，卻道故人心易變。</p><p>驪山語罷清宵半，夜雨霖鈴終不怨。何如薄倖錦衣郎，比翼連枝當日願。</p></body></html>
這就像是我們的一種習慣，在寫文章時嚴格注意段落的形式，就好比我們自己寫的文章，部落格等，要是上來就是一整片的大段落，相信是沒有人喜歡讀的，就好像是要被人一口氣讀完你寫的東西。所以用CSS可以省去你很多的力氣，讓你輕鬆的實現美妙的效果。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
