打造靜態網站

這周的課程宗旨就是要教會我們用HTML與CSS來打造靜態網站,以下為寫 Assignment時所想到與學到的心得分享。

  • 只要需要排版,都需加一層container的class
  • 只要需要超連結就用id選擇器
  • 編寫的時候可以先放一些文字進去以便確認架構,

例如:

<div class=”container”>內容放這邊
 <div class=”container”>
 <div id=”about”>關於我</div>
 <div id=”about”>我的音樂作品</div>
 <div id=”about”>聯繫我</div>
 </div>
</div>

Box特性 block, inline, display

block: 盒子占滿一整行,後面的元素會另起一行,寬度和高度可由CSS控制。

inline:盒子取決於內容,不可隨意改變,緊連前一個物件不會另起新行。

display:改變物件特性 (使元件消失 display: none; 將元件排列方向改成水平display: inline-block;)

清單 ul, li

list-style-type: none 讓清單前的黑點消失

border 邊界粗細、顏色

border-radius 邊界導圓角

background-color 背景顏色

text-align 元件中的文字對齊

超連結

HTML設定a href=”#被連結的id”

CSS設定當游標點到超連結時的樣式

ex:

a{
 display:block; 需用display將超連結的範圍擴大到整個按鈕
 color:;
 text-decoration: none;
}
li:hover{
 border: ;
 background-color: ;
}
li:hover a{
 color:;
 front-weight: ;
}

照片

<img src=”照片相對路徑” alt=”替代文字”>

CSS調整照片大小:#id img{大小}

表格

可將標籤列中的td改成th,代表這一格的內容是該行的標題,th的格式預設為粗體且置中。

Float排版

float: left, right,none;

多列排版 — position

Static — 預設值,等於沒有設定;
Relative — 從原始 static 的位置為原點,進行相對位移;
Absolute — 從上層某個已啟用 position 座標的原點來起算,如果找不到祖先,就以 body做為原點;
Fixed — 以視窗的左上角做為原點,而且不會隨著捲軸移動(用在#nav可讓導覽列一直維持在螢幕上方,加入width 100% z-index:100(一個大於零的數字,使它一直在最上方);。

  • 如何將文字完整的包在圖片中:

item包著img與item-info,因此item的30%是整個大視窗的30%,img與item-info的100%是指item的100%

Pseudo-classes

:visited — 點過的連結
:hover — 游標移過的地方
:focus — 游標所在的表單輸入框
:first-child — 第一個子元素
:last-child — 最後一個子元素

使用方式:

  1. 用 opacity 先將元素設為透明,等到觸發:hover事件時再顯示出來。

2. 將display設成none,等到觸發:hover事件時再設成block。

表單

form表單中最重要的元素是action 及method

<form action=”” method=””>
</form>

action定義使用者的資料送去伺服器的哪個地方,methon是告訴伺服器如何處理資料。