Home > Web Front-end > HTML Tutorial > The display in Dreanweaver is different from the display in the browser. I don't know what's wrong. The border cannot be added to the div_html/css_WEB-ITnose

The display in Dreanweaver is different from the display in the browser. I don't know what's wrong. The border cannot be added to the div_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:11:10
Original
1270 people have browsed it

I want this display effect
[img=http://b304.photo.store.qq.com/psb?/V12O1gKZ10Scjj/UCz9sb776cJ6STaK6hFMaE5wi000A8G0Y4UqwjaA*.w!/b/YVBPNLXLcgAAYi79PrXYcgAA][/img ]
The result is like this
[img=http://b304.photo.store.qq.com/psb?/V12O1gKZ10Scjj/9gMg6IaicVievcei*IPPrs00r2gm4zvzrCt9szQkcds!/b/YXngO7UpcwAAYpP6PrVycgAA][/img]
Source code

<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>
Copy after login


Reply to discussion (solution)

<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>
Copy after login






The poster tried


simulated this problem

<!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>
Copy after login
Copy after login





<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>
Copy after login


Try




I simulated this problem

<!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>
Copy after login
Copy after login

Can you watch it? What is the problem with my code? I feel like there's something wrong with the hotnews div. Can't I add a border to it?

The picture is invisible

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template