語軒閣: CSS div 網頁排版教學 -「三欄式版型」

2012年2月8日星期三

CSS div 網頁排版教學 -「三欄式版型」

CSS div 網頁排版教學 -「三欄式版型」

HTML 網頁如下：

<div id="WRAPPER"> 

<div id="HEADER">....</div> 

<div id="MAIN_NAV">....</div> 

<div id="SUB_NAV_1">....</div> 

<div id="SUB_NAV_2">....</div> 

<div id="CONTENT">....</div> 

<div id="FOOTER"> ...</div> 

</div>

CSS 語法如下：

body, div, h1, h2, h3, h4, p, ul, li {
margin:0;
padding:0;
}
body {
background-color: #666666;
}
/*---- 最外層包裝 ----*/
#WRAPPER {
width: 800px;
margin:0 auto;
padding:0 10px;
background-image: url(images/outer_bg.gif);
}
/*---- 頁首 ----*/
#HEADER {
background-color: #FFFFFF;
}
#HEADER h1 a {
text-indent: -9999px;
display: block;
width: 800px;
height: 200px;
background-image: url(images/header.gif);
}
/*---- 主選單 ----*/
#MAIN_NAV {
background-color: #000000;
overflow:auto;
width: 800px;
}
#MAIN_NAV ul {
list-style-type:none;
}
#MAIN_NAV li {
float: left;
}
#MAIN_NAV li a {
display: block;
padding: 5px 10px 5px 10px;
background-color: #000000;
color: #FFFFFF;
font-weight: bold;
font-family: Arial;
font-size: 12px;
text-decoration: none;
border-right:1px solid #FFFFFF;
}
#MAIN_NAV li a:hover {
background-color: #FFFFFF;
color: #000000;
}
/*---- 次選單 1 ----*/
#SUB_NAV_1{clear: both; float:left; width:150px;}
#SUB_NAV_1 a{ color:#6699FF;}
#SUB_NAV_1 a:hover{ color:#FF0000;}
#SUB_NAV_1 p,#SUB_NAV_1 h2{ text-align:center; padding:5px 10px;}

/*---- 次選單 2 ----*/
#SUB_NAV_2{ float:right; width:150px;}
#SUB_NAV_2 a{ color:#6699FF;}
#SUB_NAV_2 a:hover{ color:#FF0000;}
#SUB_NAV_2 p,#SUB_NAV_2 h2{ text-align:center; padding:5px 10px;}

/*---- 內容區 ----*/
#CONTENT {
background-color: #EEE;
margin-left:150px;
margin-right:150px;
}
#CONTENT h2, #CONTENT h4, #CONTENT p {
padding:6px 20px 6px 20px;
font-size:12px;
}
#CONTENT h2 {
font-family: Arial;
font-size: 24px;
text-align: center;
padding-top: 10px;
background-color:#666;
color:#FFF;
letter-spacing:10px;
border-top:2px #999 solid;
}
/*---- 頁尾 ----*/
#FOOTER {
clear: both;
background-color: #000000;
}
#FOOTER h2, #FOOTER p {
font-size: 12px;
padding:5px 20px;
font-family: Arial;
color: #FFFFFF;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}