-
【list-style:none】//*清除ul li列表前的小圆点 【text-decoration:none】/*清除a链接下划线 【display:block】内联元素变块级 【text-indent:像素;】/*文本缩进查看全部
-
text-index:px(文本缩进)查看全部
-
margin可用负值，垂直位置的调整用line-height查看全部
-
需要将a标签设为块元素，才能设置它的高宽和hover（a{display:block;}）查看全部
-
让标签由垂直变为水平：给li标签添加css代码（float:left;） 使文字居中对齐：text-align:center；查看全部
-
第一步：格式清除 ul{list-style:none} 圆点清除查看全部
-
背景图片是 60px*120px；a标签只显示30px*120px，所以未选中的时候只显示上半部分（白色），选中之后设置 background-position：0 -30px，相当于显示的背景图片下移30px，于是能显示到橙色的。查看全部
-
制作二级菜单查看全部
-
<style type="text/css"> *{margin:0; padding:0; font-size:14px;} ul{ list-style:none; width:100px} a{color:#333;text-decoration:none} .nav li a,.nav2 li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;} .nav li a:hover,.nav2 li a:hover{ background-color:#F60; color:#fff} .nav{margin-top:200px;} .nav>li{position:relative;} .nav2{display:none;padding-left:5px; position:absolute;left:100px;} .nav2>li{background:#efefef; width:100px;} .nav>li:not(:nth-of-type(n+3)):hover .nav2{display:block;bottom:0;} .nav>li:nth-of-type(n+3):hover .nav2{display:block; top:0;} </style> </head> <body> <ul class="nav"> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a> <ul class="nav2"> <li><a href="#">行内新闻</a></li> <li><a href="#">企业新闻</a></li> </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 type="text/css"> *{margin:0; padding:0; font-size:14px;} ul{ list-style:none; width:100px} a{color:#333;text-decoration:none} .nav li a{ display:inline-block ; text-align:center; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;} .nav li 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>查看全部
-
text-indent:10px;文本缩进10px 这样对总宽度无影响查看全部
-
导航菜单查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
不会呀查看全部
-
没有学查看全部
举报
0/150
提交
取消