「CSS」「div區塊介紹」 三欄式網頁排版設計
三欄式網頁排版設計:
CSS語法
只要開一個空白的文件檔，將 CSS 語法貼進去，然後接著貼上 HTML 語法架構內的內容，順序是先 CSS 然後再 HTML，接存成 test.html 的檔案，用瀏覽器開起來就可以看到本文一開始的那個三欄式網頁範例示意圖，原則上 Chrome、FireFox、IE、Safari、Opera 等主流的瀏覽器都可以順利顯示。這只是透過 CSS DIV 設計出三欄式網頁的一種方法，網頁設計師當然有自己的一套設計方式，但大原則通常都是使用類似的手法，DIV 區塊的配置、DIV 寬度、margin、float、background ... 等，只要掌握這些基本的 CSS 概念，就可以靈活運用的設計出各種三欄式網頁。
文章擷錄:
Wibibi網頁設計教學百科
http://www.wibibi.com/info.php?tid=407
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<title>Free Css Layout 1</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<style type="text/css">
#sitebody {
width: 600px;
margin: 0 auto;
font-size: 13px;
}
#header {
background-color: rgb(218, 230, 59);
height: 80px;
text-align: center;
line-height: 80px;
}
#sidebar_left {
background-color: rgb(233, 92, 92);
width: 120px;
height: 400px;
text-align: center;
line-height: 400px;
float: left;
}
#sidebar_right {
background-color: rgb(119, 71, 231);
width: 120px;
height: 400px;
text-align: center;
line-height: 400px;
float: right;
}
#content {
margin-left: 120px;
margin-right: 120px;
height: 400px;
background-color: rgb(22, 245, 22);
text-align: center;
line-height: 400px;
}
#footer {
clear: both;
background-color: rgb(235, 45, 241);
height: 80px;
text-align: center;
line-height: 80px;
}
</style>
<div id="sitebody">
<div id="header">header</div>
<div id="sidebar_left">sidebar_left</div>
<div id="sidebar_right">sidebar_right</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
CSS語法
- float - DIV 區塊浮動
- width - DIV 寬度
- height - DIV 高度
- margin - DIV 區塊的外距
- font-size - 文字大小
- background-color - 背景顏色
- text-align - 文字對齊
- line-height - 文字行高
- clear - 清除浮動
只要開一個空白的文件檔，將 CSS 語法貼進去，然後接著貼上 HTML 語法架構內的內容，順序是先 CSS 然後再 HTML，接存成 test.html 的檔案，用瀏覽器開起來就可以看到本文一開始的那個三欄式網頁範例示意圖，原則上 Chrome、FireFox、IE、Safari、Opera 等主流的瀏覽器都可以順利顯示。這只是透過 CSS DIV 設計出三欄式網頁的一種方法，網頁設計師當然有自己的一套設計方式，但大原則通常都是使用類似的手法，DIV 區塊的配置、DIV 寬度、margin、float、background ... 等，只要掌握這些基本的 CSS 概念，就可以靈活運用的設計出各種三欄式網頁。
文章擷錄:
Wibibi網頁設計教學百科
http://www.wibibi.com/info.php?tid=407
留言
張貼留言