div + css布局为什么和网页显示不一样?
在DW8.0中显示是这样的可以是为什么到了网页显示会是这样?我明明中margin-top:10px的,但是为什么还是这样?下面是源代码:CSS代码:/*CSSDocume...
在DW8.0中显示是这样的
可以是为什么到了网页显示会是这样?
我明明中margin-top:10px的,但是为什么还是这样?
下面是源代码:
CSS代码:
/* CSS Document */
body{ background-color:#CCCCCC;}
.div_big{width:960px; height:1800px; background-color:#FFFFFF; margin:0 auto;}
.div_left{width:460px; height:240px; float:left; border:solid 1px #CCCCCC; margin-left:10px; margin-top:10px;}
.div_right{width:460px; height:240px; float:right; border:solid 1px #CCCCCC; margin-right:10px; margin-top:10px;}
.T_left{
float:left;
margin-top: 10px;
margin-left: 10px;
}
.P_left{
float:left;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
.title_top{width:940px; height:28px; margin-left:10px; margin-top:10px border:solid 1px #CCCCCC;}
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=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="bss_one.css">
</head>
<body>
<div class="div_big">
<div class="title_top">
</div>
<!-第一->
<div class="div_left">
<div class="P_left">
<img src="image/p2.jpg" width="212" height="218" /></div>
<div class="T_left">
<p></p>
</div>
</div>
<!-第二->
<div class="div_right">
</div>
</div>
</body>
</html>
帮我看看这个是为什么啊? 展开
可以是为什么到了网页显示会是这样?
我明明中margin-top:10px的,但是为什么还是这样?
下面是源代码:
CSS代码:
/* CSS Document */
body{ background-color:#CCCCCC;}
.div_big{width:960px; height:1800px; background-color:#FFFFFF; margin:0 auto;}
.div_left{width:460px; height:240px; float:left; border:solid 1px #CCCCCC; margin-left:10px; margin-top:10px;}
.div_right{width:460px; height:240px; float:right; border:solid 1px #CCCCCC; margin-right:10px; margin-top:10px;}
.T_left{
float:left;
margin-top: 10px;
margin-left: 10px;
}
.P_left{
float:left;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
.title_top{width:940px; height:28px; margin-left:10px; margin-top:10px border:solid 1px #CCCCCC;}
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=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="bss_one.css">
</head>
<body>
<div class="div_big">
<div class="title_top">
</div>
<!-第一->
<div class="div_left">
<div class="P_left">
<img src="image/p2.jpg" width="212" height="218" /></div>
<div class="T_left">
<p></p>
</div>
</div>
<!-第二->
<div class="div_right">
</div>
</div>
</body>
</html>
帮我看看这个是为什么啊? 展开
1个回答
展开全部
做网页不要用dw的预览,要以各大内核浏览器界面中呈现的效果为准,dw是傻瓜式的软件,某些方面表现得很傻,尽量养成自己手写代码的习惯,这是干这个活想干好必须的基本功
你那个问题是外边距自动合并引起的。这个是个很有用的功能,用于两个p段落之间上下外边距自动叠加,原理你可以百度一下:css外边距自动合并
解决你这个问题可以尝试给出现问题的元素css加zoom:1;或1px内边距或边框之类的。比如加上下各1px的padding,再把总高度减去2px即可。
css的命名最好是不用下划线,用中划线好点。下划线本身没错,但op浏览器有个老版本不认识下划线(貌似也不是多大问题,op毕竟用户少)
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询