Heim >Web-Frontend >HTML-Tutorial >Dreanweaver里显示跟在浏览器中显示不一样，不知道哪里错了，div加不上边框_html/css_WEB-ITnose
Dreanweaver里显示跟在浏览器中显示不一样，不知道哪里错了，div加不上边框_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:11:101264Durchsuche
我想要这样的显示效果
[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有问题，给他加不上边框？
图片看不见了
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery 修改CSS class怎么不起作用?_html/css_WEB-ITnoseNächster Artikel：急如何判断传到二级页面的是一级菜单还是二级菜单？_html/css_WEB-ITnose