门户站基础css样式命名、应用原则和部分门户站的全局CSS

门户站基础
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;}