采用XHTML和CSS设计可重用可换肤网页

时间:2007-12-30 22:33:52 来源: 作者: 点击:次出处:技术无忧

关键字：xhtml css div

　　如此，我们定义了一个三列的页面布局:顶部自适应页面宽度。中间三列自适应页面。底部自适应页面宽度，当然您也可以将页面定义为中间只有两列等等，您只需要调整layout.css文件即可，这样您可以灵活的修改页面的布局，让页面外观发生根本的变化，而不必动到HTML源文件，这一点对于服务器端生成代码的程序尤为重要。更多关于CSS布局的资料，请参见:http://www.w3cn.org/article/layout/2004/55.html
　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;
　　) 你有email邮箱吗？经常收到垃圾邮件而烦吗？立即使用邮箱LOGO在线制作酷Email logo图片