-
原垂直菜单，让菜单浮动以水平显示且文字居中： .nav li{ float:left; text-align:center; }查看全部
-
text-decoration:none; display:block; text-indent:10px;查看全部
-
text-indent 文本缩进
list-style：none；去掉圆点
text-decoration：none；去掉下划线
<a>标签的设置关键是将标签设置为块元素
display：block；转化为块元素，可以设置长宽属性
a:hover{} 鼠标放上去的隐藏效果
查看全部 -
我的这个箭头菜单实例
https://blog.csdn.net/wtxy24/article/details/82316133
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title>菜单</title>
<style type="text/css">
* { padding: 0; margin: 0; }
ul, ol { list-style-type: none; }
a { text-decoration: none; color: #000; }
.menu { width: 600px; height: 50px; margin: 50px auto 0; }
.menu li { float: left; width: 200px; height: 50px; }
.menu li:last-child a { border-radius: 5px; }
.menu li a { display: block; width: 100%; height: 50px; line-height: 50px; border: 1px solid #d8d8d8; position: relative;
background-image: linear-gradient(to bottom, #a5a5a5, #5d5d5d); }
.menu li a span { font-size: 30px; font-weight: bold; color: #fff; margin: 0 10px 0 30px; }
.menu li a i { font-style: normal; color: #fff; display: inline-block; vertical-align: 10%; }
.menu li a::before { content: ""; position: absolute; left: 0; top: 0; width: 35.355px; height: 35.355px; border-left: 1px solid #d8d8d8;
border-bottom: 1px solid #d8d8d8; transform-origin: 0 0; transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0);
background-image: linear-gradient(to right bottom, #a5a5a5, #5d5d5d); }
.menu li:hover a { background-image: linear-gradient(to bottom, rgb(246, 226, 150), rgb(238, 166, 40)); }
.menu li:hover a::before { background-image: linear-gradient(to right bottom, rgb(246, 226, 150), rgb(238, 166, 40)); }
</style>
</head>
<body>
<ul class="menu">
<li><a href="javascript:;"><span>1</span><i>step1</i></a></li>
<li><a href="javascript:;"><span>2</span><i>step2</i></a></li>
<li><a href="javascript:;"><span>3</span><i>step3</i></a></li>
</ul>
</body>
</html>
查看全部 -
全角空格被解释为汉字，所以不会被被解释为HTML分隔符，可以按照实际的空格数显示
查看全部 -
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。
查看全部 -
碰到跑不动的状况，不光是检查js，还检查html
查看全部 -
基本的样式清除： *{margin:0;padding:0}
无序列表圆点去除： ul{list-style:none}
下划线去除： a{text-decoration:none}
文本缩进标签 text-indent 不会影响总体宽度（padding会）
需要将a标签设置为块元素，才能设高宽、hover效果 代码：a{display:block}
hover格式 a:hover{}查看全部 -
元素设置浮动以后，就会脱离文档流，这时候原来的高度和宽都都不复存在了，所以如果需要对该元素设置整体背景，就需要对该元素先设置高度和宽度！
查看全部 -
圆角css代码：border-radius:4px 4px 3px 3px
查看全部 -
text-decoration：none是对a标签的下划线进行去掉操作！
查看全部 -
使用padding缩进一定和使用text-indent对文本进行缩进的时候，padding会相应的增加盒子的宽度，而text-indent不会！
查看全部 -
onmouseover , 鼠标移过 ； <br>onmouseout , 鼠标离开 ；<br>setIntervel , 不停地调用函数 ； <br>clearInterval , 取消 setInterval 函数的运行 ； <br>javascript:
window.onload=function(){ var aA = document.getElementsByIagName('a'); /*查找所有的a标签元素*/ for(var i=0; i<aA.length; i++){ aA[i].onmouseover = function(){ /*获取a标签的鼠标事件*/ clearInterval(This.time); /*防止累加*/ var This = this; /*把当前的this 对象传进来*/ This.time = setInterval(function(){ This.style.width = This.offsetWidth + 8 + "px"; if(This.offsetWidth >= 160){ /*如果当前对象的宽度 大于 160*/ clearInterval(This.time); /*就停止当前时间*/ } },30) } aA[i].onmouseout = function(){ /*获取a标签的鼠标移除事件*/ clearInterval(This.time); /*防止累加*/ var This = this; /*把当前的this 对象传进来*/ This.time = setInterval(function(){ This.style.width = This.offsetWidth - 8 + "px"; if(This.offsetWidth <= 120){ /*如果当前对象的宽度 大于 160*/ This.style.width = "120px"; clearInterval(This.time); /*就停止当前时间*/ } },30) } }jquray:
$(function(){ $("a").hover(function(){ $(this).stop().animate({"width":"160px"},200); },function(){ $(this).stop().animate({"width":"120px"},200); }) })
查看全部 -
解析：菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。
查看全部
举报