CSS3平滑過渡效果讓寬度向左滑動(dòng)的代碼為：
成都創(chuàng)新互聯(lián)擁有一支富有激情的企業(yè)網(wǎng)站制作團(tuán)隊(duì)，在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)深耕十年，專業(yè)且經(jīng)驗(yàn)豐富。十年網(wǎng)站優(yōu)化營(yíng)銷經(jīng)驗(yàn)，我們已為1000+中小企業(yè)提供了網(wǎng)站制作、成都做網(wǎng)站解決方案，按需策劃設(shè)計(jì)，設(shè)計(jì)滿意，售后服務(wù)無憂。所有客戶皆提供一年免費(fèi)網(wǎng)站維護(hù)!
!DOCTYPE?html
html
head
style?
div#transitionhovertree
{
float:?right;
width:100px;
height:100px;
background:blue;
transition:width?2s;
-moz-transition:width?2s;?/*?Firefox?4?*/
-webkit-transition:width?2s;?/*?Safari?and?Chrome?*/
-o-transition:width?2s;?/*?Opera?*/
}
div#transitionhovertree:hover
{
width:300px;
}
/style
/head
body
div?id="transitionhovertree"/div
/body
/html
CSS即層疊樣式表（Cascading?StyleSheet）。 在網(wǎng)頁制作時(shí)采用層疊樣式表技術(shù)，可以有效地對(duì)頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。
CSS3是CSS技術(shù)的升級(jí)版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。
1、div左對(duì)齊條件與方法只需要對(duì)要靠左對(duì)齊（局左）的div樣式加float:left即可，這里新建一個(gè)html文件，創(chuàng)建一個(gè)div容器并給它一個(gè)class屬性，容器里面是兩個(gè)div，一個(gè)靠左對(duì)齊，一個(gè)靠右，以示區(qū)別：
2、接下來設(shè)置css樣式，在style標(biāo)簽中，設(shè)置div的float值為left，就實(shí)現(xiàn)左對(duì)齊了，最后在給div高度，寬度，邊框?qū)傩栽O(shè)置值，右邊的div除了float設(shè)為right，其他都是一樣的：
3、最后來到瀏覽器中，可以看到div在瀏覽器中是居左的，另一個(gè)是居右的：
文本居左對(duì)齊，兩端對(duì)齊，靠右對(duì)齊，或者說居中對(duì)齊，通用一個(gè)屬性：text-align
text-align參數(shù)值與說明：
left：內(nèi)容左對(duì)齊。
center：內(nèi)容居中對(duì)齊。
right：內(nèi)容右對(duì)齊。
justify：內(nèi)容兩端對(duì)齊，但對(duì)于強(qiáng)制打斷的行（被打斷的這一行）及最后一行（包括僅有一行文本的情況，因?yàn)樗仁堑谝恍幸彩亲詈笠恍校┎蛔鎏幚?。（CSS3）
start：內(nèi)容對(duì)齊開始邊界。（CSS3）
end：內(nèi)容對(duì)齊結(jié)束邊界。（CSS3）
match-parent：這個(gè)值和 inherit 表現(xiàn)一致，只是該值繼承的 start 或 end 關(guān)鍵字是針對(duì)父母的 ' direction ' 值并計(jì)算的，計(jì)算值可以是 left 和 right 。（CSS3）
justify-all：效果等同于 justify，但還會(huì)讓最后一行也兩端對(duì)齊。（CSS3）
語法擴(kuò)展：
這里需要注意的一點(diǎn)是：設(shè)置或檢索對(duì)象中內(nèi)容的水平對(duì)齊方式。
1、塊級(jí)元素的文本是一些堆疊的線框
2、大部分瀏覽器要使得 ' text-align ' 的justify兩端對(duì)齊生效，需要在漢字間插入有空白，如空格；
3、塊內(nèi)的最后一行文本（包括塊內(nèi)僅有一行文本的情況，這時(shí)既是第一行也是最后一行）及被強(qiáng)制打斷的行，其兩端對(duì)齊需使用 ' text-align-last '；
4、IE瀏覽器下，如果 ' text-align-last ' 要生效，必須先定義 ' text-align ' 為justify；
用css 設(shè)置頁面居左，首先我們需要寫好一個(gè)div然后設(shè)置好它的寬高，然后在使用margin來操作，使它距離瀏覽器的左邊為0就行了，marign的用法如圖：
添加一個(gè)border方便觀察，具體看代碼：
html
head
style
.div1{ ? ? ? ? ? ? ? ? ? ?
width:600px;
height:200px;
font-size:13px;
border:1px solid #f00;
margin:0px;
}
/head
body
div class='div1'
p我是測(cè)試文字/p
/div
/body
/html
1、新建html文件。
2、創(chuàng)建兩個(gè)div，并賦予id。
3、為兩個(gè)div設(shè)置寬高和背景，并設(shè)置左右浮動(dòng)。
4、預(yù)覽效果如圖。
5、創(chuàng)建第三個(gè)div。
6、為第三個(gè)div設(shè)置寬高和背景。
7、預(yù)覽效果如圖。
注意事項(xiàng)：
隨著HTML的成長(zhǎng)，為了滿足頁面設(shè)計(jì)者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。于是CSS便誕生了。
重慶分公司
重慶分公司
