老習慣先畫炒雞簡陋的原型圖
然後還是上效果圖
有點類似博客的佈局
然後是上代碼
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id = "bd">
<div id = "t"></div>
<div id = "t2">
<h2>標題</h2>
<p>十多年快樂番薯多年來第三方配送等你放屁點難受；放聲大哭你哦公司打卡V領單身快樂那倒是可能考慮到是哪個了的斯諾克給你的上課了。</p>
<a style = "float:right;" href = "#">查看更多...</a>
</div>
<div id = "t3">
<dl>
<dt><a href = "#">dfdsfsd</a></dt>
<dt><a href = "#">sadas</a></dt>
<dt><a href = "#">das</a></dt>
<dt><a href = "#">sadasdas</a></dt>
<dt><a href = "#">safdsgsd</a></dt>
<dt><a href = "#">asd</a></dt>
<dt><a href = "#">asfzfcx</a></dt>
<dt><a href = "#">qwfqd</a></dt>
<dt><a href = "#">asfas</a></dt>
<dt><a href = "#">awqe</a></dt>
<dt><a href = "#">qwe</a></dt>
<dt><a href = "#">we</a></dt>
<dt><a href = "#">weqwe</a>
<dd><a href = "#">rewtc</a></dd>
<dd><a href = "#">sdfsdfsd</a></dd>
<dd><a href = "#">wegfdgdfg</a></dd>
</dt>
<dt><a href = "#">safefsdf</a></dt>
<dt><a href = "#">dsfdsgdsgs</a></dt>
</dl></div>
<div id = "t2">
<h2>sadasfd</h2>
<p>dsvsdvsd%—90%愛打瞌睡不發啦隨便發發了帶你瘋狂拉昇你看發生了或瘋狂拉昇煩惱快拉上你發啦hi偶發看來你瘋啦 你發了卡號if哈利你瘋啦是南方喀</p>
<a style = "float:right;" href = "#">查看更多...</a>
</div>
<div id = "t2">
<h2>去問問</h2>
<p>咋說地阿斯發哈東方閃電合肥市科技護膚和我我好委屈額狥收到貨發了多少浪費空間啊代理費那垃圾書法家哈實際發生了就好伐啦但是的拉克絲經典款拉絲機</p>
<a style = "float:right;" href = "#">查看更多...</a>
</div>
</body>
</html>然後是css
body{
background-color: #404040;
}
#bd{
margin-left: 150px;
width: 1010px;
height: 1000px;
border-radius: 10px;
text-align:center;
}
#t{
width: 1010px;
height: 250px;
border-radius: 10px;
background :url(./8001.jpg) no-repeat center center;
background-size: cover;
}
#t2{
float:left;
width: 750px;
height: 200px;
border-radius: 10px;
background-color: #EEE0E5;
text-align:left;
margin-top:10px;
padding: 5px;
}
#en{
float:left;
width: 750px;
height: 200px;
border-radius: 10px;
margin-top:10px;
padding: 5px;
}
#t3{
float:right;
text-align:left;
width: 237px;
height: 650px;
border-radius: 10px;
background-color:#F0F0F0;
margin-left:10px;
margin-top: 9px;
}
#t3 a{
margin-top: 10px;
margin-left:10px;
}因爲之前萌新然後佈局用了表格，突然想起來說最好不用表格，然後就改了沒表格的，的確沒表格的會舒服點。
float真的很好用。