<a id = "logo" href=""><img src="logo.gif"></img></a>
用这行代码实现logo时
如果把logo设置为inline-block则margin可以正常显示，设置为block时不能正常显示
<!DOCYTYPE html>
<html>
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
div, body, ul, ol{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
li{
text-align: center;
line-height: 30px;
}
label{
display: inline-block;
width: 100px;
text-align: right;
}
#header{
height: 100px;
background-color: blue;
}
#content{
background-color: green;
width: 890px;
margin: 0 auto;
}
#content #left{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
background-color: purple;
}
#logo{
display: inline-block;
margin: 10 0 0 10;
}
#content #right{
margin: 0 0 0 100;
background-color: yellow;
}
#footer{
background-color: orange;
height: 100px;
}
.disable{
color:gray;
}
.enable{
color:red;
}
</style>
<script>
$(function(){
$("p:contains('请输入介绍')").hide();
$("ul li input[name=nickname]").blur(function(){
$(this).removeClass("enable");
$(this).addClass("disable");
});
$("ul li input[name=nickname]").focus(function(){
$(this).removeClass("disable");
$(this).addClass("enable");
});
});
</script>
</head>
<body>
<div id="header">
<a href="" id="logo"><img src="logo.gif"></a>
<div id="search"></div>
<div id="nav"></div>
</div>
<div id="content">
<div id="left"></div>
<div id="right">
<li><label>用户名：</label><input type="text" name="nickname" value="请输入用户名"/></li>
<li><label>密码：</label><input type="password" name="password" value="请输入密码"/></li>
<li><label>介绍：</label><textarea name="desc">请输入介绍</textarea></li>
</ul>
</div>
</div>
<div id="footer"></div>
</body>
</html>
在线咨询
18739325251