-
float如果放在f.nav li a里面只是会让每个li里面的a标签分别向左浮动，你的li还是会默认流式布局，li是给导航布局，a只是为了给里面的内容添加链接内容 text-indent 文本缩进 text-align 文本居中查看全部
-
设置水平菜单导航栏 在垂直菜单导航栏样式基础上修改： 1、设置li为左浮动 2、将ul限制宽度去掉 3、设置文本居中，text-align:center,将之前的text-indent（文本缩进）属性删掉查看全部
-
1.把a标签定义成行内块 display:block; 2.文字缩进20px text-indent:20px;查看全部
-
一般都使用 “ul\li” 来制作“菜单导航条”查看全部
-
1.用ul无序列列表构建菜单 2.清除默认样式 *{margin:0;padding:0;} 清除ul的样式 ul{list-style：none}，能去掉前面的默认小圆点 去掉a标签的下划线 a{text-decoration：none} 在导航栏中经常用 height: 30px;line-height: 30px;可使文字垂直居中。 3.如果用为文字前面增加像素，最好用缩进的方式来实现 {text-indent：xx px}（文本缩进,用text-indent替换padding-left，是为了防止菜单长度增加。例如：padding-left:10px; 会导致宽度也增加10px ） 4.ul li a{}因为a标签是最内部的元素 所以对a标签设置就可以了 又因为a为内联元素，而块状元素才可以设置 宽度 高度，所以要把a设置为块级元素：ul li a{display:block;}查看全部
-
Left查看全部
-
ssas查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航菜单</title> <style type="text/css"> *{ margin:0px; padding:0px; } ul{ list-style:none; width:100px; } a{ color:#333;text-decoration:none; display:block; text-indent:20px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px; } 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> </html>查看全部
-
$(function(){ $("a").hover{ function(){ $(this).stop().animate("width":"160px") 200}; function(){ $(this).stop().animate("width":"120px") 200};}; } })查看全部
-
在动画开始之前将其清理一下，以免后来叠加查看全部
-
在a：hover中加入height以后再设置margin为负的数值，使样式改变向上变化查看全部
-
通过改变背景颜色，外观样式，以及a：hover的属性，文字大小等来完成菜单的交互效果查看全部
-
text-indent可以直接缩进，而padding-left会直接加上一段长度在width上查看全部
-
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> 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/150
提交
取消