問題討論區


【CSS 語法】文章精華區


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



CSS div 網頁排版教學 -「三欄式版型」
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1169
CSS div 網頁排版教學 -「三欄式版型」


HTML 網頁如下:
<div id="WRAPPER"> <!--最外層包裝 -->

<div id="HEADER">....</div> <!--頁首 -->

<div id="MAIN_NAV">....</div> <!--主選單 -->

<div id="SUB_NAV_1">....</div> <!--次選單 1 -->

<div id="SUB_NAV_2">....</div> <!--次選單 2 -->

<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;
}



網頁使用 CSS 之前,如下圖:
Open in new window


網頁使用 CSS 之後,如下圖:
Open in new window



完整範例下載 http://www.flycan.com/myimg/modules/n ... hid=1210916146&post_id=15

2008/5/16 14:20
 


回覆: CSS div 網頁排版教學 -「三欄式版型」
會員一級
註冊日期:
2010/7/22 21:19
留言: 1
請問一下,這樣的版型如果我的選單連結按下去
希望main.php可以出現在content區,有點像iframe的感覺,這樣可行嗎?
因為我用iframe及spry在左側框架做了一個三層選單,第二層就被右側框架給蓋住
想說用css來做,但選單的超連結不知道怎麼寫讓連結點下去可直接在content執行

2010/7/22 21:24
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS