Web Standards Solutions 網頁設計標準規格
標題HEADING
標記文件標題最好的方法
方法A:有意義嗎?
<span class="heading">Super Cool Page Title</span>
方法B:p與b的組合技
<p><b>Super Cool Page Title</b></p>
方法C:樣式與實體
<h1>Super Cool Page Title</h1>
容易加上樣式
討厭的預設值
搜尋引擎親和力
標題順序附帶一提
更多技巧
簡單的樣式
h1{
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 4px;
border-bottom: 1px solid #999;
}
加上背景
h1{
font-family: Arial, sans-serif;
font-size: 24px;
color: #fff;
padding: 4px;
background-color: #696;
}
背景與框線
h1{
font-family: Arial, sans-serif;
font-size: 24px;
color: #666;
padding: 4px;
background-color: #ddd;
border-bottom: 2px solid #ccc;
}
平鋪背景圖
h1{
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 14px;
background: rul(10x10.gif) repeat-x bottom;
}
方便抽換的圖檔
h1{
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-left: 30px;
background: rul(icon.gif) no-repeat 0 50%;
}
容易更新
變色龍效果:使用兩種顏色的圖檔,一個有色、一個透明
<h3><img src="http://images.fastcompany.com/icon/first_imp.gif" width="13" height="13" alt="*" />
FIRST IMPRESSION</h3>
h3 img{
background: #696; /*設定背景色,透過圖片的透明*/
vertical-algin: middle; /*讓圖片與文字對齊*/
}
概念:以CSS指定背景色彩會出現在任何頁面內指定的圖檔的後面
h1{
font-family: Arial, sans-serif;
font-size: 24px;
color: #fff;
padding-left: 30px;
background:#696 rul(transparent_icon.gif) no-repeat 0 50%;
}
全站熱搜
留言列表