0

0

CSS网页布局入门教程10:带当前标识的标签式横向导航_基础教程

PHP中文网

PHP中文网

发布时间:2016-05-16 12:07:09

|

2326人浏览过

|

来源于php中文网

原创

当前标识指用户点击该频道或栏目,该栏目的标签呈现出与其他标签不同的颜色用以提示用户所处的位置。
这种设计是网站设计中相当简单而且是相当经典的一种增进网站可用性的方式。网站让用户使用时是应该考虑到用户浏览的思考过程,糟糕的网页设计只顾及页面本身而不去考虑用户感受,优秀的设计应当是以用户为中心出发的,这样一种简单的当前频道的标识往往是许多设计师所忽略的内容,用户需要知道自已的位置,以及知道自已还能去哪里,通过对当前位置的标识,有助于让用户认清自己在网站中的方位,并引导用户访问其它频道。
从上一篇中的代码继续编写,为了让某一个频道成为一个当前所属的频道,这个频道必须有一个和其它频道不一样的背景颜色或文字,但目前我们是针对所有的a标签统一设置的背景,因此首要任务是设计一个例外情况,即当前频道,这样一个特殊的频道,我们对html中的标签做一些修改:

我们在第一个a标签中加入了一个新的id,名为current,继续看css部分的编写,先为current这个id做个颜色设计: 

#nav li a#current { background-color:#2788da; color:#fff;}

  预览一下效果,首页的背景色已经变成蓝色了

 
  

继续来完善我们的导航,页菜单下加一条横线 

#nav { height:26px; border-bottom:2px solid #2788da;}

我们给ul标签设置了高度,并且给它的底部加上了2px的实线,再次预览一下效果,和我们当初想像的标签式导航已经大同小异了,回到nav元素的定义,border-bottom是我们新加入的一个属性,指的是元素的下边框的设置,它的参数指的是2px的宽度、单实线样式、颜色值为#2788da,通过这样的设置,我们的ul标签就拥有了2px带色彩的下边框。 

蕉点AI
蕉点AI

AI电商商品图生成平台 | 智能商品素材制作工具

下载

立即学习前端免费学习笔记(深入)”;

 
 
 
 
 
 
 
 
   
 

简单的标签式的导航通过一组css的设计就算完成了,每当换一个频道页面时,只需要将id="current"移动到当前频道所在的a元素中,即可完成颜色的切换。不需要重俗人编写颜色属性,而且需要修改进也可以方便在css中修改完成。 

有关本例中应用XHTML中元素间的CSS属性继承的问题。 
何为继承呢?继承指的是每一个元素可以有多个样式,在普通情况下,他遵守最外层的样式设计,如果遇到对其自身的样式设计,他将继承外层样式的基础上,优先考虑自身的样式。
如果内层的样式和外层的样式有冲突,则最终显示的是内层的样式效果。 

本例中还接触到一个新的属性:list-style:none;在预览用的样式代码内。 
在默认情况下,ul内的li列表形式前边带有圆点的,从以前的章节可以看到。本句的意思是去掉前边默认的圆点。

以上就是CSS网页布局入门教程10:带当前标识的标签式横向导航_基础教程的内容,更多相关内容请关注PHP中文网(www.php.cn)!

相关专题

更多
C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

10

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

29

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

13

2026.01.22

PHP特殊符号教程合集
PHP特殊符号教程合集

本专题整合了PHP特殊符号相关处理方法,阅读专题下面的文章了解更多详细内容。

11

2026.01.22

PHP探针相关教程合集
PHP探针相关教程合集

本专题整合了PHP探针相关教程,阅读专题下面的文章了解更多详细内容。

8

2026.01.22

菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

55

2026.01.22

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

CSS教程
CSS教程

共754课时 | 23.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号