当前位置：网页设计首页 >> HTML/Xhtml >> WEB标准教程：Div+CSS布局入门教程

WEB标准教程：Div+CSS布局入门教程 (6)

2007-12-13 19:14:06 作者：来源：浏览次数：1141 文字大小：【大】【中】【小】

4、定义站点独有的样式

　　经过以上两步之后，我们已经有了一个大概的页面主题外观，接下来我们要设计站点的细节，比如，对站点导航条我们想使用与普通超链接不一样的样式，如:蓝色、加粗、字体更大、再加上有立体效果的背景图:

. pageNav a:link, . pageNav a:hover, . pageNav a:visted (Color:#36c;
　　font-weight:bold; font-size:120%; background: url(images/bg_siteMenu.jpg) #36c;
　　)

　　对于栏目导航，我们想给每个栏目连接加上背景色，并且有鼠标滑过和移出的效果。栏目导航区的html代码为:

　　栏目导航区对应的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文件。