位置: 编程技术 - 正文

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)

  • 北京增值税发票网上申领流程
  • 计提个税会计科目怎么做
  • 以不动产投资入股增值税
  • 快递公司增值税怎么算
  • 到国税局领增值税发票需带什么
  • 发票失控怎么处罚
  • 企业购入生产设备所支付的增值税
  • 超市商品打折怎么算出来
  • 怎么查询公司有没有开社保户
  • 需要会计报表的人
  • 企业所得税汇算清缴扣除比例
  • 工会经费结余怎么记账
  • 员工福利没有发票
  • 申请开立临时存档的条件
  • 账面价值和账面成本的区别
  • 溢价发行股票的相关交易费用冲减资本公积
  • 什么是BIOS设置界面
  • 工程机械设备租赁价格
  • 中秋买东西有讲究吗?
  • 公司有长期挂账的权利吗
  • macbook隐藏
  • 财务费用利息收入为什么是负数
  • win11怎么用户改名
  • 公司收到预付款怎么用处去
  • php文件在线解密
  • emsm是什么意思
  • 路由器重启以后wifi不见了
  • 残疾人就业保障金
  • php毫秒转换时分秒
  • annaconda安装opencv
  • 民非企业保险支出包括
  • echarts柱状图坐标轴
  • javascript创建对象及应用
  • 铡刀演示
  • 微信小程序在哪里打开
  • jquery 元素
  • php rtrim
  • 会计中利得的定义
  • 帝国cms更换编辑器
  • 对附属单位补助的资金性质是财政预算资金
  • 打印的机票行程怎么查
  • 织梦专题页模板
  • 个税代扣代缴手续费返还需要缴纳增值税吗
  • sql查询语句怎么用
  • 通过法院拍卖取得的房屋需要法院下确认裁定吗
  • 增值税减免附什么凭证
  • 退休返聘人员工伤怎么赔偿
  • 未收到货款发票是什么意思
  • 按次缴纳的个人所得税
  • 用于研发购买的材料进项税额
  • 固定资产会计账簿
  • 住宿费开的增值税专用发票怎么记账
  • 资产状况信息公示还是不公示
  • 如何创建sql server数据库表
  • sql语句实例大全
  • mysql coalesce函数用法
  • 史上最全的mysql基础教程
  • 无法将此电脑升级到最新版本的windows10
  • ubuntu怎么安装程序
  • win10安装apache服务失败
  • os x10.11el capitan公测版beta2官方下载地址
  • centos查看inode
  • win7装完系统我的电脑在哪
  • win10远程桌面连接教程
  • linux简明教程
  • win10预览版21301bug
  • windows8.1rt
  • linux中shell命令
  • python爬虫框架怎么画
  • Node.js中的事件循环是什么样的
  • centos6.9查看网卡状态
  • 守护进程和普通进程
  • 深入理解中国式现代化
  • jQuery的ajax下载blob文件
  • js简单实现图片轮播
  • 税控盘开票软件下载官网
  • 成品油消费税税率2023
  • 税务网上申报怎样操作
  • 辽宁省大连市国家运动员
  • 西北地区的沙尘暴
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设