css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px
<!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">
*{padding:0px; margin:0px;}
body{font-size:12px;background:#000;}
ul{list-style-type:none;}
a{color:#fff; text-decoration:none;}
.container{width:1024px; height:1000px;background:url(img/1.jpg) no-repeat;margin:0 auto;padding-top:100px;}
.menu{background:url(img/bg1.png) repeat-x;height:30px; line-height:30px;}
.menu li{float:left; position:relative;}
.menu li a{float:left;height:30px; line-height:30px;padding:0px 20px;}
.menu li ul{position:absolute;background:url(img/bg2.png); width:150px;}
.menu li ul a{width:110px;}
.one{border:1px solid #000;top:30px;}
.one li a:hover{background:url(img/bg1.png);}
</style>
</head>
<body>
<div class="container">
<ul class="menu">
<li><a href="#">菜单一</a>
<ul class="one">
<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>
</li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#">菜单五</a></li>
</ul>
</div>
</body>
</html>
看的教程上说是150-2*20=110,我不明白是怎么回事?求解答,最好详细点,谢谢
追问:menu li ul a 110px;.中a标签宽度设置为110px了,左右内补丁20px了,不应该是算在110px里的吗?menu ul设置为150px
答案:.menu li a{float:left;height:30px; line-height:30px;padding:0px 20px;}
padding:0px 20px;}
这是左右边框是20.所以是40px;
.menu li ul 150px;.menu li ul a 110px;.menu li a
150px-(20*2)px=110px 就是这样的!
其他:以直接按shift键切换的,而且可以保留。设置的话你可以用组合键:
ctrl + shift + M调出菜单来,打开"设置属性"里面的“按键”,最上方有个“中英文切换”,选择“shift”,并把shift正下方的那排字选择打钩,保存就可以了! padding:0 20px完全写法是padding:0 20px 0 20px
上一个:div+css中关于ie浏览器中非啊元素的:hover的实现问题,哪位大神指点下啊
下一个:css 属性选择器 ie6 不支持吗?