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

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

导航条菜单的制作

最热最新

qq_ve攸_0

下拉菜单

查看全部

0 采集收起来源：编程挑战
2016-10-18
慕的地2596793

text-indent：文本缩进

查看全部

0 采集收起来源：垂直菜单的制作
2016-10-17
purple涵_23

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

查看全部

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

<title>导航菜单</title> <style type="text/css"> *{margin:0; padding:0; font-size:14px;} ul{ list-style:none; width:100px} a{color:#333;text-decoration:none} .nav li a{ display:block; text-indent:10px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;} .nav li a:hover{ background-color:#F60; color:#fff} </style> </head> <body> <ul class="nav"> <li><a href="#">首　　页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul> </body>

查看全部

0 采集收起来源：编程练习
2018-03-22
彩虹直至黑白2

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

查看全部

0 采集收起来源：练习题
2018-03-22
好会飞的鱼儿

注意的问题

查看全部

0 采集收起来源：练习题
2016-10-15
好会飞的鱼儿

垂直菜单

查看全部

0 采集收起来源：编程练习
2016-10-15
山无夜4114517

文本缩进：text-indent: n px; 空格用：  <a>标签变成块元素：display;block; 去除列表圆点：list-style:none; 去除下划线：text-decoration:none a:hover{ background-color:#F60; color:#fff}鼠标经过的文字背景颜色和字体颜色

查看全部

0 采集收起来源：编程练习
2018-03-22
曾绊过你

window.onload=function(){ //定义全部加载完后实现 var aA=document.getElementsByTagName('a'); //实例化 a标签 for (var i = 0; i < aA.length; i++) { //循环 aA[i].onmouseover=function(){ //当鼠标移动到 a标签时实现代码 clearInterval(this.time); //清除之前的计时器效果 var This=this; //实例化 This.time=setInterval(function(){ //设定计时器 This.style.width=This.offsetWidth+8+'px'; //设定每次加 8像素 if(This.offsetWidth>=260){ //定义如果宽度达到 260像素时怎样 This.style.width="260px"; //设置最大宽度为260PX clearInterval(This.time) //停止 } },30) }

查看全部

0 采集收起来源：伸缩菜单的制作——水平方向
2018-03-22
qq_夏小天_0 00:39

导航菜单的制作

查看全部

0 采集收起来源：垂直菜单的制作
2016-10-14
小米粥哥哥

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

查看全部

0 采集收起来源：练习题
2018-03-22
翻瑜 02:29

样式清除 *（margin:0;padding:0;） ul(list-style:none) text-decoration:none

查看全部

0 采集收起来源：垂直菜单的制作
2016-10-13
小欣＿

基本的样式清除： *{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-13
慕码人3154674 00:33

123

查看全部

0 采集收起来源：总结
2016-10-12
慕码人3154674

圆角菜单的制作 1.通过设置背景，改变外观样式通过a:hover,可以为菜单增加交互效果。 2.横向菜单与圆角菜单的区别是：为ul增加一个装饰线 border-bottom、为a标签添加圆角背景，宽与高相适应、有一个默认的选中状态，所以要为a标签加上一个class="on" 在为它的样式添加上一个on，最后移动它的位置（x，y）圆角菜单：border-radius; /* CSS */ background-image:url(); /* 插入图片 */ background-position: /* 图片定位 */ background-position是设置背景位置，第一个参数：水平位置（左右）为0是不变化;第二个参数：设置垂直方向（上下），-30px是向下移动30px。

查看全部

0 采集收起来源：圆角菜单的制作
2018-03-22