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

根据老师提供的源码做出的案例，请同学们多多指教。

<!DOCTYPE html>

<html>

<head>

<title>微博对话框</title>

<style>

/*公共样式*/

body{padding-top:50px; line-height:20px;}

.userImg{padding:5px;border:1px solid #ccc;width:80px; height:50px;}

p{ text-indent:2em}

/*demo01*/

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

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

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

.demo01 .right{width:438px;float:right;border:1px solid #ccc;padding:20px;background-color:#eee;}

.demo01 h6{margin-bottom:5px;}

.demo01 .right span{float:right;margin-top:-148px;color:#999}

/*demo02*/

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

.demo02 img{margin:0 0 0 20px;float:left;}

.demo02 .right{width:438px;float:right;border:1px solid #ccc;padding:20px;background-color:#eee;}

.demo02 h6{margin-bottom:5px;}

.demo02 .right span{float:right;margin-top:-148px;color:#999}

/*demo03*/

.demo03{width:438px;margin-left:120px;border:1px solid #ccc;padding:20px;background-color:#eee;}

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

.demo03 h6{margin-bottom:5px;}

.demo03 span{float:right;margin-top:-148px;color:#999}

</style>

</head>

<body>

</div >

<p class="userP">被称为地狱门的不可侵领域突然出现在东京。真正的星空消失，取而代之的是虚假的星星。世界各地开始出现被称为"契约者"的超能力者。这些本是普通人类的能力者丧失冲动的情感，只遵循"合理性"而行动，每出现一个新的"契约者"虚假的星空就会出现新的星星，并且加以命名，相反的，每消失一个"契约者"，虚假的星空中就会消失一个星星（有专门的人员与设施观察）围绕"门"的谜团，各国势力和契约者们展开了殊死的利益争夺。</p>

</div>

<br>

</div>

<br>

</div>

</body>

</html>