导航条菜单的制作_学习笔记

首页免费课导航条菜单的制作笔记

导航条菜单的制作

最热最新

慕码人3154674

.{margin:0; padding:0;} 全局基本样式清除 display:block 转换为块级标签 display:inline 转换为内联标签 display:inline-block 转换为内联块级标签 list-style:none 清楚ul或ol列表中li标签前面的项目符号 text-decoration:none 清除下划线 text-decoration:line-through 添加删除线 text-indent:2em 设置文本缩进为字号的2倍 a:hover{} 定义鼠标滑过时的链接颜色

查看全部

0 采集收起来源：垂直菜单的制作
2016-10-12
慕码人3154674

基本的样式清除： *{margin:0;padding:0} 无序列表圆点去除： ul{list-style:none} 下划线去除： a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度（padding会）需要将a标签设置为块元素，才能设高宽、hover效果代码：a{display:block} hover格式 a:hover{}

查看全部

0 采集收起来源：垂直菜单的制作
2016-10-12
酒窝MM

菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。

查看全部

0 采集收起来源：练习题
2018-03-22
慕田峪0340272

下拉菜单

查看全部

0 采集收起来源：编程挑战
2016-10-12
GoingForward

window.onload=function () { var as = document.getElementsByTagName("a"); for(var i = 0; i < as.length; i++) { as[i].onmouseover = function () { var that = this; clearInterval(that.time); that.time = setInterval(function() { that.style.width=that.offsetWidth+8+"px"; if(that.offsetWidth>160){ clearInterval(that.time); } },10); }, as[i].onmouseout = function () { ...... } } }

查看全部

0 采集收起来源：伸缩菜单的制作——水平方向
2018-03-22
GoingForward 07:34

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> <script> $(function(){ $("a").hover{ function(){$(this).animate({"width":"160px"},300);}, function(){$(this).animate({"width":"120px"},300);} } } ) </script>

查看全部

0 采集收起来源：伸缩菜单的制作——水平方向
2018-03-22
GoingForward 01:53

改变选中菜单项的高度： 1.height：40px; margin-top:-10px;(增加菜单高度，并向上移) 2.line-height:40px;(增加行高)

查看全部

0 采集收起来源：伸缩菜单的制作——改变高度
2016-10-12
GoingForward

将垂直菜单变成水平菜单只需要给li添加一个左浮动float：left,将ul宽度去掉即可。

查看全部

0 采集收起来源：水平菜单的制作
2016-10-12
四夕兮

想要设置导航栏固定（不随窗口的缩小放大而压缩拉伸排列）给ul设置一个固定的宽度即可。

查看全部

0 采集收起来源：编程练习
2016-10-11
四夕兮

菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。

查看全部

0 采集收起来源：练习题
2018-03-22
慕设计0025697 01:49

水平导航菜单栏背景图加在a标签上

查看全部

0 采集收起来源：总结
2016-10-11
慕粉4090685

一般都使用“ul/li”来制作“菜单导航条”

查看全部

0 采集收起来源：练习题
2016-10-11
ohh_y

水平方向 <script> window.onload=function(){ var a=docuemnt.getelebyname(a); for(var i=0;i<a.length;i++){ a[i].onmouseover=function(){ var This=this; setIntervsl(function(){ This.style.width=This.offerWidth+8+"px"; if(This.offerWidth>=160){ clearInterval(This.time)} }) } } }

查看全部

0 采集收起来源：伸缩菜单的制作——水平方向
2018-03-22
ohh_y

伸缩效果的菜单改变高度选中的状态使height:40px，margin-top：-10px;line-height:40px;

查看全部

0 采集收起来源：伸缩菜单的制作——改变高度
2016-10-10
clj猎的

1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性，而style.width是可读写的。 3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。 4.style.width仅能返回以style方式定义的内部样式表的width属性值。

查看全部

0 采集收起来源：编程练习
2016-10-09