CSS网页制作布局实例教程

CSS混沌初开V：侧边栏导航菜单的实现
首先对教程的第四部分作一点补充。有人建议Blog的标题最好使用H1标签，以文本的形式表现标题内容，原因是不论是在CSS关闭的情况下，还是对于搜索引擎的抓取，H1标签结合文本的形式都具有更好的可访问性。这个提议很有道理，很多人也是这么做的，所以我也建议大家对之前的代码进行调整。
若使用H1标签来实现Blog标题，又想保持原来标题位置的图片的话，那么就有必要了解一下CSS中很经典的图像替换文本技术。简单点说就是在XHTML中包含了文本，并为其设置背景图片，但是要通过CSS“隐藏”文本而仅仅显示背景图片。若你对这个技术不是很了解，本站也有一篇专门关于 图像替换文本技术 的文章，希望对你有所帮助。
图像替换文本技术
这个技术有时候我们也称之为文本替换或图像替换，其强调的核心是在HTML代码中我们使用文本，然后通过一些方法将文本“隐藏”，而仅显示背景或其它形式的图片，这样在保证可访问性的同时，也使得页面因图像的应用而更加美观。比如我们可以将图片设置为背景，让后利用text-indent使文本有足够的缩进实现隐藏，代码如下：
h1 {
width: 692px;
height: 90px;
text-indent: -9999px;
background: url(images/header.jpg);
margin: 0;
padding: 0;
}
其中的width和height是必须定义的，且需和背景图片的尺寸保持一致。text-align: center被转移到了body标签中，这样页面中所有的内容都被定义为居中显示，而那些不需要居中的内容，如文章正文，我们可以再添加text-align: left进行覆盖。当然对于外围容器而言，我们利用margin: 0px auto使其在水平方向上保持在页面的中部。
导航菜单的实现
首先定义导航外围容器的样式：
#left {
width: 178px;
}
现在外围容器我们只要简单的定义其宽度，并赋予left的id名。在left容器中，我们添加一个名为navcontainer的子容器来放置导航菜单。实现导航的标签推荐使用无序列表ul，通过CSS我们可以改变其外观和形式。HTML结构如下：
<div id="navcontainer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">ximicc</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Photo roll</a></li>
</ul>
</div>

ul和li标签构建了一个简单的项目列表，其项目符号默认为小圆点，这是我们不需要的。利用CSS可以去掉那些小圆点，并用背景图片的形式替换以我们制作好的图标：

#navcontainer {
width: 178px;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
text-indent: 20px;
letter-spacing: 1px;
border-bottom: 1px solid #fff;
}
第一段代码还是定义导航容器的宽度，其值与left容器相同。第二段代码主要用于改变列表的外观，margin和padding确保导航项目的周围没有空隙，并去除了列表项默认的缩进，list-style-type则定义了列表的项目符号为无。text-indent使文本左边空出一定的空间，以便在之后的步骤中定义背景图片，并保证背景图不会被文本遮盖。最后一行代码在每个导航项目的底部生成一条白线，兼具美化和分界的功能。
接下来是链接外观的定义：
#navcontainer a {
display: block;
width: 178px;
height: 22px;
}
以上代码是对导航内a标签的CSS定义，作用于导航中的每个链接元素。display: block将链接对象转换为块级元素，然后再定义其宽和高，使得链接能具有类似按钮一样矩形的触发区域，并且让我们可以利用伪类a:hover来定义鼠标经过链接时的翻转效果，如在第二段代码中展示的简单的改变背景色或背景图片：

#navcontainer a:link, #navcontainer a:visited {
background: url(images/bg_navbutton.gif);
color: #5C604D;
text-decoration: none;
}
#navcontainer a:hover {
background: url(images/bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}
第一段代码定义了链接文本的颜色，并设置text-decoration属性为none来去除链接默认的下划线。导航的设计往往要求简洁、明了，并且具有很强的指示性，所以我在这里定义了一个额外的样式#current来表现当前页面处于导航中的哪个项目：
#navcontainer li a#current {
background: url(images/bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}
名为current的样式针对的是列表项目li中的链接元素，其属性的定义与链接的hover状态样式是一样的，现在我们要做的事情就是把这个样式应用到HTML中：
<div id="navcontainer">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact me</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Photo roll</a></li>
</ul>
</div>
现在的current样式是应用在第一个li上，也就是浏览器解析后“Home”菜单较之其它的菜单项目有其独特的外观，表明当前的页面是属于“Home”这里栏目的。当然页面变化了，current样式应用的li对象也就不一样了。

最新评论