ホームページ > 記事 > ウェブフロントエンド > CSS 形式の問題_html/css_WEB-ITnose
CSS 形式の問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:20:22854ブラウズ
<!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 ブラウザはクラス内の位置を無効に、または以前と同じに設定するのはなぜですか? 2. クラス ナビゲーションの背景色が黒に表示されないのはなぜですか?
ディスカッションへの返信 (解決策)
1class は数字で始まっていません
2 クリアフロート<!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;}
<div class="nav"><ul><li>横排</li><li>横排</li><li>横排</li> </ul> <div style="clear:both;"></div></div>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。