2013
09
13

CSS 排版不得不知的祕訣(範例一)

關鍵字:網頁設計CSS排版設計

市面上很多工具書,css教學的網站只要google一下就有好幾十頁
大多數介紹標籤功能,似乎少了一些排版上需要注意的語法
例如:在排版上最常使用到的就是浮動float
以下是最常見的版型
網頁設計
我們一般直覺的寫法就是
div 排版
<div id="Header"> Header </div>
<div id="Wrapper">
<div id="Left"> Left </div>
<div id="Right"> Right </div>
</div>
<div id="Footer"> Footer </div>
CSS 寫法
body{ font-family:Arial, Helvetica, sans-serif;}
#Header {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 36px;
color:#fff;
line-height:100px;
text-align:center;
width:990px;
height:100px;
background-color:#09C;
margin:0 auto; }
#Wrapper{
width:990px; margin:0 auto;

}
#Wrapper #Left{
float:left;
text-align:center;
line-height:500px;
font-size:36px;
color:#fff;
width:250px;
height:500px;
background-color:#333;
}
#Wrapper #Right{
float:right;
font-size:36px;
text-align:center;
color:#333;
line-height:500px;
width:700px;
height:500px;
background-color:#FC9;
}
#Footer{
font-size:36px;
text-align:center;
color:#fff;
width:990px;
height:50px;
background-color:#336;
margin:0 auto;
}

卻發生以下狀況:Footer跑版了
因為float浮動的關係,會影響到下方Footer的標籤
CSS

這時候要在Footer的css中加上clear:both
#Footer{
clear:both;
font-size:36px;
text-align:center;
color:#fff;
width:990px;
height:50px;
background-color:#336;
margin:0 auto;
}


看似簡單的語法,卻是大多數人所不知道的訣竅
甚至不斷的在所有css語法中加上一堆自認為有可能解救的方式卻徒勞無功
透過上課進修與同仁之間的經驗分享
讓工作事半功倍,初學者能得心應手
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所