「CSS」「div區塊介紹」 二欄式網頁排版設計

-
二欄式網頁排版設計:



<!DOCTYPE HTML PUBLIC>
<style type="text/css">
#Header {
width: 360px;
height: 80px;
text-align: center;
line-height: 80px;
font-size: 15px;
color: #fffaf3;
font-weight: bold;
background-color: #f9c81e;
}

#Sidebar {
width: 120px;
float: left;
height: 280px;
text-align: center;
line-height: 280px;
font-size: 15px;
color: #ffffff;
font-weight: bold;
background-color: #6a54e2;
}

#body {
width: 240px;
height: 280px;
text-align: center;
line-height: 280px;
font-size: 15px;
color: #f9c81e;
font-weight: bold;
background-color: #1cf027;
float: left;
}

#Footer {
width: 360px;
height: 80px;
text-align: center;
line-height: 80px;
font-size: 15px;
color: #fffaf3;
font-weight: bold;
background-color: #f91eb7;
}
</style>
<html>

<head>
<title>二欄式網頁排版</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="Header">Header 欄位</div>
<div id="Sidebar">Sidebar</div>
<div id="Body">Body 欄位</div>
<div style="clear:both;"></div>
<div id="Footer">Footer 欄位</div>
</body>

</html>


  • width - 設定 DIV 寬度
  • height - 設定 DIV 高度
  • text-align - 設定 DIV 內的文字對齊
  • line-height - 設定 DIV 內的文字行高
  • font-size - 設定 DIV 內的文字大小
  • color - 設定 DIV 內的文字顏色
  • font-weight - 設定 DIV 內的文字粗細
  • background-color - 設定 DIV 區塊的背景顏色


文章擷錄:
Wibibi網頁設計教學百科
http://www.wibibi.com/info.php?tid=406


留言

張貼留言

這個網誌中的熱門文章

[Excel]國曆轉農曆VBA

-
建立並開啟Excel  =>  開發人員  =>  Visual Basic  =>  插入 模組   =>  輸入以下資料 : Excel公式 =NongLi(A1) 產生的結果範例: 2017/12/14 => 農曆丁酉年(雞)十一月二八日 Public Function NongLi(Optional XX_DATE As Date) Dim MonthAdd(11), NongliData(99), TianGan(9), DiZhi(11), ShuXiang(11), DayName(30), MonName(12) Dim curTime, curYear, curMonth, curDay Dim GongliStr, NongliStr, NongliDayStr Dim i, m, n, k, isEnd, bit, TheDate '獲取當前系統時間 curTime = XX_DATE '天干名稱 TianGan(0) = "甲" TianGan(1) = "乙" TianGan(2) = "丙" TianGan(3) = "丁" TianGan(4) = "戊" TianGan(5) = "己" TianGan(6) = "庚" TianGan(7) = "辛" TianGan(8) = "壬" TianGan(9) = "癸" '地支名稱 DiZhi(0) = "子" DiZhi(1) = "丑" DiZhi(2) = "寅" DiZhi(3) = "卯" DiZhi(4) = "辰" DiZhi(5) = "巳" DiZhi(6) = "午" DiZhi(7) = "未" DiZhi(8) = "申" DiZhi(9) = "酉" DiZhi(10) = "戌...
Continue »

「生活」眉毛觀人

-
圖片
相由心生，亦由心改。攝境入心，戒心離苦。 講話時顧左右而言他人的人，易有反叛之心，說話滔滔不絕的人，一句話反復言談的人，必傷元氣。 眉在無形中屬於金，掌管妻妾，兄弟等官位。若眉生的好，則其人財祿豐厚，生活幸福。 眉棱骨 起主孤獨：眉棱骨突起的，命運總是多波折，且孤獨處世。 眉生黑子 主聰穎：眉部有痣，說明此人非常聰明、尊貴、賢能。 天倉 隆起性格好：若兩天倉隆起，兩眉長，印堂廣闊，其人心中必定安詳平和，心性豁達。 眉頭看感情，眉尾看思想。 俗話說： 眉頭亂就感情亂，眉尾亂就思想亂 。 眉頭帶殺：平常人皺眉頭時兩個眉毛之間肌肉皺成“川”字樣，但有的人皺成“殺”字上面的一撇一捺樣，即所謂眉頭帶殺，暗示此人命運不好。 眉頭帶劍：眉頭帶劍的人不善處理感情,31虛歲左右感情會有變故。 無眉毛：無眉毛，屬凶相，加上眉骨凸，性格衝動凶相，女人無眉毛無老公無子女，孤獨一生。 輕揚眉（輕秀眉）：眉毛整齊緊促、色澤黑亮、眉毛彎長清秀、眉尾略疏為“輕清眉”，長有此眉相理的人，成就雖然不會太大，但是富貴兩全，且長壽。 鬼眉：眉粗壓眼，眉尾雜亂，眉毛短不過目為“鬼眉”，長有此眉的人，內心狠毒不走正道，殘暴無情，為人淫亂，易有偷盜的壞毛病，此類人最宜從事屠夫或當兵，否則容易走上犯罪道路。 獅子眉：中晚年發達。眉頭整齊、眉心略彎、眉毛粗濃、眉尾圓潤下探、眉長而梳松為“獅子眉”，其人富貴正直、也主壽年高、但多數中晚年才發達。 帶劍眉：官訟是非。眉頭散亂衝射印堂者，稱為“帶劍眉”，其人兄弟不全、與父母緣分較薄、本人個性也不良，一生容易犯官司口舌，如果其它相理也不佳，則牢獄一生。  一字眉：文武雙全。眉頭和眉尾整齊又清秀，稱為“一字眉”，主兄弟多而和睦並富貴，也主自己富貴雙全，能文能武，有智謀，辦事正直果斷。 春心眉：婚姻不順。眉身太細、眉形狀態又細又長、眉頭和眉尾向下彎曲，猶如柳條枝般，為“春心眉”，此類人好色貪婬、頭腦只有男女色情、一生研究男女色情心理，但是多數婚姻不順。 促秀眉：眉毛短而清秀，眉頭細窄緊促，退印堂而眉尾過目者為“促秀美”此眉相理的人，聰明有才智，對國家或公司盡忠，對父母盡孝，貴氣在身，一生成就不凡。 螺旋眉：兄弟反目。眉尾有螺旋狀，稱為“螺旋眉”...
Continue »

「CSS」「div區塊介紹」 三欄式網頁排版設計

-
圖片
三欄式網頁排版設計: <! 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 ; ...
Continue »