为了账号安全,请及时绑定邮箱和手机立即绑定

导航条菜单的制作

江老实 Web前端工程师
难度初级
时长23分
学习人数
综合评分9.53
1004人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.4 逻辑清晰
<style type="text/css">

height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;}
.nav li a:hover{ background-color:#F60; color:#fff}
</style>
前端还要讲为什么怎么做?“我们之所以现在要用个 height 标签是因为要给它添个高度啊,我们之所以要用个 width 标签是因为要添个宽度啊”,您老又得说老师罗里吧嗦废话真多了
有看不懂的就要多看看评论,这是一个套路
border-radius:5px 5px 0 0 ; background:#F60;
margin:-10px;出现盒子重叠现象!!!改为 margin-top:-10px;
.nav li{ float:left;}
.nav li a{ display:block; height:30px; line-height:30px; width:70px; background-color:#efefef; margin-bottom:1px;text-align:center;}
li 标签用转块,用margin: 0 auto;居中,text-align:center;是字体居中,你放在li里面也只是让他的字体居中
感觉后面这几节都是在乱讲,纯靠自己摸索,都是用其他方法来实现。
我给ul设置一个overflow:hidden如何?
添加:display:inline-block; 也是可以制作水平导航栏的,原理是将块元素变成内联元素。
添加到哪个li 里面
导航条菜单的制作总结: 无序列表垂直导航(ul&li) 无序列表横向导航(float:left) 圆角菜单导航 高度伸缩菜单导航
1.把a标签定义成行内块: display:block;
2.文字缩进:text-indent:20px;
问css为什么不行的,你看看放上去的时候有没有过渡效果
循序渐进,简洁易懂,条例清晰,非常好
能用css实现的为嘛要用JavaScript
课程须知
1.熟悉html知识,尤其对<ul>和<a>比较熟悉; 2.对css样式比较了解; 3.掌握JavaScript和jQuery基础知识。
老师告诉你能学到什么?
轻松制作出各种形式的网站导航条菜单

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消