html,使用ul制作横向导航条

html,使用ul制作横向导航条

ID:15387468

大小:387.00 KB

页数:11页

时间:2018-08-03

html,使用ul制作横向导航条_第1页
html,使用ul制作横向导航条_第2页
html,使用ul制作横向导航条_第3页
html,使用ul制作横向导航条_第4页
html,使用ul制作横向导航条_第5页
资源描述:

《html,使用ul制作横向导航条》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、HTML:使用ul制作横向导航条说明:1:为了方便学习,采用把每一个关键步骤完全分开写的方式。2:所有内容采用360极速浏览器测试,因为其采用Chrome内核,而Chrome是对标准支持最好的内核。3:小菜原创。Html代码:TEST

  • 我的主页
  • 2、f="">新闻头条

  • 电视剧
  • 最新电影
为了方便观察,为所有元素添加边框和边距:加入样式:#menu,ul,li,a{border:solidthinblack;margin:10px;}效果:第一步:去掉前面的小圆点加入样式:#menuli{list-style:none;}效果如图:第二步:可以看到,链接还不是块状,其大小仅由内容文字决定,所以四个链接的宽度是不同的改变链接的样式,使链接以块状展示加入样式:#menua{

3、display:block;}效果如图:注意对比观察链接部分的变化。第三步:去掉链接的下划线:加入样式:#menua{text-decoration:none;}效果如图:第四步:使列表横向显示加入样式:#menuli{float:left;}效果如图:看,出现问题了,对吧,这不是错误,这是因为使用了float:left之后,元素脱离了文档流,就好像元素不在文档中,而是漂浮在文档之上,所以不包含在外层容器之中。那么,如何把这些元素“拽”回文档,放到容器之中呢?请看下一步。第五步:清除浮动属性需要在浮动元素的后面加上一个元素,用于清理之前的浮动我们加上一个div元素,作为清理

4、浮动的元素。还需要为这个div赋予清理浮动的属性。加入样式:.clear{clear:both;}注意,这是一个类选择器,因为可能有多处浮动需要清理改变后的ul部分为:

  • 我的主页
  • 新闻头条
  • 电视剧
  • 最新电影
效果如图:跑掉的元素回来啦!第六步:现在让我们为这些链接设置背景色:我是个俗人,就设置红色吧:加入如下样式:#menua{background

5、-color:red;}效果:第七步:貌似不太好看,因为链接中的字和边框紧紧地挨在一起。只需调整一下链接的边框的内边距:加入样式:#menua{padding:10px;}效果如图:第八步:为链接设置鼠标停留在上面的样式:加入样式:#menua:hover{background-color:blue;}效果如图:因为鼠标悬停状态不方便被截图下来,所以请大家自行想象那里有一个手型光标。大家可以看出来,小弟在这里动用了和之前不一样的截图工具,可惜那只手还是显示不出来,想象吧。第九步:去掉多余的用于演示的边框,边距。加入样式:(当然,也可以直接删除前面的对应样式)#menu,ul

6、,li,a{border:solidthinblack;margin:0px;padding:0px;}顺便改变字体颜色,加入样式:#menua{color:white;}效果如图:一个简单的横向导航条就完成了,如果你还对细节不满意,可以继续使用CSS进行调整。

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签