精通CSS+DIV網頁樣式與布局--圖片效果
來源：程序員人生 發布時間：2015-01-13 08:09:27 閱讀次數：3078次
提到圖片效果，小火伴們可能會想到美圖秀秀，ps等，這些軟件都是款非常不錯的照片處理軟件，包括經常使用的：黑白，增強，高斯，高對照，夜視，老照片和鉛筆劃等等。不管你是不是是專業的 照片拍攝人員，我們都可以通過照片處理軟件輕松實現自己想要的照片效果。這篇博客，小編將繼續來總結CSS+DIV的其她效果來進行分析，有興趣的小火伴可以點擊以下鏈接，了解小編之前講授過的關于CSS的1些基礎知識：
精通CSS+DIV網頁樣式與布局--初探CSS
精通CSS+DIV網頁樣式與布局--CSS文字效果
精通CSS+DIV網頁樣式與布局--CSS段落效果
上篇博客，小編主要講授了有關段落的知識，這次來說圖片的效果，我們看是如何控制圖片顯示的效果。首先，我們來看1張圖：
接下來，小編順著上述圖示的脈絡對各個知識點進行逐一講授，在實戰中更好的掌握：
圖片效果
圖片邊框
首先，我們來看1段例子的代碼和運行效果：
<span style="font-size:18px;"><span style="font-size:18px;"><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> </span></span>
效果以下所示：
分析1下上面的代碼，border-style:控制線條的樣式（是點畫線還是虛線）；border-color：很明顯就是控制色彩了；border-width：控制邊框的粗細程度。同時，border控制邊框的時候，不但可以采取代碼里邊那樣的方式，同時我們可以把所有的代碼合成1句，我們可以這么寫，代碼和運行效果以下所示：
<span style="font-size:18px;"><span style="font-size:18px;"><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> </span></span>
這樣就變的很簡潔了，我們看看效果：
border還有1個比較強大的功能就是能單獨修改某1條邊框，比如我們這樣寫代碼，會有怎樣的顯示效果nie:
<span style="font-size:18px;"><span style="font-size:18px;"><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> </span></span>
顯示效果以下：
編這樣更方便我們的設計，接著，我們1起來看1下圖片的縮放，例子代碼和運行效果以下所示：
<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>圖片縮放</title>
<style>
<!--
img.test1{
width:50%; /* 相對寬度 */
}
-->
</style>
</head>
<body>
<img src="pear.jpg" class="test1">
</body>
</html></span></span>
分析1下上面的代碼，代碼中的百分之510表示目前這個圖片的寬度相對他的父元素body的寬度為百分之510，也就是說她為全部閱讀器的寬度的1半。她可以保證不同的閱讀器不會由于她的變化而使得全部網頁產生變化，她永久保持著跟閱讀器1個相對的寬度。圖片效果以下所示：
圖片縮放
圖片對齊方式
橫向對齊
橫向對齊和縱向對齊兩方面，我們先看橫向對齊：我們采取了text-align來實現這個效果，看看代碼和顯示效果：
<span style="font-size:18px;"><span style="font-size:18px;"><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></span></span>
效果以下：
縱向對齊不像橫向對齊那樣，縱向對齊數值很多，我們把這些值進行了逐一對照，我們看那代碼：
<span style="font-size:18px;"><span style="font-size:18px;"><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></span></span>
運行效果以下：
圖文混排
文字環繞：我們從代碼動身：
<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>圖文混排</title>
<style type="text/css">
<!--
body{
background-color:bb0102; /* 頁面背景色彩 */
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:5px;
}
span{
float:left; /* 首字放大 */
font-size:85px;
font-family:黑體;
margin:0px;
padding-right:5px;
}
-->
</style>
</head>
<body>
<img src="chunjie.jpg" border="0">
<p><span>元</span>旦，中國節日，即世界多數國家通稱的“新年”，是公歷新1年開始的第1天?！霸?詞最早出現于《晉書》。中國古代曾以尾月、10月等的月首為元旦，漢武帝始為農歷1月1日，并延用。中華民國始為公歷1月1日，1949年中華人民共和國成立時得以明確，同時肯定農歷1月1日為“春節”，因此元旦在中國也被稱為“新歷年”、“陽歷年”（相對應地，春節稱為“舊歷年”、“陰歷年”等）?！霸?詞系中國“土產” 已沿用4000多年。</p>
</body>
</html></span></span>
效果以下：
我們采取了首字放大的效果，圖文混排的顯示效果，圖片和文字進行了很好的混排，這個跟word的圖文混排的顯示是1樣的。我們再回到看代碼，我們看的出來，文字環繞圖片采取的效果與首字放大是1樣的，都采取了float:left。其實相當于將文字看成1張圖片或是將圖片看成文字，一樣采取首字下沉。
小編寄語：該博文，小編主要簡單的總結了1下CSS中圖片設置的效果，總共分為3個大塊，包括圖片樣式，圖片對齊，圖文混排，其中圖片樣式包括圖片的邊框效果和圖片的縮放效果，border-style:控制線條的樣式（是點畫線還是虛線）；border-color：很明顯就是控制色彩了；border-width：控制邊框的粗細程度，和圖片的橫向對齊和縱向對齊，還有圖文混排，這些小的細節方面的知識，還需要我們在代碼中加以實踐，方能更好的掌握這些知識，BS學習，未完待續......
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
