                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /网页简单布局之结构与表现原则

为何代码一样，显示的却不一样呢？？

<style>

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma"}

.demo01{ width:600px; overflow:hidden;}

.demo01 .left{width:100px;float:left;}

.demo01 .left.img{margin-left:10px;}

.demo01 .right{width:458px; padding:20px; float:right; background:#9cf; border:1px solid #ccc;}

.demo01 .right .p{font-siz:12px; line-height:25px;}

.demo01 span{ position:absolute; right:20px; top:10px; font-size:12px;}

.demo02{ width:600px; position:relative; overflow:hidden;}

.demo02 img{ float:left; margin-left:10px;}

.demo02 .right{width:458px; padding:20px; float:right; background:#9cf; border:1px solid #ccc;}

.demo02 .right .p{font-siz:12px; line-height:25px;}

.demo02 span{ position:absolute; right:20px; top:10px; font-size:12px;}

.demo03{width:458px; padding:20px; background:#9cf; border:1px solid #ccc; margin-left:100px; position:relative;}

.demo03 img{ float:left; margin:-20px 0 0 -100px; }

.demo03 p{font-siz:12px; line-height:25px;}

.demo03 span{ position:absolute; right:20px; top:10px; font-size:12px;}

</style>

</head>

<body>

</div>

<h6>樱桃小丸子</h6>

<p>试了试下载下来的源代码，通过缩放页面大小模拟屏幕分辨率的效果，发现初级方法会发生错位，下面两种没有。然后高级方法就是扩展的问题，所以我还是比较拥护中级做法。试了试下载下来的源代码，通过缩放页面大小模拟屏幕分辨率的效果，发现初级方法会发生错位，下面两种没有。然后高级方法就是扩展的问题，所以我还是比较拥护中试了试下载下来的源代码，通过缩放页面大小模拟屏幕分辨率的效果，发现初级方法会发生错位，下面两种没有。然后高级方法就是扩展的问题，所以我还是比较拥护中</p>

</div>

<br />

<h6>樱桃小丸子</h6>

</div>

<br />

<h6>樱桃小丸子</h6>

</div>

</body>

</html>

骑突突突的nancy

2016-04-06

源自：网页简单布局之结构与表现原则 2-1

关注问题我要回答

1322

操作

收起

1 回答

狼獨华
2016-04-06

demo1的最外面的盒子你没有设置定位所以时间跑后面了
.demo01 .left.img{margin-left:10px;} 错了 demo01 .left img img前面没有点。。
demo3的 .demo03 img{ float:left; margin:-20px 0 0 -100px; } 你把-100px 改改我是该成-110px就ok了