*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

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>


沒有留言:

張貼留言