位置: 编程技术 - 正文

CSS网页布局入门教程10:带当前标识的标签式横向导航(css布局的经典网站)

编辑:rootadmin
当前标识指用户点击该频道或栏目,该栏目的标签呈现出与其他标签不同的颜色用以提示用户所处的位置。 这种设计是网站设计中相当简单而且是相当经典的一种增进网站可用性的方式。网站让用户使用时是应该考虑到用户浏览的思考过程,糟糕的网页设计只顾及页面本身而不去考虑用户感受,优秀的设计应当是以用户为中心出发的,这样一种简单的当前频道的标识往往是许多设计师所忽略的内容,用户需要知道自已的位置,以及知道自已还能去哪里,通过对当前位置的标识,有助于让用户认清自己在网站中的方位,并引导用户访问其它频道。 从上一篇中的代码继续编写,为了让某一个频道成为一个当前所属的频道,这个频道必须有一个和其它频道不一样的背景颜色或文字,但目前我们是针对所有的a标签统一设置的背景,因此首要任务是设计一个例外情况,即当前频道,这样一个特殊的频道,我们对HTML中的标签做一些修改: <ul id="nav"> <li id="current"><a href="/index.asp">主页</a></li> <li><a href="/Sort/List_4.html">DIV+CSS教程</a></li> <li><a href="/Sort/List_5.html">常用代码</a></li> <li><a href="/Sort/List_6.html">水晶图标</a></li> <li><a href="/Sort/List_7.html">幻灯图片</a></li> <li><a href="/Sort/List_.html">软件下载</a></li> <li><a href="/css2/">CSS2.0实用手册</a></li> </ul> 我们在第一个a标签中加入了一个新的id,名为current,继续看css部分的编写,先为current这个id做个颜色设计: #nav li a#current { background-color:#da; color:#fff;} 预览一下效果,首页的背景色已经变成蓝色了 主页 DIV+CSS教程 常用代码 水晶图标 幻灯图片 软件下载 CSS2.0实用手册 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]继续来完善我们的导航,页菜单下加一条横线 #nav { height:px; border-bottom:2px solid #da;} 我们给ul标签设置了高度,并且给它的底部加上了2px的实线,再次预览一下效果,和我们当初想像的标签式导航已经大同小异了,回到nav元素的定义,border-bottom是我们新加入的一个属性,指的是元素的下边框的设置,它的参数指的是2px的宽度、单实线样式、颜色值为#da,通过这样的设置,我们的ul标签就拥有了2px带色彩的下边框。 主页 DIV+CSS教程 常用代码 水晶图标 幻灯图片 软件下载 CSS2.0实用手册 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]简单的标签式的导航通过一组css的设计就算完成了,每当换一个频道页面时,只需要将id="current"移动到当前频道所在的a元素中,即可完成颜色的切换。不需要重俗人编写颜色属性,而且需要修改进也可以方便在css中修改完成。 有关本例中应用XHTML中元素间的CSS属性继承的问题。 何为继承呢?继承指的是每一个元素可以有多个样式,在普通情况下,他遵守最外层的样式设计,如果遇到对其自身的样式设计,他将继承外层样式的基础上,优先考虑自身的样式。 如果内层的样式和外层的样式有冲突,则最终显示的是内层的样式效果。 本例中还接触到一个新的属性:list-style:none;在预览用的样式代码内。 在默认情况下,ul内的li列表形式前边带有圆点的,从以前的章节可以看到。本句的意思是去掉前边默认的圆点。

推荐整理分享CSS网页布局入门教程10:带当前标识的标签式横向导航(css布局的经典网站),希望有所帮助,仅作参考,欢迎阅读内容。

CSS网页布局入门教程10:带当前标识的标签式横向导航(css布局的经典网站)

文章相关热门搜索词:html+css网页布局,css div 网页布局技术教程,css网页布局在线生成,css网站布局实录,html+css网页布局,css网页布局实例教程,css网页布局实例教程,css 网页布局,内容如对您有帮助,希望把文章链接给更多的朋友!

