导航窗口用html语言怎么写,html通用导航条制作详解
第一步:先创建一个盒子,定义类为 nav,width 1000,height 40px,防京东的导航,与浏览器顶部100px,margin-top:100px,看的更直观
第二步:使用无序列表放置,导航条的内容,这个可以自己定,这里设定 ul 宽1000px;高 40px;因为ul是块状元素,出现下面的样子,可以思考块状元素在firefox中和 ie6下面有什么不同。
通常在写样式的时候,要初始化我们的css样式表,这里具体用到哪些,初始哪些,具体设置 list-style:none; margin:0;padding:0;
第三步:现在所有的栏目都是紧挨着,我们要给li设置宽度为100px,通过float:left 将他们分开,给li加一个 背景色blue,知道我们所处的位置,更好的去调节我们的页面
,现在暂不去掉背景色,给 li 添加高度 height:40px;使用 line-height:40px; 垂直居中,text-align:center; 水平居中。 效果如右
第四步:为了体现这一步遇到的问题,我把最后一个栏目多加了几个字,
可以看出栏目之间的距离是不同的,为了寻找问题,我们给 li 设置一个宽度为 1px的 右外边距, margin-right:1px;
这个时候就很清楚的发现问题了,由于给li设定了宽度,所以当文字多了以后,不能够自动伸缩适应,这时候就要去掉宽度。
这个时候,宽度能够伸缩适应了,但是文字的空间太少,影响视觉,解决办法,添加所有内边距10px,给li 样式添加 padding:0 10px; 现在效果好多了
,然后把 margin-right:1px 去掉
第五步: 因为导航是需要点击的,我们需要放置 超链接(a标签),放在哪里呢,放在li标签内,操作如下,给li添加a标签,设置文字大小12px,规定鼠标移上去和移出的效果。
第六步:如果希望鼠标移动上去显示 黑红色,给a 链接添加一个背景,以便看书a链接的区域。这里给a链接添加 黑色;
,然后你发现,当你的鼠标移动到a标签后会出现小手的状态,为了用户体验,我们可以给 a 标签设置一个高度,让我们鼠标刚 接触li 标签就出现小手,添加height后,不管怎么刷新都不会出现,还是原来的样子,引发思考。因为 a 标签 是 内链元素,内链元素是无法设置宽度和高度的,我们需要使用 display:block; 将内链元素转换为块元素。这个时候会出现两种情况
,实际效果总是与期望效果不同,这个需要常年累积和对不同浏览器支持的了解。IE6 下面,认为a 标签既然转换为块元素,就要有块元素的特性,独占一行,再加上也没有对a标签的宽度设定,为什么firefox中没有这样呢,那时因为firefox 认为a标签即便是 块元素,也要受到它外面的li标签的影响。如何解决呢,因为现在a标签是块状元素了,所以给a标签添加 float:left; 即可。 现在两个浏览器显示的内容一样了
第七步:当我们鼠标移动到栏目上时,就会变成小手的形状,因为小手的形状是因为有a标签,但是我们发现a标签的宽度有点小,所以这里需要加宽a标签,这里使用 padding:0 10px; 因为之前有给 li 添加padding:0 10px; 为了能够更清晰的控制导航栏目的宽度,这里我们使用a标签来控制,去掉li 的padding。最后去掉a标签的背景,导航栏完成,兼容IE 以及常用浏览器哦。。。
最后的结果
这个导航可以延伸到不同的导航中,基本都差不多。重要的是,了解到一些元素在火狐和ie中的区别,更好的避免所谓的兼容性
最后 去除外面的div 后, 还是可以兼容浏览器的,很爽啊,上代码
body,div,ul,li{padding:0px;margin:0px;}
ul{list-style:none;}
ul{width:1000px;margin:0 auto;background: #e64346;height:40px;margin-top: 100px;}
ul li{float:left;height: 40px;line-height: 40px;text-align: center;}
ul li a{font-size: 12px;text-decoration: none;height:40px;display: block;float: left;padding:0 10px;text-decoration: none;color:#fff;}
ul li a:hover{background: #a40000;}
- 首页
- 服装城你好
- 食品
- 团购
- 夺宝岛集团
导航窗口用html语言怎么写,html通用导航条制作详解相关推荐
- R语言基于forestplot包可视化森林图实战详解:美化的森林图:自定义字体设置、置信区间、坐标轴(刻度、标签、范围)、无效线去除、水平线、辅助线、box形状、色彩等
R语言基于forestplot包可视化森林图实战详解:美化的森林图:自定义字体设置.置信区间.坐标轴(刻度.标签.范围).无效线去除.水平线.辅助线.box形状.色彩等 目录
- R语言中如何计算C-Statistics?几种计算方法详解
R语言中如何计算C-Statistics?几种计算方法详解 目录 R语言中如何计算C-Statistics? #包导入 #数据加载编码
- java注解式开发_JAVA语言之Spring MVC注解式开发使用详解[Java代码]
本文主要向大家介绍了JAVA语言的Spring MVC注解式开发使用详解,通过具体的内容向大家展示,希望对大家学习JAVA语言有所帮助. MVC注解式开发即处理器基于注解的类开发, 对于每一个定义的处 ...
- time库是python中处理时间的标准库_python语言time库和datetime库基本使用详解
今天是边复习边创作博客的第三天,我今年大二,我们专业开的有这门课程,因为喜欢所以更加认真学习,本以为没人看呢,看了后台浏览量让我更加认真创作,这篇博客花了2个半小时的时间,结合自己所学,所思,所想写作 ...
- postgres预写式日志的内核实现详解-wal记录读取
2019独角兽企业重金招聘Python工程师标准>>> 导读: postgres预写式日志的内核实现详解-概述 之前已经写了关于wal记录的结构.wal记录的写入的博客,流复制.PI ...
- C语言中的字符串转数字函数常见问题详解
目录 C语言中的字符串转数字函数常见问题详解 字符串转整形 atoi函数 字符串转长整形 strtol函数, C语言中的字符串转数字函数常见问题详解 字符串转整形 atoi函数 函数原型: int a ...
- 区块链用哪种语言 Java_区块链开发用什么语言呢?区块链与编程语言的关系详解...
原标题:区块链开发用什么语言呢?区块链与编程语言的关系详解 区块链的概念就随着比特币的大热开始逐渐进入公众视野,比特币的拥有者为了使其创造更高的财富,开始疯狂炒作,因而引发购买比特币大浪潮.然而等到比 ...
- C语言0长度数组(可变数组/柔性数组)详解
CSDN GitHub C语言0长度数组(可变数组/柔性数组)详解 AderXCoding/language/c/zero_length_array 本作品采用知识共享署名-非商业性使用-相同方式共享 ...
- c语言中getenv的作用,C语言putenv()函数和getenv()函数的使用详解
C语言putenv()函数和getenv()函数的使用详解 C语言putenv()函数:改变或增加环境变量头文件: #include4 定义函数: int putenv(const char * st ...
- c语言 栈结构存放数据类型,数据结构——栈的详解
栈和队列是两种重要的线性结构,从数据结构的角度看,栈和队列也是线性表,其特殊性在于栈和队列的基本操作是线性表的子集.他们是操作受限的线性表,因此,可称为限定性的数据结构.但从数据类型角度看,他们是和线 ...
最新文章
- 对于session序列化跟session的钝化与活化的粗浅理解
- KubeVela 上手|让云端应用交付更加丝滑
- python求和函数1到100_Python定义函数实现累计求和操作
- 基于控制台应用程序的生命游戏java_Java在现实中实际开发的主要领域在哪些方面?...
- oracle lob类型 删除,oracle中lob类型介绍
- IntelliJ IDEA Ultimate破解安装及使用其进行Spring程序开发
- iOS 相机调用后为英文的解决办法
- [IOS APP]蛙-莫言经典有声小说
- Zabbix 主被动模式解析
- int 和 Integer 有什么区别
- 冷战——婚姻生活的双刃剑
- 我的世界服务器皮肤显示mod,【回归了】McMySkin Mod - Minecraft单机联机皮肤显示Mod...
- 怎么在电脑上登陆多个微信
- 国外大学网上免费课程
- 产品经理必须要了解的26个文档
- 硅芯思见:“软约束”到底有多“软”
- 操作系统常用缩写总结
- DB4AI:使能数据库原生AI计算,助力数据湖场景业务成功
- 定时备份脚本分享(网站数据和数据库数据)
- MathType怎么编辑半开半闭区间