CSS样式表手实用手册与讲解.docx
《CSS样式表手实用手册与讲解.docx》由会员分享，可在线阅读，更多相关《CSS样式表手实用手册与讲解.docx（28页珍藏版）》请在冰点文库上搜索。
CSS样式表手实用手册与讲解
自定义页面样式1
使用说明：
1
页面结构2
头部说明4
主体定制8
主体背景（跨三栏）设置8
左边栏背景设置8
中间栏背景设置8
右边栏背景设置9
底部定制10
底部背景修改10
底部文字修改10
模块定制11
模块标题修改11
模块边框修改12
模块背景修改12
普通文字修改12
链接文字修改13
学校名称修改13
模块标题文字修改13
明细页标题文字修改14
信息陈列标题文字修改14
简单说明文字修改14
分类列表文字修改15
页首连接文字修改16
小技巧17
CSS标签定义对照表18
样式结构图21
Pictures图文件范例说明24
小图示24
论坛图档25
完成制作26
自定义页面样式
使用说明：
本软件的页面样式设计采用了大量的ＣＳＳ定义，因此，本手册仅限于熟悉ＣＳＳ编写规则的专业网页设计制作人员使用。
当从往站后台下载自定义页面样式文件后，解压缩您可以看到如下所示一些档案：
∙如图所示，在Example目录下，有两个文件夹（catalog、style）和一个档案（index.html）。
catalog文件夹内存放网页范例内容，供您预览使用，请不要随意更改；
style文件夹包含两个档案（style.css、font.css）以及两个文件夹（images、pictures），更改这些档案将从新设定当前页面样式的显示效果：
ostyle.css 主样式表单，包含绝大部分的样式定义；
ofont.css 字型样式表单，简要定义了一些字型与字号大小；
oimages 存放样式表单中引用到的图档的文件夹，在样式表单里引用到的所有背景图都存放在此；
opictures 是存放样式表单中没有引用、但在页面中引用的图档。
∙双击"index.html"，开启网页制作范本页面、预览当前所有页面的显示效果；
同样，您对css样式的任意修改都可以通过刷新该范例页面来预览。
页面结构
页面的结构如下图：
背景修改
请通过修改样式表单来设定页面整体背景的背景色或者背景图。
∙修改背景色
o用任意文本编辑器打开style.css，找到下面这段样式：
body{
...
background:
#8DCF2Furl（"images/bg.gif"）;
...
}
o其中background:
#8DCF2Furl（"images/bg.gif"）便是设置页面的背景，将以上css代码改动如下，页面的背景色就变成了black（黑色）：
body{
...
background:
black;
...
}
∙修改背景图
o同上，找到"body"所在的那段代码片段。
o将以上CSS代码改动如下，页面的背景图就变成了mybg.gif：
body{
...
background:
url（"images/mybg.gif"）;
...
}
间距修改
请按照下列方法，设定网页与浏览器的间距。
∙用任意文本编辑器打开style.css，找到下面这段样式：
body{
margin:
10px;
...
...
}
∙将上面这段css代码改动如下，网页与浏览器的间距（上下左右都有间距）就变成了25像素：
body{
margin:
25px;
...
}
∙
头部说明
头部的结构如下图：
学校名称文字修改
用任意文本编辑器打开font.css，找到下面这段样式，修改"｛｝"内的样式代码。
pany{
font-family:
Arial,Tahoma,"MSSansSerif",Geneva,sans-serif;
font-size:
14px;
font-weight:
bold;
}
提示：
"font-family"设定字型，"font-size"设定字号，"font-weight"设定文字的粗细。
关于文字样式的设定，请参考「文字修改」中的「普通文字样式修改方法」。
页首连结定制
请通过修改样式表单来修改文字前的小图、链接文字的颜色，调整整个页首链接导航条的位置等。
∙页首连结小图修改
o用任意文本编辑器打开style.css，找到下面这段样式，"nav_li1.gif"为默认的显示图形，"nav_li2.gif"为鼠标移上后的小图。
div.navbarlia,
div.navbarlia:
link,
div.navbarlia:
visited{
...
...
background:
url（"images/nav_li.gif"）no-repeat050%;
}
div.navbarlia:
hover{
...
...
background:
url（"images/nav_li2.gif"）no-repeat050%;
}
o如果要修改这两张图形，请重新制作两张新的图形，覆盖images文件夹内的原有档案；如果不需要小图显示，请将"background..."这行代码删除。
∙页首链接文字样式修改
o用任意文本编辑器打开font.css，找到下面这段样式，横线上方为鼠标移上前的文字样式，横线下方为鼠标移上后的文字样式。
div.navbarlia,
div.navbarlia:
link,
div.navbarlia:
visited{
font-weight:
bold;
color:
#FFF;
text-decoration:
none;
}
div.navbarlia:
hover{
color:
#FF0;
border-top:
1px#FF0solid;
}
o
提示：
关于文字样式设定，请参照「文字修改」中的「带链接的文字样式修改方法」。
∙页首连结定位
o用任意文本编辑器打开style.css，找到下面这段样式，其中"bottom:
0px"表示导航栏与头部的最下端的距离为0，"right:
-1px"表示导航栏与头部右端的距离为-1像素，也就是导航栏超出头部的右侧一个像素。
div.navbar{
position:
absolute;
bottom:
0px;right:
-1px;z-index:
100;
...
...
}
∙banner定位
用任意文本编辑器打开style.css，找到下面这段样式，"right:
10%"表示banner与头部的最右端的距离为头部宽度的10%，"top:
10px"表示banner与头部顶端的距离为10像素。
div.banner{
...
...
top:
10px;
right:
10%;
}
头部高度设定
当logo高度较小或者banner高度过大时，banner将盖住网页的部分内容，此时请通过在样式表单中修改网页头部高度来解决这个问题。
∙用任意文本编辑器打开style.css，找到下面这段样式
div.headdiv.layer_03{
background:
url（"images/hd_bgr.gif"）no-repeattopright;
}
∙在"div.headdiv.layer_03{}"中增加一个高度"height"的设定，改动如下，头部的高度就变成您所设定的值（本例中设定头部的高度为150像素）。
div.headdiv.layer_03{
background:
url（"images/hd_bgr.gif"）no-repeattopright;
height:
150px;
主体定制
主体背景（跨三栏）设置
∙用任意文本编辑器打开style.css，找到下面这段样式，其中，background已经定义了主体的背景，将制作好主体背景图命名为"bd_bg.gif"，放到images文件夹中即可。
以下例子中背景是居左朝下并且不平铺，如需要对背景的平铺方式进行修改。
table.containertd.body{
...
background:
#FFFurl（"images/bd_bg.gif"）no-repeatleftbottom;
...
}
左边栏背景设置
∙用任意文本编辑器打开style.css，找到下面这段样式，background已经定义了主体的背景，制作好第一栏背景图，命名为"col_01bg.gif"，放到images文件夹中即可；
以下例子中背景是朝上对齐并且横向平铺，如果需要对背景的平铺方式进行修改。
td.col_01{
border-right:
1px#6CA51Asolid;
background:
url（"images/col_01bg.gif"）repeat-x;
}
中间栏背景设置
∙用任意文本编辑器打开style.css，找到下面这段样式。
td.col_02{
}
∙如下，在其后添加另一段样式代码，并制作好第二栏背景图，命名为"col_02bg.gif"，放到images文件夹中；
以下例子中背景是朝上对齐并且横向平铺，如果需要对背景的平铺方式进行修改。
td.col_02{
background:
url（"images/col_02bg.gif"）repeat-x;
}
右边栏背景设置
∙用任意文本编辑器打开style.css，找到下面这段样式。
td.col_03{
}
∙如下，在其后添加另一段样式代码，并制作好第三栏背景图，命名为"col_03bg.gif"，放到images文件夹中；
以下例子中背景是朝上对齐并且横向平铺，如果需要对背景的平铺方式进行修改。
td.col_03{
background:
url（"images/col_03bg.gif"）repeat-x;
}
∙
底部定制
底部背景修改
∙用任意文本编辑器打开style.css，找到下面这段样式。
div.footdiv.layer_01{
...
background:
#8B720Curl（"images/ft_bg.gif"）repeat-x;
...
}
底部文字修改
∙用任意文本编辑器打开font.css，找到下面这段样式。
div.footdiv.copyright{
font-size:
9pt;
font-family:
verdana,Tahoma,"MSSansSerif",Geneva,sans-serif;
color:
#000;
}
模块定制
模块标题修改
∙标题小图修改
将制作好标题小图命名为bd_bg.gif，放到images文件夹中即可；如果要更改标题文字与小图的距离，请用任意文本编辑器打开style.css，找到下面这段样式，修改"padding:
5px01px20px"中的"20px"，该值越大则文字离图越远，反之则越近。
div.md_topdiv.layer_01div{
...
background:
url（"images/icon_mdl_title.gif"）no-repeat0px50%;
padding:
5px01px20px;
...
}
∙标题文字修改
用任意文本编辑器打开font.css，找到下面这段样式。
div.md_topdiv.layer_01div{
font-size:
14px;
font-weight:
bold;
font-family:
verdana;
color:
#000;
}
∙标题隔线修改
用任意文本编辑器打开style.css，找到下面这段样式。
div.md_topdiv.layer_01div{
...
border-bottom:
1px#558A0Bsolid;
...
}
提示：
以上范例是为标题的下方设定一条高度为1像素，颜色为#558A0B的细实线。
模块边框修改
∙模块边框修改
用任意文本编辑器打开style.css，找到下面这段样式，并在"{}"中加入你所设定的样式。
div.md_middle{
}
模块背景修改
∙背景修改
用任意文本编辑器打开style.css，找到下面这段样式，并在"{}"中加入你所设定的样式。
div.md_middle{
}
普通文字修改
∙用任意文本编辑器打开font.css，找到下面这段样式，并参照字型修改范例来修改。
body,td,div,span{
font-family:
Tahoma,"MSSansSerif",Geneva,sans-serif;
font-size:
12px;
}
input,select,textarea,marquee{
font-family:
Tahoma,"MSSansSerif",Geneva,sans-serif;
font-size:
12px;
}
提示：
"body、td,div、span"设定的是一般区域的字型样式；
"input,select,textarea,marquee"设定的是输入框、选择框、文本输入区域以及跑马灯的字型样式。
链接文字修改
∙用任意文本编辑器打开font.css，找到下面这段样式，并参照字型修改范例来修改。
a:
link,a:
visited{
color:
#457302;
}
a:
hover{
color:
#D37225;
}
提示：
"a:
link,a:
visited"设定的是鼠标移上前字型的样式，"a:
hover"设定的是鼠标移上后字型的样式。
学校名称修改
∙用任意文本编辑器打开font.css，找到下面这段样式，并参照字型修改范例来修改。
pany{
font-family:
Arial,Tahoma,"MSSansSerif",Geneva,sans-serif;
font-size:
14px;
font-weight:
bold;
}
模块标题文字修改
∙用任意文本编辑器打开font.css，找到下面这段样式，并参照字型修改范例中的普通文字样式范例来修改。
div.md_topdiv.layer_01div{
font-size:
14px;
font-weight:
bold;
font-family:
verdana;
color:
#000;
}
明细页标题文字修改
∙用任意文本编辑器打开font.css，找到下面这段样式，并参照字型修改范例中的普通文字样式范例来修改。
div.ptnamespan{
font-size:
14px;
font-family:
arial;
}
信息陈列标题文字修改
∙用任意文本编辑器打开font.css，找到下面这段样式，并参照字型修改范例中的普通文字样式范例来修改。
span.shadow-ptnamea,
span.shadow-ptnamea:
link,
span.shadow-ptnamea:
visited{
color:
#457302
}
span.shadow-ptnamea:
hover{
color:
#F60
}
提示：
横线以上为鼠标移上前的字型样式，横线以下为鼠标移上后的字型样式。
简单说明文字修改
∙用任意文本编辑器打开font.css，找到下面这段样式，并参照字型修改范例中的普通文字样式范例来修改。
td.shadow-text{
font-size:
12px;
}
分类列表文字修改
∙用任意文本编辑器打开style.css，找到下面这段样式，并参照字型修改范例中的普通文字样式范例来修改。
第一级分类鼠标移上之前的字型样式
.flyoutLinka,.flyoutLinka:
visited{
font-size:
14px;
color:
#2E4D01;
text-decoration:
none;
}
...
第一级分类鼠标移上之后的字型样式
.flyoutLinkOvera,.flyoutLinkOvera:
hover,.flyoutLinkOvera:
visited{
font-size:
14px;
color:
#C00;
text-decoration:
none;
}
...
第一级分类鼠标按下时的字型样式
.flyoutLinkDowna,.flyoutLinkDowna:
hover,.flyoutLinkDowna:
visited{
font-size:
14px;
color:
#C00;
text-decoration:
none;
}
...
下级分类鼠标移上之前的字型样式
.flyoutSubLinka,.flyoutSubLinka:
visited{
font-size:
14px;
color:
#2E4D01;
text-decoration:
none;
}
...
下级分类鼠标移上之后的字型样式
.flyoutSubLinkOvera,.flyoutSubLinkOvera:
hover,.flyoutSubLinkOvera:
visited{
font-size:
14px;
color:
#CC0000;
text-decoration:
none;
}
...
下级分类鼠标按下时的字型样式
.flyoutSubLinkDowna,.flyoutSubLinkDowna:
hover,.flyoutSubLinkDowna:
visited{
font-size:
14px;
color:
#004D99;
text-decoration:
none;
}
页首连接文字修改
∙用任意文本编辑器打开font.css，找到下面这段样式，并参照字型修改范例中的普通文字样式范例来修改。
div.navbarlia,
div.navbarlia:
link,
div.navbarlia:
visited{
font-weight:
bold;
color:
#FFF;
text-decoration:
none;
}
...
...
div.navbarlia:
hover{
color:
#FF0;
border-top:
1px#FF0solid;
}
∙
提示：
横线以上为鼠标移上前的字型样式，横线以下为鼠标移上后的字型样式。
小技巧
背景样式修改
常见的背景设置可以写为：
div{
background:
#FFFFFFurl（"images/bg.gif"）repeat-x5%60%;
}
其对应格式说明如下：
div{
background:
背景色url（"背景图"）是否重复背景离左边框的距离背景与上边框的距离;
}
提示：
若同时设定背景色与背景图，画面则以背景图作为填充。
提示：
范例中的"repeat-x"设定的是背景图横向平铺，若要改成纵向平铺，将"repeat-x"改成"repeat-y"即可。
隐藏暂时无须显示的网页内容
利用样式设定能够对一个网页元素（如图形、表格、文字等）进行隐藏，如信息明细页中的网页路径，请用任意文本编辑器打开style.css，找到下面这段样式，并在"{}"中加入"display:
none"，使之隐藏：
div.mo_ptdetaildiv.path{
}
CSS标签定义对照表
样式制作主要用到的CSS说明对照如下表：
CSS样式名
样式说明
示例
示例说明
body
页面主体标签
body{font-size:
12px;}
设定页面整体字号12px
form
窗体标签
form{margin:
0;}
设定页面窗体外边距0
div.container
整体最外层div
div.container{margin:
0;}
设定最外层div边距0
table.container
整体table
table.container{width:
100%}
设定页面宽度100%
td.head
头部td
td.head{background:
#fff;}
设定头部背景白色
div.head
头部div
div.head{padding-top:
5px;}
设定头部的顶部内边距5px
div.lang
语言别div
div.lang{float:
right}
设定头部语言别按钮向右浮动
div.navbar
头部导航栏
div.navbar{text-align:
right;}
设定导航栏文字向右对齐
div.logo
logo所在div
div.logo{padding:
20px;}
设定logo区内边距20px
pany
学校名称所在div
pany{font-size:
14px;}
设定学校名称字号14px
div.banner
banner所在div
div.banner{background:
#fff;}
设定banner背景白色
div.searchbar
头部搜寻栏
div.searchbar{border:
1px#999solid;}
设定头部搜寻栏边框1px灰色实线框
input.keyword
搜寻关键词
input.keyword{color:
#000;}
设定搜寻关键词体黑色
td.body
主体td
td.body{padding:
10px}
设定主体td的内边距10px
div.row_0
主体内容第一列
div.row_0{border:
1px#999solid;}
设定首页主体内容第一列的边框，每列各有左中右三栏，第二列样式名称div.row_02
table.box
左中右三栏外层表格
table.box{width:
100%;}
设定三栏总宽度是页面宽度的100%
td.col_01
左栏整体td
td.col_01{width:
20%;}
设定左栏宽度20%
td.col_02
中栏整体td
td.col_02{width:
60%;}
设定中栏宽度60%
td.col_03
右栏整体td
td.col_03{width:
20%;}
设定左栏宽度20%
div.col_01
左栏整体div
div.col_01{margin:
5px;}
设定左栏外边距5px
div.col_02
中栏整体div
div.
升级会员 