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

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

导航条菜单的制作

最热最新

cp0417

垂直菜单转变成水平菜单 float:left, 文本居中 text-align:center

查看全部

0 采集收起来源：练习题
2016-08-23
慕粉3852899

height：40px；设置高度为40像素 margin-top:-10px//使模块向上移动10个像素 line-height:40px设置文字水平居中对齐

查看全部

0 采集收起来源：伸缩菜单的制作——改变高度
2016-08-21
周小健 00:47

无序列表制作导航，css美化，js增加互动动画

查看全部

0 采集收起来源：伸缩菜单的制作——改变高度
2016-08-21
yl_

list-style:none 清除无序列表前的黑点 text-decoration:none 清除文字下划线 text-indent: 文本缩进

查看全部

0 采集收起来源：水平菜单的制作
2016-08-20
飞翔的时钟0

清除ul的圆点：ul{list-style:none} 去除下划线：a{text-decoration:none}

查看全部

0 采集收起来源：垂直菜单的制作
2016-08-20
江励志 00:22

a：hover{} 鼠标滑过时的效果

查看全部

0 采集收起来源：圆角菜单的制作
2016-08-20
江励志 01:11

设置水平菜单导航栏在垂直菜单导航栏样式基础上修改： 1、设置li为左浮动：float: left; 2、将ul限制宽度去掉：删去ul{width:100px;}这句话 3、li标签中设置文本居中，text-align:center,将之前的text-indent（文本缩进）属性删掉

查看全部

0 采集收起来源：水平菜单的制作
2016-08-20
江励志 05:11

最内部元素是a 只有把a设置成块元素才能给它设置宽和高，增加交互效果设置块元素：display:block;

查看全部

0 采集收起来源：垂直菜单的制作
2016-08-20
江励志 04:33

<style type="text/css"> *{ margin: 0 ; padding: 0 ; font-size: 15px; } ul{ list-style: none;/*清除小圆点*/ width: 100px; } li{ height: 30px; line-height: 30px;/*行高*/ width:100px; background: red;/*背景色设置*/ margin-bottom: 2px;/*底部间距*/ text-indent: 30px;/*文本缩进*/ } a{text-decoration: none;/*去除下划线*/} </style>

查看全部

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

ul li a{}因为a标签是最内部的元素所以对a标签设置就可以了又因为a为内联元素，而块状元素才可以设置宽度高度，所以要把a设置为块级元素： a{display:block;}

查看全部

0 采集收起来源：垂直菜单的制作
2016-08-19
徐大亮

消除下划线：text-decoration<br><br> 缩进：text-indent a:hover{ } 定义鼠标经过时的颜色

查看全部

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

ul{list-style:none}清除ul每行前面的小点

查看全部

0 采集收起来源：垂直菜单的制作
2016-08-19
卢布

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

查看全部

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

<title>导航菜单</title> <style type="text/css"> *{margin:0; padding:0; font-size:14px;} ul{ list-style:none;} a{color:#333;text-decoration:none} .nav li{ float:left;} .nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;} .nav li a:hover{ background-color:#F60; color:#fff} </style>

查看全部

0 采集收起来源：编程练习
2018-03-22
LJC慈

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

查看全部

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