第一關：HTML+CSS 網頁排版(書籍)
. 書籍推薦：HTML&CSS：網站設計建置優化之道
ch1:結構
https://codepen.io/TANGJANE/pen/KyVbaj
ch2:文字
結構性標示
標題https://codepen.io/TANGJANE/pen/GOoLvG
段落https://codepen.io/TANGJANE/pen/GOoLxX
粗體https://codepen.io/TANGJANE/pen/vWLMrr
斜體https://codepen.io/TANGJANE/pen/VreNGX
上下標https://codepen.io/TANGJANE/pen/bYEJOP
空白 空白壓縮
斷行https://codepen.io/TANGJANE/pen/POZgLL?editors=1000
水平線https://codepen.io/TANGJANE/pen/YEwMMj
語法標示
視覺編輯器
原始碼檢視模式
加強
https://codepen.io/TANGJANE/pen/VreOpq?editors=1010
https://codepen.io/TANGJANE/pen/gXPJxY?editors=1000
引述
https://codepen.io/TANGJANE/pen/yPeWPX?editors=1000
縮寫和縮略字
https://codepen.io/TANGJANE/pen/eeJary?editors=1010
註解和定義
https://codepen.io/TANGJANE/pen/QOyRBp
https://codepen.io/TANGJANE/pen/gXPJBp?editors=1000
作者細節
https://codepen.io/TANGJANE/pen/qVbGLg?editors=1010
內容更動
https://codepen.io/TANGJANE/pen/WXrBmj?editors=1010
https://codepen.io/TANGJANE/pen/GOoaap
全章範例
https://codepen.io/TANGJANE/pen/rYxEVq?editors=1010
ch3:清單
編號清單
https://codepen.io/TANGJANE/pen/QONxQE
項目清單
https://codepen.io/TANGJANE/pen/qVZKxy
定義清單
https://codepen.io/TANGJANE/pen/EbKRGR?editors=1010
巢式清單
https://codepen.io/TANGJANE/pen/MOyXRO
全章範例
https://codepen.io/TANGJANE/pen/rYerBv
ch4:連結
編寫連結
https://codepen.io/TANGJANE/pen/mqPjmP
連結到其他網站(絕對URL)
https://codepen.io/TANGJANE/pen/qVZyXe
連結到同一個網站之不同頁面(相對URL)
https://codepen.io/TANGJANE/pen/YEqjew
Email連結
https://codepen.io/TANGJANE/pen/LONJOW
在新視窗開啟連結
https://codepen.io/TANGJANE/pen/BmKOJO
連結到某個網站的同個部分
連結到一個網頁的特定區域
https://codepen.io/TANGJANE/pen/wPGEXR
全章範例
https://codepen.io/TANGJANE/pen/vWGzbj
ch5:影像
為網站挑選影像
在網站上存放影像
新增影像
//<img>是一個空白元素(空白元素指沒有結束標記)
影像的高度和寬度
影像插入原始碼的位置
//block區塊元素:<h1><p>
//inline行內元素:<img><em>
舊語法：影像的水平對齊
舊語法：影像的垂直對齊
影像製作三原則
編輯和儲存影像的工具
影像格式：JPGE
//許多色彩組成者較為適用
影像格式：GIF
//組成色彩少者較為適用
影像尺寸
影像裁切
影像解析度
向量影像
//向量圖：AI-縮放不變形
//點陣圖：JPG、GIF、PNG、PS-縮放會變形
動態GIF
透明度
檢視網路上的影像
HTML:圖和圖片說明https://codepen.io/TANGJANE/pen/EbZJEO
//figure:影像的圖解說明
//figcaption:說明的內容
範例
//相片最適合儲存為JPGE
//使用單色的插畫或LOGO最適合儲存為GIF
ch6:表格
什麼是表格
基本表格結構https://codepen.io/TANGJANE/pen/JOEVBV
//tr.列
表格標題https://codepen.io/TANGJANE/pen/aVpxQM
//th表格標題
跨欄https://codepen.io/TANGJANE/pen/bYgyqv
//coldspan跨欄
跨列https://codepen.io/TANGJANE/pen/zPNQdO
//rowspan跨列
長表格https://codepen.io/TANGJANE/pen/aVprPN
//thead tbody tfoot
舊原始碼：寬度和間距https://codepen.io/TANGJANE/pen/OOWYGw
//cellspace上下
//cellpadding左右
舊原始碼：邊框和背景https://codepen.io/TANGJANE/pen/qVRzbj?editors=1010
範例https://codepen.io/TANGJANE/pen/MOJMJa?editors=1010
ch7:表單
ch8:額外標示
ch9:flash、視訊和音訊
ch10:CSS簡介
範例https://codepen.io/TANGJANE/pen/XzzExo
使用外部CSShttps://codepen.io/TANGJANE/pen/NwwYJw
使用內部CSShttps://codepen.io/TANGJANE/pen/rYYdEP
CSS選取器
CSS如何規範階層https://codepen.io/TANGJANE/pen/NwwMrM
繼承https://codepen.io/TANGJANE/pen/Xzzqpv
為什麼要使用外部樣式
CSS和瀏覽器怪癖的不同版本
ch11:色彩
前景色
color : RGB值 rgb(_，_，_)/HEX碼 #ee3e80/顏色名 DarkCyan
背景色
background-color
認識色彩
對比
CSS3:不透明度
透明度opacity與rgba使用關係 :
1.
.one{
background-color:rgb(0,0,0);
opacity:0.5
}
2.
.two{
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.5);
}
CSS3:HSL色彩
CSS3:HSL＆HSLA
1.
.one{
background-color:#C8C8C8
background-color:hsl(0,0%,78%)
}
2.
.two{
background-color:#C8C8C8
background-color:hsl(0,0%,78%,0.5)
}
(_ , _ , _ , _)分別代表
色相 : (0~360)
彩度 :百分比
明度 :百分比(0%~00%,白-黑)
ALPHA透明度(0~1.0)
範例
ch12:文字
字體專有名詞
為網站選擇一個字體
提供更多自行選擇的技巧
指定字型
字體大小
文字級數
字體大小單位
更多字型選擇
認識字型格式
粗體
font-weight
-bold
-normal
斜體
font-style
-normal
-italic(斜體)
-oblique(傾斜體)
大小寫
text-transform
-uppercase(大寫)
-lowercase(小寫)
-capitalize(第一個字母大寫)
底線刪節線
text-decoration
-none
-underline(下底線)
-overline(上底線)
-line-through(文字中央刪節線)
-blink(動態閃爍)
行距
line-height
間距
letter space/word-space
對齊
text-align
-left
-right
-center
-justify(每行都佔據整個容器方框，除了最後一行)
垂直對齊
vertical-align(常用在img、em、strong)
文字排列
text-indent(用在縮排文字段落中的第一行文字)
CSS3:陰影
text-shadow
第一個字母或第一行
:first-letter
:first-line
正確而言其並非屬性，是「擬元素psedoelements」。
如同 :hover用法
擬元素要放在選取器的結尾，然後指派宣告。
連結的樣式化
:link(可設定未造訪連結的樣式)
:visited(可設定以點按連結的樣式)
以上兩者常被用來控制連結顏色以及是否要顯示底線。
對使用者的回應
:hover
:active
:focus
屬性選取器
範例
ch13:方框
方框尺寸width/height
限制寬度min-width/max-widthhttps://codepen.io/TANGJANE/pen/QOQjGN
限制高度min-height/max-hieght
溢出內容overflow
邊框寬度border-width
邊框樣式border-stylehttps://codepen.io/TANGJANE/pen/VrQqoK
邊框顏色border-color
速記border
內距padding
邊界margin
將內容置中對齊
IE6方匡模型
更改行內/區塊狀態display:
inline/block/inline-block/none
隱藏方框visibility
hidden/visible
CSS3:邊框影像border-imagehttps://codepen.io/TANGJANE/pen/mqxjRz
CSS3:方框影像box-shadowhttps://codepen.io/TANGJANE/pen/JOvKLO
CSS3:圓角border-radiushttps://codepen.io/TANGJANE/pen/EbLyMb?editors=1100
-moz-border-radius/-webkit-border-radius使用時機
http://blog.xuite.net/andy19890411/Orz/37421619-【CSS】圓角屬性+-+CSS3+-moz-border-radius,+-webkit-border-radius,+border-radius
CSS3:橢圓形border-radiushttps://codepen.io/TANGJANE/pen/NwMRwd
範例https://codepen.io/TANGJANE/pen/jaxBbM
ch14:清單、表格和表單
項目符號樣式list-style-typehttps://codepen.io/TANGJANE/pen/wPjPpZ
使用圖片作為項目符號list-style-imagehttps://codepen.io/TANGJANE/pen/wPjPpZ
項目符號的位置list-style-positionhttps://codepen.io/TANGJANE/pen/jaxaeP
清單速記list_stylehttps://codepen.io/TANGJANE/pen/qVYVJx
表格屬性https://codepen.io/TANGJANE/pen/POeOMr
空白儲存格的邊框empty-cell
儲存格之間的間距
樣式話文字輸入欄
樣式化送出按鈕
將表單組和標題樣式化
對其表單控制項問題
對齊表單控制項 : 解決方案
游標樣式
範例
ch15:版面
正常流向 position:statichttps://codepen.io/TANGJANE/pen/aVGgLp
相對定位 position:relativehttps://codepen.io/TANGJANE/pen/aVKqyr
絕對定位 position:absolutehttps://codepen.io/TANGJANE/pen/BmVYmZ
固定定位position:fixedhttps://codepen.io/TANGJANE/pen/WXyMKz
重疊元素 z-indexhttps://codepen.io/TANGJANE/pen/POaQdj
浮動元素 floathttps://codepen.io/TANGJANE/pen/QOxQYB
使用float將元素並排https://codepen.io/TANGJANE/pen/pdKLJY
淨空浮動元素 clearhttps://codepen.io/TANGJANE/pen/YEvayV
浮動元素的父元素:問題
浮動元素的父元素:解決方案https://codepen.io/TANGJANE/pen/KyeozE
使用浮動來製作多欄版面
https://codepen.io/TANGJANE/pen/wPXmdY
https://codepen.io/TANGJANE/pen/mqKxqx
固定寬度版面https://codepen.io/TANGJANE/pen/KyeEMJ
流動版面https://codepen.io/TANGJANE/pen/dZKrOv
使用960.GS製作格線版面https://codepen.io/TANGJANE/pen/XzYGOj
數個樣式表
@import/link
範例https://codepen.io/TANGJANE/pen/aVjJWL?editors=1100
ch16:影像
在CSS中控制影像尺寸
使用CSS
使用CSS將影像置中
影像背景 background-image
重複影像
backaround-repeat:repeat/repeat-x/repeat-y/no-repeat
background-attachment:fixed/scroll
背景位置 background-position:(左右)(上下)
速記 background:color→image→repeat→attachment→position
變換影像和SPRITE
CSS3漸層 background-image
背景影像的對比範例
ch17:HTML5版面
版頭和頁尾header/footer
選單nav
文章article
附加aside
版塊section
標題群組hgroup
圖表figure/figcaption
區隔性元素div
在區塊層級元素上加連結
協助舊瀏覽器了解
範例
ch18:流程與設計
ch19:實用資訊
ch1:結構
https://codepen.io/TANGJANE/pen/KyVbaj
ch2:文字
結構性標示
標題https://codepen.io/TANGJANE/pen/GOoLvG
段落https://codepen.io/TANGJANE/pen/GOoLxX
粗體https://codepen.io/TANGJANE/pen/vWLMrr
斜體https://codepen.io/TANGJANE/pen/VreNGX
上下標https://codepen.io/TANGJANE/pen/bYEJOP
空白 空白壓縮
斷行https://codepen.io/TANGJANE/pen/POZgLL?editors=1000
水平線https://codepen.io/TANGJANE/pen/YEwMMj
語法標示
視覺編輯器
原始碼檢視模式
加強
https://codepen.io/TANGJANE/pen/VreOpq?editors=1010
https://codepen.io/TANGJANE/pen/gXPJxY?editors=1000
引述
https://codepen.io/TANGJANE/pen/yPeWPX?editors=1000
縮寫和縮略字
https://codepen.io/TANGJANE/pen/eeJary?editors=1010
註解和定義
https://codepen.io/TANGJANE/pen/QOyRBp
https://codepen.io/TANGJANE/pen/gXPJBp?editors=1000
作者細節
https://codepen.io/TANGJANE/pen/qVbGLg?editors=1010
內容更動
https://codepen.io/TANGJANE/pen/WXrBmj?editors=1010
https://codepen.io/TANGJANE/pen/GOoaap
全章範例
https://codepen.io/TANGJANE/pen/rYxEVq?editors=1010
ch3:清單
編號清單
https://codepen.io/TANGJANE/pen/QONxQE
項目清單
https://codepen.io/TANGJANE/pen/qVZKxy
定義清單
https://codepen.io/TANGJANE/pen/EbKRGR?editors=1010
巢式清單
https://codepen.io/TANGJANE/pen/MOyXRO
全章範例
https://codepen.io/TANGJANE/pen/rYerBv
ch4:連結
編寫連結
https://codepen.io/TANGJANE/pen/mqPjmP
連結到其他網站(絕對URL)
https://codepen.io/TANGJANE/pen/qVZyXe
連結到同一個網站之不同頁面(相對URL)
https://codepen.io/TANGJANE/pen/YEqjew
Email連結
https://codepen.io/TANGJANE/pen/LONJOW
在新視窗開啟連結
https://codepen.io/TANGJANE/pen/BmKOJO
連結到某個網站的同個部分
連結到一個網頁的特定區域
https://codepen.io/TANGJANE/pen/wPGEXR
全章範例
https://codepen.io/TANGJANE/pen/vWGzbj
ch5:影像
為網站挑選影像
在網站上存放影像
新增影像
//<img>是一個空白元素(空白元素指沒有結束標記)
影像的高度和寬度
影像插入原始碼的位置
//block區塊元素:<h1><p>
//inline行內元素:<img><em>
舊語法：影像的水平對齊
舊語法：影像的垂直對齊
影像製作三原則
編輯和儲存影像的工具
影像格式：JPGE
//許多色彩組成者較為適用
影像格式：GIF
//組成色彩少者較為適用
影像尺寸
影像裁切
影像解析度
向量影像
//向量圖：AI-縮放不變形
//點陣圖：JPG、GIF、PNG、PS-縮放會變形
動態GIF
透明度
檢視網路上的影像
HTML:圖和圖片說明https://codepen.io/TANGJANE/pen/EbZJEO
//figure:影像的圖解說明
//figcaption:說明的內容
範例
//相片最適合儲存為JPGE
//使用單色的插畫或LOGO最適合儲存為GIF
ch6:表格
什麼是表格
基本表格結構https://codepen.io/TANGJANE/pen/JOEVBV
//tr.列
表格標題https://codepen.io/TANGJANE/pen/aVpxQM
//th表格標題
跨欄https://codepen.io/TANGJANE/pen/bYgyqv
//coldspan跨欄
跨列https://codepen.io/TANGJANE/pen/zPNQdO
//rowspan跨列
長表格https://codepen.io/TANGJANE/pen/aVprPN
//thead tbody tfoot
舊原始碼：寬度和間距https://codepen.io/TANGJANE/pen/OOWYGw
//cellspace上下
//cellpadding左右
舊原始碼：邊框和背景https://codepen.io/TANGJANE/pen/qVRzbj?editors=1010
範例https://codepen.io/TANGJANE/pen/MOJMJa?editors=1010
ch7:表單
ch8:額外標示
ch9:flash、視訊和音訊
ch10:CSS簡介
範例https://codepen.io/TANGJANE/pen/XzzExo
使用外部CSShttps://codepen.io/TANGJANE/pen/NwwYJw
使用內部CSShttps://codepen.io/TANGJANE/pen/rYYdEP
CSS選取器
CSS如何規範階層https://codepen.io/TANGJANE/pen/NwwMrM
繼承https://codepen.io/TANGJANE/pen/Xzzqpv
為什麼要使用外部樣式
CSS和瀏覽器怪癖的不同版本
ch11:色彩
前景色
color : RGB值 rgb(_，_，_)/HEX碼 #ee3e80/顏色名 DarkCyan
背景色
background-color
認識色彩
對比
CSS3:不透明度
透明度opacity與rgba使用關係 :
1.
.one{
background-color:rgb(0,0,0);
opacity:0.5
}
2.
.two{
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.5);
}
CSS3:HSL色彩
CSS3:HSL＆HSLA
1.
.one{
background-color:#C8C8C8
background-color:hsl(0,0%,78%)
}
2.
.two{
background-color:#C8C8C8
background-color:hsl(0,0%,78%,0.5)
}
(_ , _ , _ , _)分別代表
色相 : (0~360)
彩度 :百分比
明度 :百分比(0%~00%,白-黑)
ALPHA透明度(0~1.0)
範例
ch12:文字
字體專有名詞
為網站選擇一個字體
提供更多自行選擇的技巧
指定字型
字體大小
文字級數
字體大小單位
更多字型選擇
認識字型格式
粗體
font-weight
-bold
-normal
斜體
font-style
-normal
-italic(斜體)
-oblique(傾斜體)
大小寫
text-transform
-uppercase(大寫)
-lowercase(小寫)
-capitalize(第一個字母大寫)
底線刪節線
text-decoration
-none
-underline(下底線)
-overline(上底線)
-line-through(文字中央刪節線)
-blink(動態閃爍)
行距
line-height
間距
letter space/word-space
對齊
text-align
-left
-right
-center
-justify(每行都佔據整個容器方框，除了最後一行)
垂直對齊
vertical-align(常用在img、em、strong)
文字排列
text-indent(用在縮排文字段落中的第一行文字)
CSS3:陰影
text-shadow
第一個字母或第一行
:first-letter
:first-line
正確而言其並非屬性，是「擬元素psedoelements」。
如同 :hover用法
擬元素要放在選取器的結尾，然後指派宣告。
連結的樣式化
:link(可設定未造訪連結的樣式)
:visited(可設定以點按連結的樣式)
以上兩者常被用來控制連結顏色以及是否要顯示底線。
對使用者的回應
:hover
:active
:focus
屬性選取器
範例
ch13:方框
方框尺寸width/height
限制寬度min-width/max-widthhttps://codepen.io/TANGJANE/pen/QOQjGN
限制高度min-height/max-hieght
溢出內容overflow
邊框寬度border-width
邊框樣式border-stylehttps://codepen.io/TANGJANE/pen/VrQqoK
邊框顏色border-color
速記border
內距padding
邊界margin
將內容置中對齊
IE6方匡模型
更改行內/區塊狀態display:
inline/block/inline-block/none
隱藏方框visibility
hidden/visible
CSS3:邊框影像border-imagehttps://codepen.io/TANGJANE/pen/mqxjRz
CSS3:方框影像box-shadowhttps://codepen.io/TANGJANE/pen/JOvKLO
CSS3:圓角border-radiushttps://codepen.io/TANGJANE/pen/EbLyMb?editors=1100
-moz-border-radius/-webkit-border-radius使用時機
http://blog.xuite.net/andy19890411/Orz/37421619-【CSS】圓角屬性+-+CSS3+-moz-border-radius,+-webkit-border-radius,+border-radius
CSS3:橢圓形border-radiushttps://codepen.io/TANGJANE/pen/NwMRwd
範例https://codepen.io/TANGJANE/pen/jaxBbM
ch14:清單、表格和表單
項目符號樣式list-style-typehttps://codepen.io/TANGJANE/pen/wPjPpZ
使用圖片作為項目符號list-style-imagehttps://codepen.io/TANGJANE/pen/wPjPpZ
項目符號的位置list-style-positionhttps://codepen.io/TANGJANE/pen/jaxaeP
清單速記list_stylehttps://codepen.io/TANGJANE/pen/qVYVJx
表格屬性https://codepen.io/TANGJANE/pen/POeOMr
空白儲存格的邊框empty-cell
儲存格之間的間距
樣式話文字輸入欄
樣式化送出按鈕
將表單組和標題樣式化
對其表單控制項問題
對齊表單控制項 : 解決方案
游標樣式
範例
ch15:版面
正常流向 position:statichttps://codepen.io/TANGJANE/pen/aVGgLp
相對定位 position:relativehttps://codepen.io/TANGJANE/pen/aVKqyr
絕對定位 position:absolutehttps://codepen.io/TANGJANE/pen/BmVYmZ
固定定位position:fixedhttps://codepen.io/TANGJANE/pen/WXyMKz
重疊元素 z-indexhttps://codepen.io/TANGJANE/pen/POaQdj
浮動元素 floathttps://codepen.io/TANGJANE/pen/QOxQYB
使用float將元素並排https://codepen.io/TANGJANE/pen/pdKLJY
淨空浮動元素 clearhttps://codepen.io/TANGJANE/pen/YEvayV
浮動元素的父元素:問題
浮動元素的父元素:解決方案https://codepen.io/TANGJANE/pen/KyeozE
使用浮動來製作多欄版面
https://codepen.io/TANGJANE/pen/wPXmdY
https://codepen.io/TANGJANE/pen/mqKxqx
固定寬度版面https://codepen.io/TANGJANE/pen/KyeEMJ
流動版面https://codepen.io/TANGJANE/pen/dZKrOv
使用960.GS製作格線版面https://codepen.io/TANGJANE/pen/XzYGOj
數個樣式表
@import/link
範例https://codepen.io/TANGJANE/pen/aVjJWL?editors=1100
ch16:影像
在CSS中控制影像尺寸
使用CSS
使用CSS將影像置中
影像背景 background-image
重複影像
backaround-repeat:repeat/repeat-x/repeat-y/no-repeat
background-attachment:fixed/scroll
背景位置 background-position:(左右)(上下)
速記 background:color→image→repeat→attachment→position
變換影像和SPRITE
CSS3漸層 background-image
背景影像的對比範例
ch17:HTML5版面
版頭和頁尾header/footer
選單nav
文章article
附加aside
版塊section
標題群組hgroup
圖表figure/figcaption
區隔性元素div
在區塊層級元素上加連結
協助舊瀏覽器了解
範例
ch18:流程與設計
ch19:實用資訊
评论
发表评论