                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /網(wǎng)頁簡單布局之結(jié)構(gòu)與表現(xiàn)原則

坐等大神。

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
????<style?type="text/css">
????body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,input,select,textarea,form{margin:?0;?padding:?0;}
body{font:14px/1.5?"宋體";}
img{border:none;}
ul,ol{list-style:none;}
input,select,textarea{outline:none;border:none;background:none;}
textarea{resize:none;}
a{text-decoration:none;}
.demo01{width:600px;position:?relative;overflow:?hidden;}
.left?img{margin-left:20px?}
.left{width:100px;float:?left}
.right{width:400px;float:right;background:#9CF;border:?1px?solid?#ccc;padding:?20px}
.right?p{font-size:?20px;line-height:?25px}
.right?span{position:?absolute;right:?20px;top:10px;font-size:?12px}


.demo02?img?{float:left;}
.demo02?.right01{width:400px;float:right;background:#9CF;border:?1px?solid?#ccc;padding:?20px}
.demo02?.right01?p{font-size:?20px;line-height:?25px}
.demo02?.right01?span{position:?absolute;right:?20px;top:10px;font-size:?12px}
????</style>
</head>
<body>
<div>
????<div>
????<img?src="index.jpg">????????
????</div>
????<div>
????????<h3>大鯊魚</h3>
????????<p>又到了周一送壁紙的時間，本周小編依然為大家精心挑選了50張精美壁紙，相信總有一張會讓你像小編一樣忍不住就想收藏。不要控制自己，喜歡就趕緊右鍵吧！
????????到了周一送壁紙的時間，本周小編依然為大家精心挑選了50張精美壁紙，相信總</p>
????????<span>10分鐘之前</span>
????????????</div>
</div>
<div>
????
????<img?src="index.jpg">????????
????<div>
????????<h3>大鯊魚</h3>
????????<p>又到了周一送壁紙的時間，本周小編依然為大家精心挑選了50張精美壁紙，相信總有一張會讓你像小編一樣忍不住就想收藏。不要控制自己，喜歡就趕緊右鍵吧！
????????到了周一送壁紙的時間，本周小編依然為大家精心挑選了50張精美壁紙，相信總</p>
????????<span>10分鐘之前</span>
????????????</div>
</div>
</body>
</html>

我的做出來是這個玩意，擦