                        課程
                    
                        /前端開發
                        
                            /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>