1. 概述
HTML網頁的描述是由上到下,逐行的方式顯示,HTML5之前要製作區塊內容都是用div標籤來設計,但在HTML5中新增文件結構功能,讓網頁能以區塊的形式呈現。
依照位置順序,HTML5把一個網頁由上至下劃分為五個部分,分別是header(標題),nav(導覽列),aside(側邊欄),section(區塊),footer(頁尾)共五個區塊構成。
[hr]
2. 上課影片
2014/4/22 2A
HTML5與CSS--網頁版型--雙欄式版型解說
http://youtu.be/pJ0NniIkkts
[hr]
HTML5與CSS--網頁版型--雙欄式與三欄式版型解說
http://youtu.be/nl4TJ4MsFHI
[hr]
3. 網頁版型的語法
本範例以HTML與CSS於同一檔案撰寫的方式製作
雙欄式網頁版型:http://mepopedia.com/~jinjin/web/hw07-102/
[IMG]http://i.imgur.com/JElFVds.jpg[/IMG]
1. 雙欄式網頁版型
雙欄式網頁版型
[hr]
2. 三欄式網頁版型
本範例以HTML與CSS分開檔案撰寫的方式製作
三欄式網頁版型:http://mepopedia.com/~jinjin/web/hw07-102/index-3.html
將以下HTML5語法複製於index-3.html的檔案
1. HTML5部分
三欄式網頁版型
2. CSS部分
將以下CSS語法,複製於style.css檔案中,與前述index-3.html放置於同一資料夾中
@charset "utf-8";
body{
width: 900px;
color: #FFF;
margin:0 auto;
font-family: sans-serif, "微軟正黑體";
}
#header{
background-color: #425660;
padding: 20px;
}
#nav{
background-color: #20292F;
padding: 5px;
}
#aside1{
width: 150px;
height: 300px;
text-align: center;
background-color: #63808F;
padding:20px 10px;
float: left;
}
#aside2{
width: 150px;
height: 300px;
text-align: center;
background-color: #63808F;
padding:20px 10px;
float: right;
}
#section{
width: 520px;
height: 300px;
background-color: #849DAA;
line-height: 1.5em;
padding: 20px;
float: left;
}
#footer{
padding:20px;
background-color: #425660;
clear: both;
}
h1{
font-family: sans-serif, "微軟正黑體";
font-size: 18px;
color: #FFF;
text-align: center;
}
[hr]
4. 特別注意
1.高度原則上以內容為主,若有設定高度須加上padding之上下高度為實際高度。
2.寬度設定也須加上padding左右之寬度為實際寬度。
[hr]
Edited 1 time(s). Last edit at 04/24/2014 01:22PM by JinJin.
(
編輯記錄)