門戶站基礎
css
樣式命名、
應用原則和部分門戶站的全局
CSS
樣式定義案例
1.CSS
屬性應用原則。
原則
1
：首頁
DIV
最小塊級單位須設置高度；子頁可能添加資料的
DIV
塊不應設置高度
;
原則
2
：
css
樣式繼承關係必須控制在三層以內；
原則
3
：
對於浮動所產生的
IE6BUG,
在全局樣式裏面應定義
.clear{clear:both;height;0px;
overflow: hidden;}
原則
4
：所有頁面文件的編碼格式統一爲：
UTF-8;
2. CSS
命名規範。
全局樣式
base.css
指所有頁面通用的樣式，或者公共塊的樣式
;
首頁樣式
index.css
頻道頁面樣式
channel.css
詳細頁面樣式
detail.css
如果有特殊單獨頁面樣式，可另取樣式命。
3.
頁面框架結構保留字。
頁面容器：＃
wrap
頁面頭部：
#header
頁面中心內容：
#maincontent
頁面底部：
#footer
橫向方位容器
1
：
main
，
side
橫向方位容器
2
：
leftframe
，
midframe
，
rightframe
橫向分段容器：
section
，
field
，
column
盒子內容屬性：
contentbg
盒子上方屬性：
topbg
盒子下方屬性：
bottombg
盒子左邊屬性：
leftbg
盒子右邊屬性：
rightbg
4.
導航保留字。
導航：
nav
主導航：
mainnav
子導航：
subnav
頂導航：
topnav
邊導航：
sidebar
左導航：
leftsidebar
右導航：
rightsidebar
菜單：
menu
子菜單：
submenu
下拉菜單：
dropmenu
快速菜單：
quickmenu
5.
功能保留字。
列表：
list
標題：
title
摘要：
intro
內容：
text
按扭：
btn
搜索：
search
登陸：
login
註冊：
regsiter
提示信息：
msg
小技巧：
tips
圖標
: icon
滾動：
scroll
6.
根目錄文件夾命名存放方式。
例如：
總網站文件存放於
F
盤
web
下；
Web
下
應該包含
images
存放所有網站直接插入的圖片；
imagestemp
存放所有網站直接插入，但後期一定被程序替換的圖片。
imagesad
存放網站所有的廣告圖片；
style images
存放公共或單獨頁面樣式所涉及的樣式圖片；
存放公共樣式表或單獨頁面樣式表；
include
存放網站所有的包含頁面；
js
存放網站所有的
JS
效果文件
XXXX
頻道頁文件夾
style
存放所有頻道頁面所涉及到的樣式圖片和樣式表；
存放所有該頻道下的子頁面；
7.
註釋。
頁面和樣式表裏面
容易混淆，或比較重要的樣式，框架樣式
都應寫註釋
頁面內註釋格式爲
<!--header--> --------------------------
爲開始
<!--//header--> --------------------------
爲結束
樣式表內註釋格式爲：
/*XXXX
樣式開始
*/
/*XXXX
樣式結束
*/
部分門戶站全局
CSS
樣式定義表
1.
網易
body
{
text-align:
center;
font-family:"
宋體
",
arial;margin:0;
padding:0;
background:
#FFF; font-size:12px; color:#000;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0; }
li{list-style-type:none;}
img{vertical-align:top;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;font-size:12px; font-weight:normal;}
/* Link */
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
2.
MSN
body
{padding:0;margin:0;text-align:center;color:#666;font-size:12px;font-family:tahoma,
arial,sans-serif;}
h1, h2, h3, h4, h5, h6, form, div, p, i, img, ul, li, ol, table, tr, td,th, fieldset,
label, legend,button,input { margin:0;padding:0;}
li{list-style:none;}
a img{border:none;}
a:link{text-decoration:none;color:#07519A;}
a:visited{text-decoration:none;color:#07519A;}
a:active,a:hover{text-decoration:underline;color:#07519A;}
3.
搜狐
/*
全局
CSS
定義
*/
body{font-family:'
宋體
';text-align:center;margin:0
auto;padding:0;background:#FFF;font-size:12px;color:#333;}
body > div{text-align:center;margin-right:auto;margin-left:auto;}
div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;}
img,a img{border:0;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}
ul,ol,li{list-style:none}
table,td,input{font-size:12px}
/*
默認鏈接顏色
*/
a{outline-style:none;color:#333;text-decoration:none}
a:hover{color:#c00;text-decoration:underline;}