-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
圆角菜单： 通过设置背景，改变外观样式 通过a:hover,为菜单增加交互效果 <!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> *{margin:0;padding:0;font-size:14px;} ul{list-style:none;height:50px;border-bottom:15px solid #F60;padding-left:30px} li{float:left;margin-top:20px;} a{ text-decoration:none;/*去除下划线*/ display:block; height: 30px; line-height: 30px; width: 100px; background-color:#eee; margin-bottom: 1px; text-align:center; border-radius:10px 10px 0 0;/*设置圆角，顺序是左上角，右上角，右下角，左下角*/ } .on,a:hover{ background-color:#f60; color:#fff;/*文字颜色，变白*/ } </style> </head> <body> <ul> <li><a class='on' 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>查看全部
-
....查看全部
-
设置水平菜单导航栏 在垂直菜单导航栏样式基础上修改： 1、设置li为左浮动 2、将ul限制宽度去掉 3、设置文本居中，text-align:center,将之前的text-indent（文本缩进）属性删掉查看全部
-
<!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> *{margin:0;padding:0;font-size:14px;}/*初始*/ ul{list-style:none;width:100px;}/*去除无序列表前面的点*/ /*样式设置基本都在li上，最里面是a元素，可以增加hover的交互效果，所以对a元素设置样式*/ a{ text-decoration:none;/*去除下划线*/ display:block; height: 30px; line-height: 30px; width: 100px; background-color:#eee; margin-bottom: 1px; text-indent:10px;/*文本缩进，margin会使整个宽度增加，所以使用此属性，将文本向内缩进，整体宽度依然是100px*/ } a:hover{ background-color:#f60; color:#fff;/*文字颜色，变白*/ } </style> </head> <body> <ul> <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>查看全部
-
*{margin:0; padding:0; font-size:14px;} a{color:#333;text-decoration:none} ul{list-style:none; height:50px; border-bottom:5px solid #F60; padding-left:30px;} ul li{float:left; margin-top:20px;} a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;} a.on, a:hover{ color:#fff;background-color:#F60;height:40px; line-height:40px; margin-top:-10px;} -------------------------------------------------------------------------------------------- <ul> <li><a class="on" href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul>查看全部
-
css: *{ margin:0; padding:0; font-size:14px;list-style:none;border:0;} a{color:#333;text-decoration:none;} .nav{ height:30px;border-bottom:10px solid #f60; margin-top:20px;padding-left:50px;} .nav li{ float:left;} .nav li a{display:block;height:30px;line-height:30px;text-align:center;width:120px;background:url(http://img1.sycdn.imooc.com//53846438000168f901200060.jpg); margin-left:1px; } .nav li a.on,.nav li a:hover{ background-position:0 -30px; color:#fff;} ----------------------------------------------------------------------------------- <ul class="nav"> <li><a class="on" href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul>查看全部
-
导航栏原来a高度是30px，当鼠标经过时，高度纵向上高出10px，并且字体保持居中，方法： a:hover{height:40px;margin-top:-10px;line-height:40px;} 让标签纵向向上移动10px margin-top:-10px查看全部
-
二级菜单动画下拉显示出来： 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) } } 鼠标离开菜单，二级菜单动画收缩起来，思路跟上面类似。查看全部
-
1.jS(原生代码)实现：动画开始前先清除一下定时器，避免动画累加。 window.onload=function (){ var aA=document.getElementByTagName('a'); for(var i=0;i<aA.length;i++){ aA[i].onmouseover=function (){ clearInterval(This.time); var This=this; /*把当前的this对象传进来*/ This.time=setInterval(function (){ This.style.width=This.offsetWidth+8+"px"; /*8是变宽的速度*/ 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); } } } jQuery实现：动画打开时，先把上一个动画清理掉（使用stop方法）。 $(function(){ $('a').hover( function(){ $(this).stop().animate({"width":"160px"}.200); } function(){ $(this).stop().animate({"width":"120px"}.200); } ) })查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
文本缩进：text-indent:??px 将该元素转化成块级元素：display:block a标签滑动变换背景颜色及字体： a:hover{background-color:#??????;color:#???} text-indent文字缩进 display:block 将该元素转化成块级元素 display:inline-block 将该元素转化成行内块级元素查看全部
-
霜花似雪 background-position：x y; 第一个值(x)是水平位置，第二个值(y)是垂直位置。其值可为正负。 圆角css代码：border-radius:4px 4px 3px 3px 顺序是左上角，右上角，右下角，左下角 兼容代码：-moz-border-radius: 15px; border-radius: 15px; background-position: x% y% 第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。查看全部
-
伸缩菜单的制作-改变高度原理: 在鼠标经过、选中菜单项等状态时，改变该项的高度（变高）。 通过改变<a>标签的margin值，实现菜单项【向上增高】，同时让文字垂直居中。 a{height:30px;} a:hover{height:40px;margin-top:-10px;line-height:40px;}/*重点*/ 提示： margin可以用负值，向相反方向移动。 改变a标签的高度height:40px，这样是向下增加的，再设置margin为负值，向反方向移动margin-top:10px，但文字也向上移动国，可设置a标签line-height:40px查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
举报
0/150
提交
取消