-
横向菜单制作： 是在前面纵向菜单的基础上 (1) 加li{float:left;} (2) 减ul{list-style:none;width:100px;} ==>ul{list-style:none;} (3) 变a{text-indent:10px;} ==>a{text-align:center;}查看全部
-
将a标签块状化：display:block 文字缩进：text-indent查看全部
-
纵向菜单制作： <ul> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> ...... </ul> *{margin:0;padding:0;font-size:14px;} ul{list-style:none;width:100px;} a{text-decoration:none;height:30px;line-height:30px;width:100px;background-color:#ccc;margin-bottom:1px;text-indent:10px;} a:hover{background-color:#f60;color:#fff;} 提示： ul li a{display:block;} 定义的关键是将<a>标签设置为块元素查看全部
-
margin-top为负可以向相反方向移动 line-height:行高查看全部
-
text-index:文本缩进查看全部
-
<!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:0; padding:0; font-size:14px;} a{color:#333;text-decoration:none} .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;} .nav li{float:left} .nav li a{display:block; height:30px;text-align:center; line-height:30px; 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;} </style> </head> <body> <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> </body> </html>查看全部
-
使用闭包。查看全部
-
任务1：请补充完整代码，清除计时器 任务2：请补充完整代码，设定计时器 任务3：请补充完整代码，a标签的宽度 任务1对应代码：clearInterval 任务2对应代码：setInterval 任务3对应代码：offsetWidth查看全部
-
margin-top为负可以向相反方向移动查看全部
-
3-3 圆角菜单制作 border-radius; /* CSS */ background-image:url(); /* 插入图片 */ background-position: /* 图片定位 */查看全部
-
第5章 伸缩菜单的制作——水平方向 5-1 伸缩菜单的制作——水平方向 1、JS实现：动画开始前先清除一下定时器，避免动画累加。 2、jQuery实现：动画打开时，先把上一个动画清理掉（使用stop方法）。 $(function(){ $('a').hover( function(){$(this).stop().animate({"width":"160px"}.200);} function(){$(this).stop().animate({"width":"120px"}.200);} )})查看全部
-
margin-top为负可以向相反方向移动查看全部
-
margin-top为负可以向相反方向移动查看全部
-
3-3 圆角菜单制作 border-radius; /* CSS */ background-image:url(); /* 插入图片 */ background-position: /* 图片定位 */查看全部
-
通过设置背景可以改变菜单样式，通过a：hover可以给菜单添加交互效果查看全部
举报
0/150
提交
取消