您的位置: 首页 > 技术文档 > 网页制作 > CSS布局实战系列:混沌初开
JavaScript创建可维护幻灯片效果 回到列表 大家都对vertical-align的各说各话
 CSS布局实战系列:混沌初开

作者:ximicc 时间: 2008-06-18 文档类型:翻译 来自:蓝色理想

第 1 页 CSS布局实战系列:混沌初开
第 2 页 导航菜单素材的设计
第 3 页 顶部图片视觉修饰
第 4 页 顶部图片视觉修饰
第 5 页 侧边栏导航菜单的实现
第 6 页 页面DIV布局解构
第 7 页 正文与图片的混排
第 8 页 页脚的构建
第 9 页 侧边栏友情链接

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对象也就不一样了。

点击查看效果

出处:蓝色理想
责任编辑:bluehearts

上一页 顶部图片视觉修饰 下一页 页面DIV布局解构

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
大家都对vertical-align的各说各话
详解CSS的优先权
YUI Grids CSS 解读
提高CSS代码的可读性
background-clip/origin一则运用
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:5/91个记录/页 转到 页 共9个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2