【记录贴】html+css 超简单的布局2

老习惯先画炒鸡简陋的原型图

然后还是上效果图

有点类似博客的布局

然后是上代码

<!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真的很好用。

【记录贴】html+css 超简单的布局2

猜你喜欢