Home >Web Front-end >HTML Tutorial >css格式问题_html/css_WEB-ITnose
css格式问题_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-21 09:20:22901browse
<!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>
<!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:100px; margin-left:auto; margin-right:auto; position:relative; background-color:#099; height:50px; } #class2 .c01{ list-style-type: none; position: absolute; left: 422px; top: 15px; width: 60px;} .c02{ list-style-type: none; position: absolute; left: 365px; top: 15px; width: 60px;}.c03{ list-style-type: none; position: absolute; left: 82px; bottom: 0px; right: 99px; top: 15px; height: 31px; width: 58px; top: 15px;}.c04{ list-style-type: none; position: absolute; left: -232px; top: 30px; top: 15px; } .c05{ list-style-type: none; position: absolute; left: 162px; top: 15px; width: 60px; height: 32px;}.c06{ list-style-type: none; position: absolute; left: 252px; top: 15px; width: 60px;}.c07{ list-style-type: none; position: absolute; left: -97px; top: 15px; width: 60px;}</style></head><body><div id="class2"><ul><li class="c01">横1排</li><li class="c02">横2排</li><li class="c03">横3排</li><li class="c04">横4排</li><li class="c05">横5排</li><li class="c06">横6排</li><li class="c07">横7排</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>
<!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 style="clear:both;"></div></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> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css ul li 中的控件垂直居中_html/css_WEB-ITnoseNext article：为什么在火狐浏览器中，这些文字是图片格式呢？百度为什么这么做？_html/css_WEB-ITnose