首页 > Web开发 > 详细

慕课笔记利用css进行布局【两列布局】

时间:2017-07-29 15:03:07      阅读:258      评论:0      收藏:0      [点我收藏+]
<html>
	<head>
		<title>两列布局</title>
		<style type="text/css">
			body{margin:0;padding:0;text-align:center}
			/*两列的布局样式*/
				/*float:left向左浮动*/
			.content{width:920px;margin:0 auto}
			.left{width:20%;height:500px;background:#f00;float:left}
			.right{width:80%;height:500px;background:#ff0;float:right}
		</style>
	</head>
	<body>

	 
	 <!--/*两列的布局样式*/-->
	 两列的布局样式,采用浮动的方式<br/>
	 <div class="content">
	 <div class="left"></div>
	 <div class="right"></div>
	 </div>

	</body>
</html>

 效果图如下:

技术分享

关键知识点:

float:left向左浮动
float:right向右浮动

慕课笔记利用css进行布局【两列布局】

原文:http://www.cnblogs.com/soulsjie/p/7255672.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!