CSS网页布局入门教程:带当前标识的标签式横向导航图片美化版 虽然完成了标签式导航,但是广场状的导航似乎并不能够顺应现在的设计潮流,其实导航不仅可以使用css的颜色来定义,同样可以采用精心设计的图片

CSS网页布局入门教程:纵向导航菜单 纵向导航菜单也是网站应用中的一种重要形式,所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式。先看一下效果吧!如图

CSS网页布局入门教程:下拉及多级弹出式菜单 下拉及弹出式菜单是网站设计中常用导航形式,这种菜单形式能够充分利用页面现在空间隐藏与显示更多内容,并能对内容进行合理的分类显示,是一

标签: css布局的经典网站

本文链接地址:https://www.jiuchutong.com/biancheng/372065.html 转载请保留说明!

上一篇:CSS网页布局入门教程9:用CSS设计网站导航——横向导航(如何使用css进行网页布局,举例说明)

下一篇:CSS网页布局入门教程11:带当前标识的标签式横向导航图片美化版(css网站布局实录 pdf)

  • 工程设备一览表
  • 非金融企业利息收入计入什么科目
  • 季度费用支出怎么做
  • 冲红的发票要拿回来吗
  • 财务报表可以补充分类吗
  • 应付职工薪酬期末余额在借方表示什么
  • 金税盘全额抵扣申报流程
  • 销售使用过的固定资产如何开票
  • 弃置费用调整
  • 水费收取违约金投诉回复
  • 三证合一 更新
  • 怎么红冲暂估成本
  • 成本法和权益法大白话
  • 其他业务收入是什么意思
  • 事业单位购买固定资产费自行
  • 代销协议书
  • 材料票可以直接在税务局开吗
  • 科目编码首位与分类编号不符,接受此编码吗
  • 小规模纳税人申报表怎么填
  • 资源税计税依据含不含增值税
  • 项目结束,财务应该怎么做
  • 进口关税和进口增值税怎么算
  • 低值易耗品包括哪些内容?属于什么科目?
  • 公司的职工教育是指什么
  • 税收滞纳金可以抵税吗
  • 在资本相对充足的情况下,为什么还要进一步引进外资
  • token过期处理
  • 瓜纳华托大学世界排名
  • 专利权属于什么会计科目
  • 奥杜邦的祈祷经典语录
  • Vision Transformer 模型详解
  • 初级职称到中级职称需要上继续教育课吗
  • jsp连接mysql8数据库
  • 删除cmd命令记录
  • lsmod命令结果详解
  • 发票内容服务费可以吗?没有明细
  • 企业应采用
  • 销售退回的会计科目
  • 小规模自开专票办理流程
  • 银行回单应该如何处理
  • python中socket怎么用
  • 城建税的减免规定有哪些
  • sql server2008代理无法启动
  • 购买服务费用
  • 租金收入会计科目
  • 一个公户从农业银行开户
  • 发生销售退回账务处理
  • 单位收风险金是什么意思
  • 注销退税后又补税了
  • 怎么对外投资
  • 公司车过户给个人多久不用补税
  • 电商平台 流量
  • 汇算清缴补交所得税的分录
  • 双倍余额递减法例题及解析
  • 对公账户的流程
  • 财务费用包括什么项目
  • 一般纳税人月销售额10万以下
  • 在建工程账务处理问题有哪些
  • 应收应付可以相互冲销吗
  • 微软补丁星期二更新吗
  • qq远程协助点不动
  • win2003出现各种硬件故障问题时的处理方法
  • .cda是什么文件
  • 电脑打开win
  • js与css有什么区别
  • jquery移除
  • python条件语句的基本结构
  • 编写python
  • Linux文本处理工具的实验总结
  • python遍历列表判断相同元素
  • JavaScript数据类的特点
  • zabbix 微信
  • python源码分析工具
  • 神州浩天财务软件
  • 江苏国税局官网
  • 厂房原值如何核定
  • 重庆国税局客服电话
  • 沙子属于矿产资源
  • 报考地税局的要求是什么
  • 河北省电子税务局手机登录入口
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设