/* 整體區域 ===================================================================== */
/*
設計【CSS規則】的順序參考建議：
(層次) 由外而內 → (同一層中) 由上而下 → (同一橫列) 由左而右
設計【CSS屬性】的順序參考建議：
背景(顏色、圖片) → 大小(寬、高) → 邊距(margin、padding) → 內容(文字、插圖) → 特殊定位
*/
* {
margin: 0;
box-sizing: border-box;
}
/*
這個規則建議放在最上方
由於有些標籤元素預設是有 margin 外部邊距, 造成設計接縫不一
建議：使用 * 星號代表所有的標籤元素, 將 margin 邊距先設定為 0
傳統的設計 box-sizing 是 content-box, 代表 padding、border 會往外擴增範圍
CSS 3.0 之後
新版的設計 box-sizing 是 border-box, 代表 padding、border 會往寬度的內部內縮範圍
新版的設計：讓計算更方便、讓RWD響應式設計更容易
*/
html {
font-size: 16px; /* 設定整頁文件預設文字大小 */
}
body {
background-color: #fefef4; /* 設計整頁的背景顏色 */
color: #333; /* 設計整頁文字的預設顏色 */
font-family: Arial, Helvetica, sans-serif;
/* 設計整頁文字的預設字體 (sans-serif 是系統預設的無襯線字體) */
}
/* 頁首區域 ===================================================================== */
header {
text-align: center; /* 設計 header 區域的內容水平置中 */
}
header img {
max-width: 85%; /* 最大寬度 90% */
height: auto; /* 當寬度有改變時, 高度依原圖寬高比例自動計算 */
}
/* 寬度 >=700px 後的調整 */
@media( min-width: 700px ){
header p {
letter-spacing: 8px; /* 設計字元間距 */
}
}
/* 導覽列區域 ===================================================================== */
nav {
background-color: #444333; /* 設計導覽列的背景顏色 */
text-align: center; /* 設計導覽列的內容水平置中 */
position: sticky; /* 設計為黏性定位 */
top: -1px; /* 為了避免上方產生出細縫, 定位在上方-1px */
z-index: 9; /* 因為這個區域必須在最前面, 所以設定z軸順序為9 */
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
}
/* 設計導覽按鈕的一般狀態 */
nav a {
color: #fff; /* 文字顏色 */
text-decoration: none; /* 裝飾線條(底線)設定沒有 */
font-size: 12px;
display: inline-block;
/*
標籤的display顯示特性是「inline」在一行中的局部內容
但是 純inline 的元素不能設定寬、高, 而且 padding 上下增加的範圍不會推開空間
這裡要配合背景圖片的尺寸, 必須設計寬度及padding
所以必須設定成「inline-block」也就是「仍然在同一行中 但擁有區塊特性 的局部區域」
*/
width: 120px; /* 配合背景圖, 設定寬度 */
padding-bottom: 6px; /* 配合背景圖顯示的位置, 保留下方空間 */
padding-top: 5px; /* 配合空間比例, 保留上方空間 */
line-height: 1.4;
}
/* 設計導覽按鈕作用中狀態：顯示背景圖片、改變文字顏色、文字大小 */
nav a.active {
color: #ffe9b6;
}
nav .d {
display: none;
}
nav .e {
font-size: 12px;
}
/* 寬度 >=700px 後的調整 */
@media( min-width: 700px ){
nav {
display: block;
}
nav a {
font-size: 17px; /* 文字大小 */
letter-spacing: 1px; /* 字元間距 */
font-weight: bold; /* 文字加粗 */
/* background-image: url(./img/btn_hover.png); 先設計背景圖片最後再改位(刪除) */
background-repeat: no-repeat; /* 設定背景不重複 */
background-position: center bottom; /* 設定背景水平置中、垂直靠下 */
}
/* 設計導覽按鈕的滑入狀態：滑入時才出現背景圖片 */
nav a:hover {
background-image: url(./img/btn_hover.png);
}
/* 設計導覽按鈕作用中狀態：顯示背景圖片、改變文字顏色、文字大小 */
nav a.active {
background-image: url(./img/btn_hover.png);
color: #ffe9b6;
font-size: 18px;
}
nav .m {
display: none;
}
nav .d {
display: inline;
}
nav .e {
font-size: inherit;
}
}
/* 橫幅圖片區域 ===================================================================== */
.banner {
background-color: #e0d6ca; /* 設計這個區域的背景顏色 */
text-align: center; /* 設定內容水平置中 */
overflow: hidden;
background-image: url(./img/bg_line_3.png); /* 這個區域下方的背景圖(橫線線條) */
background-repeat: repeat-x; /* 背景圖只要水平重複 */
background-position: left bottom; /* 背景圖水平靠左、垂直靠下 */
padding-bottom: 10px; /* 配合背景圖的高度, 下方保留出顯示的空間 */
}
.banner img {
/*
原來的插圖 display 是 inline, inline元素有line-height行高, 所以插圖下方有縫
將插圖的 display 改成 block, 就不會有line-height行高, 下方就不會有縫
*/
display: block;
margin: 0 auto;
/*
但是 block 區塊的元素水平置中的方法必須運用外圍的 margin
margin-left: auto;
margin-right: auto;
以下是 margin 的合併縮寫方法
margin: 一個數值(四周一樣);
margin: 上下同一個數值 左右同一個數值;
margin: 4個數值分別為 上 右 下 左(數值之間要有空格, 單位不能省略);
*/
height: 200px;
width: auto;
}
@media( min-width: 700px ){
.banner img {
max-width: 100%; /* 最大寬度 100% */
height: auto; /* 當寬度有改變時, 高度依原圖寬高比例自動計算 */
}
}
/* 中央主要內容區域 ===================================================================== */
main {
background-color: #fff;
}
main .content {
padding: 1em;
/* 由於子元素有absolute絕對性領域的定位 */
/* 而位置是相對到父層, 所以父層必須要有定位能力 */
/* 然而父層本身並不需要定位功能, 所以設定成relative相對性定位 */
position: relative;
}
h1 {
background-image: url(./img/h1bg.png);
background-repeat: no-repeat;
background-position: center;
text-align: center;
margin-bottom: 30px; /* 設計與下方物件的距離 */
background-size: contain;
font-size: 20px;
}
.card {
width: 90%;
height: auto;
/* 依原圖比例auto自動計算 */
}
.mlauto {
/* img 原來display是inline
為了這個img能獨立靠右, 所以將display改成block */
display: block;
margin-left: auto;
/* 運用margin左側auto自動分配所有空間, 讓圖靠右 */
}
.new {
width: 80px; /* 設定寬度是相對所在範圍的 % */
height: auto;
/* 設計這個圖相對到父層的指定位置 */
/* 這是一個絕對性領域的定位 */
/* 表示與同一層的其他物件是不會互相推動的 */
position: absolute;
top: 60px;
right: 0;
/* 為了配合RWD, 配合.card圖片的寬度, 所以設計% */
}
main aside {
display: none;
}
aside h2 {
/* 原來 h2 的文字大小是 1.5em, 刻意設定縮小為 1em */
font-size: 1em;
text-align: center;
margin-bottom: 20px; /* 設計與下方物件的距離 */
}
aside img {
width: 100%;
height: auto;
/* 依原圖比例auto自動計算 */
}
.THimg {
margin-bottom: 15px; /* 設定與下方圖片的保留距離 */
border: 5px solid #fff; /* 設計圖片四周有白邊框 */
border-radius: 5px; /* 設計四周圓角 */
box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); /* 設計四周微陰影 */
}
/* 寬度 >=700px 後的調整 */
@media( min-width: 700px ){
/* 只有桌機時 */
main {
/* height: 300px; 這是固定高度 */
/* min-height: 300px; 這是最小高度 (先設定這個, 當設計好內容之後, 可以刪除) */
background-image: url(./img/main_bg.png); /* 設計背景圖片 */
width: 1200px; /* 設定寬度1200像素 */
margin: 0 auto; /* 為了水平置中, 設定左右margin為auto */
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
/* 區塊的陰影：水平偏移 垂直偏移 模糊擴散 顏色 */
/*
因為子元素皆為浮動設計, 呈現浮貼效果, 後遺症是無法推開父層的空間,
因此必須加上如下設定, 以下二種皆可, 只需要選擇一種來設定
*/
overflow: auto; /* 如果內容有超出的部份, 自動判斷是否要出現捲軸*/
overflow: hidden; /* 如果內容有超出的部份, 設定為隱藏 */
}
/* RWD設計時 */
main {
/* height: 300px; 這是固定高度 */
/* min-height: 300px; 這是最小高度 (先設定這個, 當設計好內容之後, 可以刪除) */
background-image: url(./img/main_bg.png); /* 設計背景圖片 */
background-size: 100% auto; /* 背景圖的大小: 寬度100% 高度auto */
width: 100%;
max-width: 1200px; /* 最大寬度1200像素 */
margin: 0 auto; /* 為了水平置中, 設定左右margin為auto */
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
/* 區塊的陰影：水平偏移 垂直偏移 模糊擴散 顏色 */
/*
因為子元素皆為浮動設計, 呈現浮貼效果, 後遺症是無法推開父層的空間,
因此必須加上如下設定, 以下二種皆可, 只需要選擇一種來設定
*/
overflow: auto; /* 如果內容有超出的部份, 自動判斷是否要出現捲軸*/
overflow: hidden; /* 如果內容有超出的部份, 設定為隱藏 */
}
main .content {
/* background-color: rgba(0, 183, 255, 0.504); 為了方便觀察, 先設計背景顏色 */
width: 79.16%; /* 950/1200 無條件刪除取小數二位 */
float: left; /* 設定浮動靠左 */
padding: 30px 20px; /* 設計內部邊界, 上下30px, 左右20px */
/* 由於子元素有absolute絕對性領域的定位 */
/* 而位置是相對到父層, 所以父層必須要有定位能力 */
/* 然而父層本身並不需要定位功能, 所以設定成relative相對性定位 */
position: relative;
}
h1 {
background-size: auto;
font-size: 2em;
}
.card {
width: 70%;
}
.new {
width: 150px;
left: 63%;
right: auto;
top: 90px;
}
main aside {
display: block;
/* background-color: rgba(184, 75, 221, 0.504); 為了方便觀察, 先設計背景顏色 */
width: 20.83%; /* 250/1200 無條件刪除取小數二位 */
float: right; /* 設定浮動靠右 */
padding: 30px 15px; /* 設計內部邊界, 上下30px, 左右15px */
}
}
/* 頁尾區域 ===================================================================== */
footer {
text-align: center; /* 設定內容水平置中 */
background-image: url(./img/bg_line_3.png); /* 設計上方有背景圖 */
background-repeat: repeat-x; /* 設定背景只有水平重複 */
background-position: left top; /* 設定背景水平靠左、垂直靠上 */
padding: 20px;
font-size: 13px; /* 設定四周邊界20像素 */
}
.linkComm {
background-color: #444333;
width: 80px;
height: 80px;
display: block;
/* 原來的 display是inline, 無法設計寬高, 所以將display改成block */
/* 以下設計正圓造形 */
padding: 15px;
border-radius: 50%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
/* 以下設計特殊位置：固定在視窗右下角 */
position: fixed;
right: 0;
bottom: 0;
margin: 10px; /* 為了讓四周保留10px的距離 */
}
.linkComm img {
display: block;
width: 100%;
height: 100%;
}
@media( min-width: 700px ){
footer {
font-size: 16px;
}
}