css格式有关问题
css格式问题
IE8浏览器为什么设置了类中的位置会无效，还是原来那样
2、为什么类nav的这个黑色背景色出不来？
------解决思路----------------------
1class不要数字开头
2清除float
<!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">
#class3
{
width:900px;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:#099;
margin-top:150px;
}
#class3 ul
{
width:800px;
height:30px;
background-color:#936;
margin-left:auto;
margin-right:auto;
position:relative;
}
#class3 li
{
list-style-type: none;
width: 100px;
position:relative;
margin-top:10px;
float:left;
background-color:#3F0;
margin-right:10px;
text-align:center;
}
#class2
{
width:900px;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:#099;
height:50px;
}
#class2 li .01
{
list-style-type: none;
position: absolute;
left: 670px;
top: 23px;
}
.02
{
list-style-type: none;
position: absolute;
left: 365px;
top: 30px;
}
.03
{
list-style-type: none;
position: absolute;
left: 308px;
top: 30px;
}
.04
{
list-style-type: none;
position: absolute;
left: -232px;
top: 30px;
}
.05
{
list-style-type: none;
position: absolute;
left: 201px;
top: 30px;
}
.06
{
list-style-type: none;
position: absolute;
left: 252px;
top: 30px;
}
.07
{
list-style-type: none;
position: absolute;
left: -97px;
top: 28px;
}
</style>
</head>
<body>
<div id="class2">
<ul>
<li class="01">横排</li>
<li class="02">横排</li>
<li class="03">横排</li>
<li class="04">横排</li>
<li class="05">横排</li>
<li class="06">横排</li>
<li class="07">横排</li>
</ul>
</div>
<div id="class3">
<ul>
<li>横排</li>
<li>横排</li>
<li>横排</li>
<li>横排</li>
<li>横排</li>
<li>横排</li>
<li>横排</li>
</ul>
</div>
</body>
</html>
.07
{
list-style-type: none;
position: absolute;
left: -97px;
top: 28px;
}
IE8浏览器为什么设置了类中的位置会无效，还是原来那样
<!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">
#box06 {
position:relative;
width: 500px;
height: 100px;
top:50%;
left:50%;
margin-left:-250px;
margin-top:-50px;
background-color:#F39;
}
#box07 {
position:absolute;
width: 300px;
height: 30px;
background-color:#0F0;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-15px;
}
#box08 {
position:absolute;
width: 300px;
height: 30px;
background-color:#0Ff;
left:30px;
top:50%;
}
.nav
{
width:500px;
background-color:#000;
}
.nav li{
width:80px;
float:left;
list-style:none;
display:inline;
background:#0F0;
text-align:center;
margin-right:10px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>横排</li>
<li>横排</li>
<li>横排</li>
</ul>
</div>
<div> DIV1 </div>
<div> DIV2 </div>
<div style= "display:inline "> DIV1 </div>
<div style= "display:inline "> DIV2 </div>
<span>DIVCSS!</span>
<span>DIVCSS5 </span>
<span style= "display:block "> SPAN1 </span>
<span style= "display:block "> SPAN2 </span>
<div id="box06">
<div id="box07">box07</div>
<div id="box08">box08</div>
</div>
</body>
</html>
.nav
{
width:500px;
background-color:#000;
}
2、为什么类nav的这个黑色背景色出不来？
------解决思路----------------------
1class不要数字开头
2清除float
<div class="nav">
<ul>
<li>横排</li>
<li>横排</li>
<li>横排</li>
</ul>
<div style="clear:both;"></div>
</div>