ホームページ >ウェブフロントエンド >htmlチュートリアル >Dreanweaver での表示とブラウザでの表示が異なります。div_html/css_WEB-ITnose に枠線を追加できません。
Dreanweaver での表示とブラウザでの表示が異なります。div_html/css_WEB-ITnose に枠線を追加できません。
- WBOYオリジナル
- 2016-06-24 12:11:101264ブラウズ
この表示効果が欲しい
[img=http://b304.photo.store.qq.com/psb?/V12O1gKZ10Scjj/UCz9sb776cJ6STaK6hFMaE5wi000A8G0Y4UqwjaA*.w!/b/YVBPNLXLcgAAYi79PrXYcgAA][/img]結果はこんな感じです
[img=http://b304.photo.store.qq.com/psb?/V12O1gKZ10Scjj/9gMg6IaicVievcei*IPPrs00r2gm4zvzrCt9szQkcds!/b/YXngO7UpcwAAYpP6PrVycgAA][/img]
ソースコード
<html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> $(".navitems li a").click(function(){ $(".navitems li a").css("background","url(images/libg.png)"); }); </script> <style type="text/css"> div{ border:1px solid #666} .newsbody{ width:1000px; margin:0 auto;} .content{ width:998px; margin:0 auto; padding-top:10px; border:1px solid #999; border-bottom:none} .nav{ background:url(images/navbg.png) top left;width:1000px; height:30px; line-height:0px; overflow:hidden; margin: 0 auto;} .navitems{ list-style:none;} .navitems li{ float:left; margin-right:10px; margin-left:0px; border-right:#FFC; border:1px;} .navitems li a{ text-align:center; color:#FFF; text-decoration:none; font-size:15px; vertical-align:middle} .navitems li a:hover{text-decoration:underline}; .hotnews{ width:700px; height:400px;} .hotnews div{ float:left} .banner{ position:relative; left:0px; width:700px; height:30px; background:url(images/banner.png); text-align:left; line-height:30px; overflow: hidden; background-color: #FFFFFF;} .hotnewsitems{ width:450px; height:360px; position:relative; left:0px; margin-top:10px; overflow:hidden} .news{ list-style:circle;} .news li{ margin-top:10px;} .news li a{ text-decoration:none;} .news li a:hover{ text-decoration:underline;} .gundong{ margin-left:10px; width:230px; height:195px; position:relative; margin-top:10px;} .hotvideo{ width:230px; height:155px; margin-left:10px; margin-top:10px;} </style> </head> <body> <div class="nav"> <ul class="navitems"> <li style="padding-left:0px"><a href="#">新闻首页</a></li> <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> <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> <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> <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> </div> <div class="content"> <div class="hotnews"> <div class="banner"> 焦点新闻>> </div> <div class="hotnewsitems"> <ul class="news"> <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> <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> <li><a href="#">外交部回应朝鲜扣押中国渔民:属渔业案件</a></li> <li><a href="#">外交部回应朝鲜扣押中国渔民:属渔业案件</a></li> </ul> </div> <div class="gundong">adf </div> <div class="hotvideo">问题在这</div> </div> </div> </body></html> ディスカッションに返信 (解決策)
<html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> $(".navitems li a").click(function(){ $(".navitems li a").css("background","url(images/libg.png)"); }); </script> <style type="text/css">.clear { *zoom:1; }.clear:before, .clear:after{ display:block; content:'clear'; clear:both; height:0; overflow:hidden;} div{ border:1px solid #666} .newsbody{ width:1000px; margin:0 auto;} .content{ width:998px; margin:0 auto; padding-top:10px; border:1px solid #999; border-bottom:none;} .nav{ background:url(images/navbg.png) top left;width:1000px; height:30px; line-height:0px; overflow:hidden; margin: 0 auto;} .navitems{ list-style:none;} .navitems li{ float:left; margin-right:10px; margin-left:0px; border-right:#FFC; border:1px;} .navitems li a{ text-align:center; color:#FFF; text-decoration:none; font-size:15px; vertical-align:middle} .navitems li a:hover{text-decoration:underline}; .hotnews{ width:700px; height:400px; } .banner{ position:relative; left:0px; width:700px; height:30px; background:url(images/banner.png); text-align:left; line-height:30px; overflow: hidden; background-color: #FFFFFF;} .hotnewsitems{ float:left;width:450px; height:360px; position:relative; left:0px; margin-top:10px; overflow:hidden} .news{ list-style:circle;} .news li{ margin-top:10px;} .news li a{ text-decoration:none;} .news li a:hover{ text-decoration:underline;} .gundong{ margin-left:460px; _margin-left:457px; width:230px; height:195px; position:relative; margin-top:10px;} .hotvideo{ margin-left:460px;_margin-left:457px; width:230px; height:155px; margin-top:10px;} </style> </head> <body> <div class="nav"> <ul class="navitems"> <li style="padding-left:0px"><a href="#">新闻首页</a></li> <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> <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> <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> <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> </div> <div class="content clear"> <div class="hotnews"> <div class="banner"> 焦点新闻>> </div> <div class="hotnewsitems"> <ul class="news"> <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> <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> <li><a href="#">外交部回应朝鲜扣押中国渔民:属渔业案件</a></li> <li><a href="#">外交部回应朝鲜扣押中国渔民:属渔业案件</a></li> </ul> </div> <div class="gundong">adf </div> <div class="hotvideo">问题在这</div> </div> </div> </body></html>
投稿者は、この問題をシミュレートするために
を試みました
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> <style> div { border:1px solid #000; } .a { width:450px; height:300px; float:left; } .b { margin-left:460px; _margin-left:457px; width:100px; height:200px; } .c { margin-top:10px; margin-left:460px; _margin-left:457px; width:100px; height:50px; } </style> </head> <body> <div class="a"></div> <div class="b"></div> <div class="c"></div> </body></html> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> $(".navitems li a").click(function(){ $(".navitems li a").css("background","url(images/libg.png)"); }); </script> <style type="text/css">.clear { *zoom:1; }.clear:before, .clear:after{ display:block; content:'clear'; clear:both; height:0; overflow:hidden;} div{ border:1px solid #666} .newsbody{ width:1000px; margin:0 auto;} .content{ width:998px; margin:0 auto; padding-top:10px; border:1px solid #999; border-bottom:none;} .nav{ background:url(images/navbg.png) top left;width:1000px; height:30px; line-height:0px; overflow:hidden; margin: 0 auto;} .navitems{ list-style:none;} .navitems li{ float:left; margin-right:10px; margin-left:0px; border-right:#FFC; border:1px;} .navitems li a{ text-align:center; color:#FFF; text-decoration:none; font-size:15px; vertical-align:middle} .navitems li a:hover{text-decoration:underline}; .hotnews{ width:700px; height:400px; } .banner{ position:relative; left:0px; width:700px; height:30px; background:url(images/banner.png); text-align:left; line-height:30px; overflow: hidden; background-color: #FFFFFF;} .hotnewsitems{ float:left;width:450px; height:360px; position:relative; left:0px; margin-top:10px; overflow:hidden} .news{ list-style:circle;} .news li{ margin-top:10px;} .news li a{ text-decoration:none;} .news li a:hover{ text-decoration:underline;} .gundong{ margin-left:460px;_margin-left:457px; width:230px; height:195px; position:relative; margin-top:10px;} .hotvideo{ margin-left:460px;_margin-left:457px; width:230px; height:155px; margin-top:10px;} </style> </head> <body> <div class="nav"> <ul class="navitems"> <li style="padding-left:0px"><a href="#">新闻首页</a></li> <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> <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> <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> <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> </div> <div class="content clear"> <div class="hotnews clear"> <div class="banner"> 焦点新闻>> </div> <div class="hotnewsitems"> <ul class="news"> <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> <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> <li><a href="#">外交部回应朝鲜扣押中国渔民:属渔业案件</a></li> <li><a href="#">外交部回应朝鲜扣押中国渔民:属渔业案件</a></li> </ul> </div> <div class="gundong">adf </div> <div class="hotvideo">问题在这</div> </div> </div> </body></html> この問題をシミュレートしてみてください
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> <style> div { border:1px solid #000; } .a { width:450px; height:300px; float:left; } .b { margin-left:460px; _margin-left:457px; width:100px; height:200px; } .c { margin-top:10px; margin-left:460px; _margin-left:457px; width:100px; height:50px; } </style> </head> <body> <div class="a"></div> <div class="b"></div> <div class="c"></div> </body></html> 私のコードのどこに問題があるかわかりますか? hotnews divに何か問題があるような気がしますが、境界線を追加することはできませんか?
写真は見えません
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。