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

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

导航条菜单的制作

最热最新

偏执狂ld

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

查看全部

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

border-radius;

查看全部

0 采集收起来源：圆角菜单的制作
2016-09-03
jac_s 04:41

text-indent

查看全部

1 采集收起来源：垂直菜单的制作
2016-09-03
見贤思齐

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

基本的样式清除： *{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-09-03
偏执狂ld

一般都使用 “ul\li” 来制作“菜单导航条” <a>元素加上display:block;后会变成块元素可以直接在上面定义宽高、背景等和div一样。

查看全部

0 采集收起来源：练习题
2018-03-22
我要开发地图系统

老师的代码里，用 var aLi=document.getElementsByTagName('li'); 获取元素，总觉得不够好，这是获取了整篇文档中所有的li元素，包括二级菜单里的li也被选上了。而我们需要只是第一级的里元素，重要的是我们要操作的是它的第二个子元素ul。我觉得用类名获取更适当一些。

查看全部

0 采集收起来源：编程挑战
2016-09-02
qq_minemine_03905871

biaoji

查看全部

0 采集收起来源：编程练习
2016-09-01
向前进发

伸缩菜单的制作-改变高度 //margin可以用负值，向相反方向移动.在a.hover添加height，line-height，以及margin-top（负值）

查看全部

0 采集收起来源：伸缩菜单的制作——改变高度
2016-09-01
向前进发

圆角菜单 ul增加高度，并增加下划线border-bottom；li那增加margin-top，使得文字和下划线贴在一起 //圆角背景是在a标签的，在第一个a标签增添class=“on”，再增添样式on，a.hover{删除背景颜色，增添background-position：0 -30px;}

查看全部

0 采集收起来源：圆角菜单的制作
2016-09-01
向前进发

圆角菜单通过设置背景，改变外观样式通过a:hover，可以为菜单增加交互效果（background-position:0 30px;color:###）

查看全部

0 采集收起来源：圆角菜单的制作
2016-09-01
向前进发

水平菜单。在li那增添float：left

查看全部

0 采集收起来源：水平菜单的制作
2016-09-01
送终鸡

window.onload = function () { var aA = document.getElementsByTagName("a"); for (var i = 0; i < aA.length; i++) { aA[i].onmouseover = function () { clearInterval(this.time); var This = this; This.time = setInterval(function () { This.style.Width = This.offsetWidth + 8 + "px"; if (This.offsetWidth >= 160) { clearInterval(This.time) } }, 30) }; aA[i].onmouseover = function () { clearInterval(this.time); var This = this; This.time = setInterval(function () { This.style.eidth = This.offsetWidth + 8 + "px"; if (This.offsetWidth <= 120) { This.style.Width = "120px"; } }, 30) }; } }

查看全部

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

border-radius: 15px 15px 0 0;

查看全部

0 采集收起来源：编程练习
2016-09-01
qq_感谢永远有歌把心境道破_03171663

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

查看全部

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