位置: 编程技术 - 正文

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)

  • 房产税会计分录怎么写
  • 企业所得税成本没有发票怎么处理
  • 投资收益科目在贷方
  • 事业单位资产划转流程
  • 专票当普票用,发票勾选怎么操作
  • 建筑工程怎么确定施工工程进度
  • 社保缴费回单怎么查
  • 公司现金支付管理办法
  • 委托加工环节原材料收消费税吗
  • 港币转人民币差额怎么平帐?
  • 新会计准则短期租赁会计分录
  • 新成立公司注资流程
  • 小规模收专用发票后成为一般纳税人吗
  • 半成品牛排有营养吗
  • 税收征管法实施条例
  • 个体户开普票要交企业所得税吗
  • 小规模纳税人自来水税率
  • 个人储蓄存款利率
  • 固定资产报废账目
  • 汽车罚款怎么进账
  • 实收资本不是股东打来的怎么调帐
  • 房租摊销表怎么做
  • 全年平均职工人数按季度平均公式
  • 利润表中的销售收入
  • 个人所得税哪些可以专项扣除
  • 调整增值税税率
  • 专项扣除项目有上限吗
  • 事业单位收受礼品怎么处理
  • 公司购买电器的账务处理
  • 进口增值税属于海关代征的税收吗
  • windows 7如何
  • 怎么解决windows许可证即将过期
  • 联想win10自动修复失败还能保存文件吗
  • 债劵利息怎么计算
  • PHP:pg_execute()的用法_PostgreSQL函数
  • msmpeng.exe 是什么
  • 冷门暴利行业
  • 国债持有期间未兑付的利息所得税
  • 汽车销售行业的税负率是多少
  • 什么是长期股权投资法
  • ccna 试题
  • 以我为主题画一幅画
  • 小规模纳税人采购零配件税率
  • laravel 实例
  • 经营租入固定资产账务处理
  • php服务器地址怎么填
  • 未达起征点怎么填申报表
  • SQLite之Autoincrement关键字(自动递增)
  • mysql5.0升级到8.0
  • 帝国cms8.0
  • 股东分红的会计分录怎么做
  • 税款所属期止是怎么写
  • 机票改签费可以报销吗
  • 营运资产周转次数计算公式是什么意思
  • 未实现内部交易损益是什么意思
  • 损益类科目借贷怎么记
  • 省外出差
  • 开发票的时候密码超出密码区发票还能用吗?
  • 实收资本认缴怎么做账,要做账吗
  • 会计账簿的种类包括总账明细账日记账和其他辅助性账簿
  • sqlserver按时间段导出数据
  • win7系统u盘打不开怎么办
  • win10建行网银盾插上网页弹不出来
  • xp系统设置壁纸
  • win8.1一直开机,无法进入主界面
  • win10周年更新版是什么意思
  • win8 ui
  • css弹出层
  • How to embed a jframe in an eclipse view
  • unity如何调整界面
  • 10分钟掌握心理学
  • threejs 源码
  • node.js连接mysql数据库的方法有哪些
  • 谈谈对人才是第一资源的理解
  • 福建省国家税务局网
  • 国家税务总局四川省电子税务局界面
  • 新疆喀什泽普县海拔高度是多少米
  • 南京江宁汽车过户手续及费用
  • 普通发票管理系统官网
  • 福建莆田社保局在哪里
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设