HTML,使用ul制作横向导航条.doc_第1页
HTML,使用ul制作横向导航条.doc_第2页
HTML,使用ul制作横向导航条.doc_第3页
HTML,使用ul制作横向导航条.doc_第4页
HTML,使用ul制作横向导航条.doc_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML：使用ul制作横向导航条说明：1：为了方便学习，采用把每一个关键步骤完全分开写的方式。2：所有内容采用360极速浏览器测试，因为其采用Chrome内核，而Chrome是对标准支持最好的内核。3：小菜原创。Html代码：TEST我的主页 新闻头条 电视剧 最新电影 为了方便观察，为所有元素添加边框和边距：加入样式：#menu,ul,li,aborder:solid thin black;margin:10px;效果：第一步：去掉前面的小圆点加入样式：#menu li list-style:none;效果如图：第二步：可以看到，链接还不是块状，其大小仅由内容文字决定，所以四个链接的宽度是不同的改变链接的样式，使链接以块状展示加入样式：#menu a display:block;效果如图：注意对比观察链接部分的变化。第三步：去掉链接的下划线：加入样式：#menu a text-decoration:none;效果如图：第四步：使列表横向显示加入样式：#menu li float:left;效果如图：看，出现问题了，对吧，这不是错误，这是因为使用了float:left之后，元素脱离了文档流，就好像元素不在文档中，而是漂浮在文档之上，所以不包含在外层容器之中。那么，如何把这些元素“拽”回文档，放到容器之中呢？请看下一步。第五步：清除浮动属性需要在浮动元素的后面加上一个元素，用于清理之前的浮动我们加上一个div元素，作为清理浮动的元素。还需要为这个div赋予清理浮动的属性。加入样式：.clear clear:both;注意，这是一个类选择器，因为可能有多处浮动需要清理改变后的ul部分为： 我的主页 新闻头条 电视剧 最新电影 效果如图：跑掉的元素回来啦！第六步：现在让我们为这些链接设置背景色：我是个俗人，就设置红色吧：加入如下样式：#menu a background-color:red;效果：第七步：貌似不太好看，因为链接中的字和边框紧紧地挨在一起。只需调整一下链接的边框的内边距：加入样式：#menu a padding:10px;效果如图：第八步：为链接设置鼠标停留在上面的样式：加入样式：#menu a:hover background-color:blue;效果如图：因为鼠标悬停状态不方便被截图下来，所以请大家自行想象那里有一个手型光标。大家可以看出来，小弟在这里动用了和之前不一样的截图工具，可惜那只手还是显示不出来，想象吧。第九步：去掉多余的用于演示的边框，边距。加入样式：（当然，也可以直接删除前面的对应样式）#menu,ul,li,aborder:solid thin black;margin:0px;padding:0px;顺便改变字体颜色,加入样式：#menu
人人文库> 全部分类> 专业文献 > 建筑水利

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论