HTML/CSS

Images

在網頁中我們常會使用到圖片，圖片分為三種content images、layout images、user interface images，在下面會分別進行介紹

Content Images

是指網頁中內容的一部分，比如購物網站上的商品圖片，圖片的tag是img，圖片、網頁要放在相同資料夾
---------------------------------------------------
<img src="cat.png">  --src後面加上圖片的名稱及副檔名，副檔名一定要打

但是一個網頁中會有多張圖片，如果全部都放在資料夾內會難以整理，這時我們可以將圖片放在各個資料夾，在src中加上資料夾名稱
---------------------------------------------------
<img src="animal/cat.png">   --讀取animal資料夾內的cat.png

有時候網站會無法讀取圖片，所以最好在圖片內加上說明，指出這張圖片是什麼，或是其作用
---------------------------------------------------
<img src="animal/cat.png" alt="這是一隻貓">   --在alt內輸入說明的文字

也可以將圖片放入清單內，但是清單前面都會有一個項目符號，且每張圖都換行，這時可以這樣修改
---------------------------------------------------
ul{
     list-style-type:none;   --將項目符號關閉
     padding:0;
}
ul li{
     display:inline;   --將圖片設定為同一行，不換行
}

我們也可以將LOGO變為圖片，但這時想要將圖片置中，並不能使用center，因為img是屬於inline，這時需要修改display屬性與margin
---------------------------------------------------
img{
     display:block;   --將img改為block，這樣就可以設定margin
     marign:0 auto 0 auto;   --之前提到的置中效果
}

Layout Images

layout images通常是指非內容的圖片，通常是指背景圖片，藉由backgroung來設定背景圖

---------------------------------------------------

background-color:#ffffff   --設定背景顏色為#ffffff

background-image:url(image/home.jpg);   --url的括弧內是圖片的位置與檔名

background-position:(top center bottom)(left center right);   --設定背景圖片出現的地方，這裡有兩個值，下圖是該屬性表示的意思

－－－－－－－－－－－－－－－－－－－

｜  top   left  ｜ top    center  ｜  top    right  ｜

｜－－－－－－－－－－－－－－－－－｜

｜center left ｜center center  ｜center   right｜

｜－－－－－－－－－－\－－－－－－－｜
｜bottom left｜bottom center｜bottom right｜

－－－－－－－－－－－－－－－－－－－

background-repeat:(repeat repeat-x repeat-y no-repeat);   --若圖片太小會無法覆蓋網頁，可以設定該屬性，讓背景圖重複出現，這是圖片出現的不同方式
repeat   --會讓背景圖重複出現在X軸與Y軸，即覆蓋整個頁面
repeat-x   --背景圖只在X軸重複
repeat-y   --背景圖只在Y軸重複
no-repeat   --背景圖不重複

background:#ffffff url(image/home.jpg) top left repeat;   --也可以簡化成這樣

在輸入英文時會更改其大小寫，使用這個屬性會更方便
---------------------------------------------------

text-transform   --設定英文的大小寫，有三種
uppercase   --所有字母都是大寫

lowercase   --所有字母都是小寫
capitalize    --每個單字的第一個字母是大寫，其餘是小寫

Floating Images

float浮動是現在網頁製作時常會使用到的屬性，由其是使用在div，float可以更好的進行版面的調整、配色等，對於美工更加方便、有彈性

---------------------------------------------------

<ul class="flt">

     <li>

          <img src="image/home.jpg">

          <h3><a href="...">MyCat</a></h3>

          <p>......</p>

     </li>

</ul>

.flt{

     float:left;   --float使圖片浮向右邊，字就會自動上移

}