橫幅設計 (網站的主標題、副標題、banner)
by 鍾玉芳, 2011-05-05 10:24, 人氣(4983)
1. 主標題文字 (大小、顏色、位置)
透過 #banner .title 設定屬性，例如:
#banner .title {
透過 #banner .title 設定屬性，例如:
#banner .title {
font-size:25px;
color:#000000;
padding-top:50px; /* 設定文字距離標題區塊「上緣」50px */
padding-left:10px; /* 設定文字距離標題區塊「左側」10px */
}
註1: "padding:50px 0px 0px 10px" 則代表距離 上、右、下、左邊界的簡寫
註2: 除了 padding 之外，margin 也是常用的定位屬性，更詳細的說明請參考: 區塊模型
2. 副標題文字 (大小、顏色、位置)
透過 #banner .info 設定屬性，例如:
#banner .info {
font-size:15px;
color:#ff0000;
margin-top:1px; /* 設定副標題「區塊」距離主標題「區塊」下緣的位置 */
margin-bottom:10px; /* 設定副標題「區塊」距離內容「區塊」上緣的位置 */
}
3. 橫幅圖片 banner
透過 #banner 中的 background 屬性，將橫幅以圖片的方式呈現，例如:
#banner {
#banner {
background:url(圖片網址); /* 將標題設成圖片 */
width:1000px; /* 標題寬度 */
height:239px; /* 標題高度 */
}
註1: 如果橫幅為 flash，請透過 [管理 / 首頁設定 / Logo] 處理
註2: 建議橫幅的圖片盡量依本來樣式的長寬進行設計，以減少不必要的變動或困擾
註3: 橫幅寬度盡量不要超過 1000px，以避免螢幕解析度較低時瀏覽的困擾，如小筆電 / ipad 等
