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