CSS样式表手实用手册与讲解Word下载.docx
《CSS样式表手实用手册与讲解Word下载.docx》由会员分享，可在线阅读，更多相关《CSS样式表手实用手册与讲解Word下载.docx（28页珍藏版）》请在冰点文库上搜索。
oimages 存放样式表单中引用到的图档的文件夹，在样式表单里引用到的所有背景图都存放在此；
opictures 是存放样式表单中没有引用、但在页面中引用的图档。
∙双击"
index.html"
，开启网页制作范本页面、预览当前所有页面的显示效果；
同样，您对css样式的任意修改都可以通过刷新该范例页面来预览。
页面结构
页面的结构如下图：
背景修改
请通过修改样式表单来设定页面整体背景的背景色或者背景图。
∙修改背景色
o用任意文本编辑器打开style.css，找到下面这段样式：
body{
...
background:
#8DCF2Furl（"
images/bg.gif"
）;
}
o其中background:
）便是设置页面的背景，将以上css代码改动如下，页面的背景色就变成了black（黑色）：
black;
∙修改背景图
o同上，找到"
body"
所在的那段代码片段。
o将以上CSS代码改动如下，页面的背景图就变成了mybg.gif：
url（"
images/mybg.gif"
间距修改
请按照下列方法，设定网页与浏览器的间距。
∙用任意文本编辑器打开style.css，找到下面这段样式：
margin:
10px;
∙将上面这段css代码改动如下，网页与浏览器的间距（上下左右都有间距）就变成了25像素：
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,
visited{
...
images/nav_li.gif"
）no-repeat050%;
hover{
images/nav_li2.gif"
o如果要修改这两张图形，请重新制作两张新的图形，覆盖images文件夹内的原有档案；
如果不需要小图显示，请将"
background..."
这行代码删除。
∙页首链接文字样式修改
o用任意文本编辑器打开font.css，找到下面这段样式，横线上方为鼠标移上前的文字样式，横线下方为鼠标移上后的文字样式。
color:
#FFF;
text-decoration:
none;
}
#FF0;
border-top:
1px#FF0solid;
o
关于文字样式设定，请参照「文字修改」中的「带链接的文字样式修改方法」。
∙页首连结定位
o用任意文本编辑器打开style.css，找到下面这段样式，其中"
bottom:
0px"
表示导航栏与头部的最下端的距离为0，"
right:
-1px"
表示导航栏与头部右端的距离为-1像素，也就是导航栏超出头部的右侧一个像素。
div.navbar{
position:
absolute;
0px;
right:
-1px;
z-index:
100;
∙banner定位
用任意文本编辑器打开style.css，找到下面这段样式，"
10%"
表示banner与头部的最右端的距离为头部宽度的10%，"
top:
10px"
表示banner与头部顶端的距离为10像素。
div.banner{
10%;
头部高度设定
当logo高度较小或者banner高度过大时，banner将盖住网页的部分内容，此时请通过在样式表单中修改网页头部高度来解决这个问题。
∙用任意文本编辑器打开style.css，找到下面这段样式
div.headdiv.layer_03{
images/hd_bgr.gif"
）no-repeattopright;
∙在"
div.headdiv.layer_03{}"
中增加一个高度"
height"
的设定，改动如下，头部的高度就变成您所设定的值（本例中设定头部的高度为150像素）。
height:
150px;
主体定制
主体背景（跨三栏）设置
∙用任意文本编辑器打开style.css，找到下面这段样式，其中，background已经定义了主体的背景，将制作好主体背景图命名为"
bd_bg.gif"
，放到images文件夹中即可。
以下例子中背景是居左朝下并且不平铺，如需要对背景的平铺方式进行修改。
table.containertd.body{
#FFFurl（"
images/bd_bg.gif"
）no-repeatleftbottom;
左边栏背景设置
∙用任意文本编辑器打开style.css，找到下面这段样式，background已经定义了主体的背景，制作好第一栏背景图，命名为"
col_01bg.gif"
，放到images文件夹中即可；
以下例子中背景是朝上对齐并且横向平铺，如果需要对背景的平铺方式进行修改。
td.col_01{
border-right:
1px#6CA51Asolid;
images/col_01bg.gif"
）repeat-x;
中间栏背景设置
∙用任意文本编辑器打开style.css，找到下面这段样式。
td.col_02{
∙如下，在其后添加另一段样式代码，并制作好第二栏背景图，命名为"
col_02bg.gif"
，放到images文件夹中；
images/col_02bg.gif"
右边栏背景设置
td.col_03{
∙如下，在其后添加另一段样式代码，并制作好第三栏背景图，命名为"
col_03bg.gif"
images/col_03bg.gif"
底部定制
底部背景修改
div.footdiv.layer_01{
#8B720Curl（"
images/ft_bg.gif"
底部文字修改
∙用任意文本编辑器打开font.css，找到下面这段样式。
div.footdiv.copyright{
9pt;
verdana,Tahoma,"
#000;
模块定制
模块标题修改
∙标题小图修改
将制作好标题小图命名为bd_bg.gif，放到images文件夹中即可；
如果要更改标题文字与小图的距离，请用任意文本编辑器打开style.css，找到下面这段样式，修改"
padding:
5px01px20px"
中的"
20px"
，该值越大则文字离图越远，反之则越近。
div.md_topdiv.layer_01div{
images/icon_mdl_title.gif"
）no-repeat0px50%;
5px01px20px;
∙标题文字修改
用任意文本编辑器打开font.css，找到下面这段样式。
div.md_topdiv.layer_01div{
verdana;
∙标题隔线修改
用任意文本编辑器打开style.css，找到下面这段样式。
border-bottom:
1px#558A0Bsolid;
以上范例是为标题的下方设定一条高度为1像素，颜色为#558A0B的细实线。
模块边框修改
∙模块边框修改
用任意文本编辑器打开style.css，找到下面这段样式，并在"
{}"
中加入你所设定的样式。
div.md_middle{
模块背景修改
∙背景修改
普通文字修改
∙用任意文本编辑器打开font.css，找到下面这段样式，并参照字型修改范例来修改。
body,td,div,span{
Tahoma,"
12px;
input,select,textarea,marquee{
body、td,div、span"
设定的是一般区域的字型样式；
input,select,textarea,marquee"
设定的是输入框、选择框、文本输入区域以及跑马灯的字型样式。
链接文字修改
a:
link,a:
#457302;
#D37225;
visited"
设定的是鼠标移上前字型的样式，"
hover"
设定的是鼠标移上后字型的样式。
学校名称修改
模块标题文字修改
∙用任意文本编辑器打开font.css，找到下面这段样式，并参照字型修改范例中的普通文字样式范例来修改。
明细页标题文字修改
div.ptnamespan{
arial;
信息陈列标题文字修改
span.shadow-ptnamea,
span.shadow-ptnamea:
#457302
#F60
横线以上为鼠标移上前的字型样式，横线以下为鼠标移上后的字型样式。
简单说明文字修改
td.shadow-text{
分类列表文字修改
∙用任意文本编辑器打开style.css，找到下面这段样式，并参照字型修改范例中的普通文字样式范例来修改。
第一级分类鼠标移上之前的字型样式
.flyoutLinka,.flyoutLinka:
visited{
14px;
#2E4D01;
第一级分类鼠标移上之后的字型样式
.flyoutLinkOvera,.flyoutLinkOvera:
hover,.flyoutLinkOvera:
#C00;
第一级分类鼠标按下时的字型样式
.flyoutLinkDowna,.flyoutLinkDowna:
hover,.flyoutLinkDowna:
下级分类鼠标移上之前的字型样式
.flyoutSubLinka,.flyoutSubLinka:
下级分类鼠标移上之后的字型样式
.flyoutSubLinkOvera,.flyoutSubLinkOvera:
hover,.flyoutSubLinkOvera:
#CC0000;
下级分类鼠标按下时的字型样式
.flyoutSubLinkDowna,.flyoutSubLinkDowna:
hover,.flyoutSubLinkDowna:
#004D99;
页首连接文字修改
小技巧
背景样式修改
常见的背景设置可以写为：
div{
#FFFFFFurl（"
）repeat-x5%60%;
其对应格式说明如下：
背景色url（"
背景图"
）是否重复背景离左边框的距离背景与上边框的距离;
若同时设定背景色与背景图，画面则以背景图作为填充。
范例中的"
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:
设定最外层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
div.banner
banner所在div
div.banner{background:
设定banner背景白色
div.searchbar
头部搜寻栏
div.searchbar{border:
1px#999solid;
设定头部搜寻栏边框1px灰色实线框
input.keyword
搜寻关键词
input.keyword{color:
设定搜寻关键词体黑色
td.body
主体td
td.body{padding:
10px}
设定主体td的内边距10px
div.row_0
主体内容第一列
div.row_0{border:
设定首页主体内容第一列的边框，每列各有左中右三栏，第二列样式名称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:
div.col_01
左栏整体div
div.col_01{margin:
设定左栏外边距5px
div.col_02
中栏整体div
div.
升级会员 