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

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

导航条菜单的制作

最热最新

glglwdxh

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

查看全部

0 采集收起来源：练习题
2018-03-22
glglwdxh

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

查看全部

0 采集收起来源：垂直菜单的制作
2018-01-08
data_man7

text-indent:向中缩进文本位置，不改变整li的大小。将行内元素a转换为块级元素便于设置高宽，减少代码

查看全部

0 采集收起来源：垂直菜单的制作
2017-12-27
data_man7

用无序列表构建菜单<ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> ...... </ul>

查看全部

0 采集收起来源：垂直菜单的制作
2018-03-22
qq_fzjiwillbegy_0

height与line-height设置成一样，文字就会垂直居中；其实不是行高line-height与文字高height一样就能让文字居中，而是应该这样理解，字符本来就在行高内垂直居中了，只是行高与文字的盒子高度不等，导致不能在盒子里垂直居中，如果我们把行高line-height与盒子的height设置为一样大，意思就是行高的平行线与盒子的上下边重合了，这时字符当然仍是在行高内垂直居中，但也顺便在盒子内垂直居中。

查看全部

2 采集收起来源：伸缩菜单的制作——改变高度
2017-12-27
qq_fzjiwillbegy_0

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

查看全部

0 采集收起来源：练习题
2018-03-22
慕网老油条丶

backgroud-position中的像素值x y，其参照原点是标签的左上角，x为正值向原点右移相应像素单位，y为正值则向下移

查看全部

0 采集收起来源：编程练习
2017-12-25
CoderEnko

利用js展开二级标题

查看全部

0 采集收起来源：编程挑战
2017-12-23
CoderEnko

(一)offsetWidth总结： 1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性，而style.width是可读写的。 3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。 4.style.width仅能返回以style方式定义的内部样式表的width属性值。 (二)CSS方式 a{transition:width 0.5 ease} a:hover{width:130px;}

查看全部

0 采集收起来源：编程练习
2017-12-23
慕斯卡7430691 04:42

text-indent 文字缩进

查看全部

0 采集收起来源：垂直菜单的制作
2017-12-20
慕斯卡7430691 03:53

无序列表小圆点去除：ul{list-style:none}

查看全部

0 采集收起来源：垂直菜单的制作
2017-12-20
慕标3283398

height与line-height设置成一样，文字就会垂直居中

查看全部

0 采集收起来源：伸缩菜单的制作——改变高度
2017-12-18
慕标3283398

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

查看全部

0 采集收起来源：练习题
2018-03-22
pric1995

text-indent 文字缩进

查看全部

0 采集收起来源：垂直菜单的制作
2017-12-18
慕粉4183705

<script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover=function(){ //鼠标经过一级菜单，二级菜单动画下拉显示出来 var oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ var This=oSubNav; clearInterval(This.time); This.time=setInterval(function(){ This.style.height=This.offsetHeight+16+"px"; if(This.offsetHeight>=120) clearInterval(This.time); },30) } } //鼠标离开菜单，二级菜单动画收缩起来。 aLi[i].onmouseout=function(){ var oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ var This=oSubNav; clearInterval(This.time); This.time=setInterval(function(){ This.style.height=This.offsetHeight-16+"px"; if(This.offsetHeight<=0) clearInterval(This.time); },30) } } } } </script> 作者： qq_lby_03422380 链接：http://www.imooc.com/article/14877 来源：慕课网

查看全部

0 采集收起来源：编程挑战
2018-03-22