這篇部落格，咱們繼續來進行進行CSS+DIV的其他效果來進行分析，起碼能做到夠用，對吧。前面講了些很基礎的東西，詳情請看：
精通CSS.DIV網頁樣式與布局（二）—— 段落
精通CSS.DIV網頁樣式與布局（二）
精通CSS.DIV網頁樣式與布局（一）
咱們之前講了文字的效果，我們這次來講圖片效果，我們看是如何控製圖片顯示的效果。
圖片樣式：
這部分的內容中，我們先講講圖片的邊框，先看看代碼：
<html><head><title>邊框</title><style><!--img.test1{border-style:dotted;/* 點畫線 */border-color:#FF9900;/* 邊框顏色 */border-width:5px;/* 邊框粗細 */}img.test2{border-style:dashed;/* 虛線 */border-color:blue;/* 邊框顏色 */border-width:2px;/* 邊框粗細 *}--></style> </head><body><img src="banana.jpg" class="test1"><img src="banana.jpg" class="test2"></body></html>
我們從代碼裡邊知道，border-style:控制線條的樣式（是點畫線還是虛線）；border-color：很顯然就是控制顏色了；border-width：控制邊框的粗細程度。同時我還想說的是，border控制邊框的時候，不但可以採用代碼裡邊那樣的方式，同時我們可以把所有的代碼合成一句，我們可以這麼寫：我們看test2的代碼：
<html><head><title>邊框</title><style><!--img.test1{border-style:dotted;/* 點畫線 */border-color:#FF9900;/* 邊框顏色 */border-width:5px;/* 邊框粗細 */}img.test2{border:dashed 2px blue;}--></style> </head><body><img src="banana.jpg" class="test1"><img src="banana.jpg" class="test2"></body></html>
這樣就變的很簡潔了，而且實現的效果完全一樣；我們看看效果：
border還有一個比較強大的功能就是能單獨修改某一條邊框，比如我們這麼寫：
<html><head><title>邊框</title><style><!--img.test1{border-style:dotted;/* 點畫線 */border-color:#FF9900;/* 邊框顏色 */border-width:5px;/* 邊框粗細 */}img.test2{border-left:dashed 2px blue;border-right:dotted 2px red;}--></style> </head><body><img src="banana.jpg" class="test1"><img src="banana.jpg" class="test2"></body></html>
那麼這個如下：
這樣就更方便了我們的設計了。
我們接下來看看，圖片的縮放：
我們也是從代碼開始出發：
<html><head><title>圖片縮放</title><style><!--img.test1{width:50%;/* 相對寬度 */}--></style> </head><body><img src="pear.jpg" class="test1"></body></html>
這個百分之五十表示目前這個圖片的寬度相對於他的父元素body的寬度為百分之五十，也就是說他為整個瀏覽器的寬度的一半。他可以保證不同的瀏覽器不會因為他的變化而使得整個網頁發生變化，他永遠保持著跟瀏覽器一個相對的寬度。
我們看這個圖片的效果：
如果我們改為一個固定的寬度，比如把50%改為80px，那麼我們在變化瀏覽器的時候，發現他將不再變化。我們繼續吧height值設定為60%。
看個：大家自己來對比一下，大家自己必須得動手才能出效果。
圖片的對齊：
橫向對齊和縱向對齊兩方面，我們先看橫向對齊：我們採用了text-align來實現這個效果，看看代碼和顯示效果：
<html><head><title>水平對齊</title> </head><body><table width="100%" border="1"><tr><td style="text-align:left;"><img src="building.jpg"></td></tr><tr><td style="text-align:center;"><img src="building.jpg"></td></tr><tr><td style="text-align:right;"><img src="building.jpg"></td></tr></table></body></html>
效果：
縱向對齊不像橫向對齊那樣，縱向對齊數值很多，我們把這些值進行了一一對比，我們看那代碼：
<html><head><title>豎直對齊</title><style type="text/css"><!--p{ font-size:15px; }img{ border: 1px solid #000055; }--></style> </head><body><p>豎直對齊<img src="donkey.jpg" style="vertical-align:baseline;">方式:baseline<img src="miki.jpg" style="vertical-align:baseline;">方式</p><p>豎直對齊<img src="donkey.jpg" style="vertical-align:bottom;">方式:bottom<img src="miki.jpg" style="vertical-align:bottom;">方式</p><p>豎直對齊<img src="donkey.jpg" style="vertical-align:middle;">方式:middle<img src="miki.jpg" style="vertical-align:middle;">方式</p><p>豎直對齊<img src="donkey.jpg" style="vertical-align:sub;">方式:sub<img src="miki.jpg" style="vertical-align:sub;">方式</p><p>豎直對齊<img src="donkey.jpg" style="vertical-align:super;">方式:super<img src="miki.jpg" style="vertical-align:super;">方式</p><p>豎直對齊<img src="donkey.jpg" style="vertical-align:text-bottom;">方式:text-bottom<img src="miki.jpg" style="vertical-align:text-bottom;">方式</p><p>豎直對齊<img src="donkey.jpg" style="vertical-align:text-top;">方式:text-top<img src="miki.jpg" style="vertical-align:text-top;">方式</p><p>豎直對齊<img src="donkey.jpg" style="vertical-align:top">方式:top<img src="miki.jpg" style="vertical-align:top">方式</p></body></html>
：
圖文混排：
文字環繞：我們從代碼出發，
<html><head><title>圖文混排</title><style type="text/css"><!--body{background-color:#000000;/* 頁面背景顏色 */margin:0px;padding:0px;}img{float:left;/* 文字環繞圖片 *//*margin-right:50px;/* 右側距離 *//*margin-bottom:25px;/* 下端距離 */}p{color:#FFFF00;/* 文字顏色 */margin:0px;padding-top:10px;padding-left:5px;padding-right:15px;margin-left:auto;margin-right:auto; }span{float:left;/* 首字放大 */font-size:85px;font-family:黑體;margin:0px;padding-right:5px;}--></style> </head><body><img src="中秋節.jpg" border="0"><p><span>中秋</span>中秋節，中國傳統節日之一，為每年農曆八月十五。八月為秋季的第二個月，古時稱為仲秋，因處於秋季之中和八月之中，故民間稱為中秋，又稱秋夕、八月節、八月半、月夕、月節，又因為這一天月亮滿圓，象徵團圓，又稱為團圓節。</p></body></html>
效果如下：
我們採用了首字放大的效果，圖文混排的顯示效果，圖片和文字進行了很好的混排，這個跟word的圖文混排的顯示是一樣的。我們再回到看代碼，我們看的出來，文字環繞圖片採用的效果與首字放大是一樣的，都採用了float:left。其實相當於將文字看成一張圖片或者是將圖片看成文字，同樣採用首字下沉。
最後祝大家中秋快樂。
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
