-
［圆角贴图的水平菜单：http://www.imooc.com/video/67］ 默认选中状态的实现： 1.在选中的选项中加上一个class，例如class＝“on”。 2.如果默认状态和hover的状态是一样的话，可以把on与a：hover写在一起。 事例中的背景图片只有一张，用background－position：0 -30px;可以是背景图片下移30px。查看全部
-
将垂直菜单改为水平菜单：设置 li 向左浮动。 text-aglin：center；可以是文本居中。查看全部
-
将<a>标签变成block的话就可以把li标签内的样式移到a标签里面了，从而在实现hover时，a是以块的形式来展现，而不是wrap－content的形式来展示。这样才能给a设宽、高和背景 ***重要：display: block;查看全部
-
ul中list－style：none的时候，list前面没有装饰符号。 在div中使用padding会使div的总宽度发生变化，解决办法： 用text－indent（文本缩进）代替padding，不会影响总宽度。查看全部
-
伸缩菜单，改变高度，鼠标经过向上凸起 margin-top:-10px;查看全部
-
圆角导航条 横向（上下）查看全部
-
1、用无序列表构建菜单<ul><li>； 2、垂直菜单转变为水平菜单：float:left； 3、在制作圆角菜单时，背景图片贴在<a>标签上； 4、在制作改变高度的伸缩菜单时，实现高度向上延伸的技巧：margin-top用负值； 5、用JS制作水平伸缩菜单时，“this”代表当前的<a>标签 javascript 实现水平伸缩查看全部
-
这个地方我还要想想查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
改变a标签的高度height:40px，这样是向下增加的，再设置margin-top为负值，向反方向移动margin-top:-10px，但文字也向上移动国，可设置a标签line-height:40px查看全部
-
li float:left; ul的宽度限制去掉； ul宽度去掉，li设置为float,a标签文本缩进text-indent删除，设置文字居中text-align:center查看全部
-
横向菜单制作： 是在前面纵向菜单的基础上 (1) 加li{float:left;} (2) 减ul{list-style:none;width:100px;} ==>ul{list-style:none;} (3) 变a{text-indent:10px;} ==>a{text-align:center;查看全部
-
第四象限：x,-y查看全部
-
1.如果要给水平菜单增加整体背景，需要对（）进行哪些CSS设置？ 菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
<!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;padding-left:30px;border-bottom:5px solid #F60;} a{text-decoration:none;display:block;height:30px;line-height:33px;width:120px;margin-right:1px;text-align:center;background:url(images/btnBg.png);} .on,a:hover{color:#fff;background-position:0 -30px;} li{float:left;margin-top:20px;} </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>查看全部
举报
0/150
提交
取消