-
border-radius: px;查看全部
-
<!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;} a{color:#333;text-decoration:none} .nav li{float:left;} .nav li a{ display:block; text-indent:20px; 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 不会影响总体宽度（padding会） 需要将a标签设置为块元素，才能设高宽、hover效果 代码：a{display:block} hover格式 a:hover{}查看全部
-
伸缩：margin:top查看全部
-
通常用什么标签构建导航条菜单： 1、用<ul><li></li></ul>无序列表来构建(垂直菜单) eg:<ul> <li><a href="#">首页</a></li> ...... </ul> 2、垂直菜单变成水平菜单：float:left； 3、在制作圆角菜单时背景图片是贴在<a>标签里的； 4、在制作改变高度的伸缩菜单时用margin:top实现高度向上延伸； 5、在用JavaScript代码实现菜单的水平伸缩效果是this的含义是：this代表当前的<a>标签查看全部
-
text-indent：文字缩进查看全部
-
text-decoration：none 去掉下划线查看全部
-
list-style:none清除列表圆点查看全部
-
line-height:10px查看全部
-
a:hover查看全部
-
用无序列表构建菜单 <ul> <li><a href="#">**</a></li> </ul>查看全部
-
border-bottom:10px solid #ccc设置底边框的大小和颜色查看全部
-
水平导航需要设置float属性 基本清除样式：*{margin:0;padding:0;} 无序列表圆点清除：ul{list-style:none;} 文字下划线去除：a{text-decoration:none;} 文本缩进标签 text-indent 不会影响总体宽度（padding会） 需要将a标签设置为块元素，才能设高宽、hover效果 代码：a{display:block} hover格式 a:hover{}查看全部
-
.nav>li>a:hover{ background-color:#F60; color:#ccc} 大于号只应用于下一级子层 空格应用于所有子层查看全部
-
display:block 就可以定义成行内块 text-indent缩进且不回增加block宽度查看全部
举报
0/150
提交
取消