2013年11月3日 星期日

用 CSS 搞定圖像的表現慾！


用 CSS 搞定圖像的表現慾！

圖像呈現好不好看，事關重大。用 CSS 來設定圖像的各種版面參數，真的非常簡單！
<img style="xxx" src="xxx" />
置左、置中、置右，還有框線、背景色、圓角．陰影。


互動範例

置左：style="display: block; margin-left: 0px;" 。這是網頁預設值，基本上是可以不寫的。但如果想要圖像的左邊有空白距離，則可以為 0px 填入數字。例如 6px ，則圖像左邊會有 6px 的空白距離。
置中：style="display: block; margin: 0px auto;" 。圖像會居中。如果為 0px 填入數字，例如 6px ，則圖像的上面和下面會有 6px 的空白距離。
置右：style="display: block; margin-left: auto; margin-right: 0px;" 。圖像會居右。如果為 0px 填入數字，例如 6px ，則圖像的右邊會有 6px 的空白距離。
框線：style="border: 1px solid gray;" 。圖像會有框線。1px，寬度；solid，實心線；gray，灰色。
背景色：style="padding: 7px; background-color: silver;" 。圖像與框線之間會有背景色。7px，背影色寬度；silver，灰色。

圓角、陰影框的語法，請看教學說明。這是比較新的語法，KompoZer並不支援，要用編輯器自己下語法。
超快速上手法：使kompozer




那種眼神並不可怕，
難的是你不能對之直視。
生命總有幽暗處，
承認此點，才能活得
開朗，
才會想去超越。



<style>

/* 圖像變化語法 */
.picch0129 {
-webkit-transform: rotate(3deg);
border-radius: 25px;
border: 2px solid white;
padding: 5px;
background-color: smokewhite;
-webkit-box-shadow: 2px 3px 2px 1px silver;
}


/* 基本黑體內文 */
.ironcontent0120 {
font-family: Verdana, '微軟正黑體';
font-size: 1.6em;
font-weight: bold;
line-height: 1.6;
text-align: left;
letter-spacing: 0.1em;
}

/* 基本細明體文 */
.stdcontent0120 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.4;
text-align: left;
letter-spacing: 0.1em;
}

</style>


沒有留言:

張貼留言