对于栏目导航，我们想给每个栏目连接加上背景色，并且有鼠标滑过和移出的效果。 栏目导航区的html代码为: <div class="catalogNav">
<ul>
<li>
<A href="1">栏目1</A>
<li>
<A href="2">栏目2</A>
<li>
<A href="3">栏目3</A>
<li>
<A href="4">栏目4</A>
<li>
<A href="5">栏目5</A>
<li>
<A href="6">栏目6</A>
</li>
</ul>
</div> |
栏目导航区对应的Css代码为: .catalogNav ul
(
margin-left: -30px;
list-style: none;
)
.catalogNav li
(
float: left;
background: #CCC;
line-height: 30px;
border: solid 1px #black;
)
.catalogNav a
(
width: 100%;
text-align: center;
height: 30px;
)
.catalogNav a:link
(
color: #666;
background: url(arrow_off.gif) #CCC no-repeat 5px 12px;
text-decoration: none;
)
.catalogNav a:visited
(
color: #666;
text-decoration: underline;
)
.catalogNav a:hover
(
color: #FFF;
font-weight: bold;
text-decoration: none;
background: url(arrow_on.gif) #F00 no-repeat 5px 12px;
) |
接下来我们还需要定义其他的站点独有的样式，如栏目标题、文章列表、文章正文、时间、注释、提示、错误等等各种样式，而且这些样式多以类和id来作为选择符。这些样式都是针对某个站点的，不适用于其他的站点，然后我们将这些样式保存为siteStyle.css文件。 这样我们就有了3个CSS文件。 SiteComm.css:任何站点都可以使用的样式文件，定义了常用的html标签样式。 SiteLayout.css:站点的布局文件，能适用于大多数的网站结构，具体细节需要调整。 siteStyle.css:站点独有的样式文件，能显示出本站点独特的风格和适应于站点的内容。 然后我们采用外部调用法:将这些样式表与页面关联起来。 <LINK rev="stylesheet" media="all" href="css/SiteComm.css" type="text/css" rel="stylesheet">
<LINK rev="stylesheet" media="all" href="css/SiteLayout.css" type="text/css" rel="stylesheet">
<LINK rev="stylesheet" media="all" href="css/siteStyle.css" type="text/css" rel="stylesheet"> | <><><>
在符合XHTML标准的设计中，我们使用外部调用法，好处不言而喻，HTML文档会变得非常的小，CSS文件被存在浏览器的缓存中，仅仅需要下载一次即可，并且你只需要修改一个文件就可以改变整个网站的样式。 并且这样我们才能通过客户端脚本，或者服务器端代码方便地改变样式表的连接地址，而快捷地实现换肤功能。
|
