位置: 编程技术 - 正文

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)

  • 金税三期的内容是什么
  • 小规模纳税人税控系统
  • 发票未到怎么暂估入账
  • 企业给员工租的公寓楼都是什么样的
  • 注册资本金实缴和认缴区别
  • 项目固定资产投资强度
  • 人力资源公司代招的岗位可以去吗
  • 企业的财务报表
  • 应收账款补提坏账是什么意思
  • 员工入职第一个月交社保吗
  • 合同印花税怎么交
  • 租赁到期日 英语
  • 企业发生的咨询费用
  • 供暖税收分类编码是多少
  • 电商刷单的财务操作
  • 公司拍卖车牌
  • 收到保险公司赔款计入什么科目
  • 企业所得税季报人数怎么填
  • vivo手机可以安装鸿蒙
  • 无形资产入账摊销
  • 租赁合同维修费用
  • 给客户样品需要收钱吗
  • 怎么使用win10
  • 日历怎么不能添加事件了
  • scm wms
  • 在建工程主要包括哪些
  • 股权转让合同怎么解除
  • 生产物料报废
  • 增值税应税行为是什么意思
  • 公司为员工发放生日福利
  • 购货人与收货人的关系
  • 补缴上年度未开票收入增值税,怎么做账
  • 房抵债权
  • 事业单位增值税可以抵扣吗
  • 勾选确认发票后能撤销吗
  • 公司处理固定资产车辆怎么开发票
  • ts和js混用
  • 增值税和所得税区别
  • js数组分组并排序
  • 文本超出单元格
  • php隐藏图片地址
  • wordpress怎么用
  • 物业收取停车费需要业主同意吗
  • 房产税的租金收入按什么计算的
  • 临时工享受的福利有哪些
  • openglskia是什么意思
  • cms访问出错
  • mysql查询性能优化
  • MyBatis MapperProvider MessageFormat拼接批量SQL语句执行报错的原因分析及解决办法
  • 预支报销单
  • 资产负债表中存货
  • 财政拨款方式有哪几种
  • 公司 用车
  • 所有者权益是怎么排列的
  • 生产成本和营业成本的区别和联系
  • 固定资产转移说明模板
  • 冲销以前年度多计提的费用分录
  • 销项负数发票给谁
  • 小规模纳税人开专票税率是多少?
  • 增值税纳税申报表怎么填
  • 年金现值系数和复利现值系数的公式
  • 对会计人员继续教育的目的包括了保障
  • mysql多表连接的方式
  • win8打开屏幕键盘
  • 如何恢复win8系统
  • 加入跨子网路由什么协议
  • 苹果mac怎么清理缓存
  • mac双系统删除mac系统
  • 新买的读卡器不读卡,提示放入驱动盘
  • win8.1使用技巧大全
  • win10周年版
  • win7无法打开任何软件程序
  • cocos2dx开发的游戏有哪些
  • fastcgi iis
  • jquery事件的响应
  • java jsonstring
  • js上传文件到后端
  • 党建阵地作用发挥不好
  • 车辆购置税完税证明有用吗
  • 湖南职工医保哪里交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设