Images
在網頁中的圖片，分成三種：
(1)content images：在正文中出現的圖片，能加強說明；
(2)layout images：背景圖片，用來修飾頁面，也可用清單區塊顯示；
(3)user interface images：本身沒有意義，卻可向使用者傳答某些訊息。
content images：在html的body下使用，以<img>標籤開頭，但此標籤為開放的，故不需</img>。
其兩個常用屬性為：
src：顯示要開啟的圖片，若在同一資料夾下，可直接寫檔名；若不同，則需寫出其所在的資料夾。
語法：<img src="位置/檔名">
alt：圖片的文字替代，可以是描述那張圖或是圖片的目的
語法：<img src="位置/檔名" alt="替代or描述">
layout images：寫在css或html的style中，可當背景底圖使用；或是在html的body的<ul>、<ol>中，為小區塊狀的圖片，再用display:inline（不換行顯示）修飾，能呈現串接的圖片列。
background寫在css檔，或html的style中，常用的幾個屬性：
用來指定背景顏色，
語法：background-color:顏色;
指定圖片作為背景，
語法：background-image:url(位置);
指定背景圖片是否要重複，值有四種，no-repeat(不重複)、repeat-x(重複x方向)、repeat-y(重複y方向)、repeat(x,y方向皆重複)，
語法：background-repeat:值;
當有捲軸時，背景圖片是否固定在頁面上，值有兩種，fixed(不跟捲軸一起動，固定在螢幕上)、scroll(跟捲軸一起動)
語法：background-attachment:值;
指定圖案位置，有三種方法，
兩個字（可顛倒）：[left,center,right]三選一，[top,center,bottom]三選一；
兩個百分比：第一個x軸百分比，第二個y軸百分比；
兩個數字：第一個第一個x軸位置，第二個y軸位置，
語法：background-position:x y;
注意：別用逗號隔開，直接用空格，不然會看不懂。數字預設為x軸先，y軸後，文字則沒有差別。
若想全串起來，可以這樣寫(順序可以顛倒，反正不影響)：
background:color image repeat position attachment;
浮動float：將字顯示在圖旁邊，其值有：
left：圖在左，文字在右、
right：圖在右，文字在左、
nane：文字顯示在下方，不與圖同行。
注意：欲設定圖在文字的左右，需將圖擺在文字前面，若擺在文字後面，而文字又太長，效果可能就不會明顯了。
架構：
images.html
<html>
<head>
<link rel=stylesheet type="text/css" href="images.css">
</head>
<body>
<div class="content">
<h3>content images</h3>
<p>...</p>
<img src="位置/檔名" alt="替代文字or描述">
<p>...</p>
</div>
<div class="layout_1">
<h3>layout images</h3>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div class="layout_2">
<h3>清單區塊</h3>
<ul>
<li><img src="位置/檔名"></li>
<li><img src="位置/檔名"></li>
<li><img src="位置/檔名"></li>
</ul>
</div>
<div class="float">
<h3>浮動</h3>
<img src="位置/檔名">
<p>...</p>
</div>
</body>
</html>
images.css
.layout_1{
background:color image repeat position attachment;
}
.layout_2 ul li{
dispalay:inline;
}
.fioat img{
float:left;
}
沒有留言:
張貼留言