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

<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向右浮动

时间： 2024-12-20 16:07:59

慕课笔记利用css进行布局【两列布局】的相关文章

css之页面两列布局

两列布局:左边固定,后边自适应第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left"></div> <div class="right"></div> css部分 .left { position: absolute; /*这可以换成float:left,都可以使其脱离文档流*/ height: 100px; width:

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

三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="text/css"> body{margin:0;padding:0;text-align:center} /*三列的布局样式*/ /*position:absolute定位*/ .left2{width:200px;height:500px;background:#f0f;position:abs

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

<html> <head> <title>一列布局</title> <style type="text/css"> body{margin:0;padding:0;text-align:center} /*一列的布局样式*/ /*margin:0 auto使div居中*/ .top{width:800px;height:50px;background:#00f;margin:0 auto} .main{width:800px;

慕课笔记利用css进行布局【混合布局练习】

通过学习div的布局,以一个简单的内容管理网站的布局为例子,用div+css进行简单的网页布局,加深学印象: <html> <head> <title>CSS+div布局学习</title> <style type="text/css"> body{margin:0;padding:0;text-align:center} .head{height:230px;width:960px;background:#f96;margi

div+css经典三行两列布局

写在前面在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说position 代码闲来无事,就自己动手实现了一下,代码如下: 1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta name="viewport" content="width=device-width&qu

布局-两列布局（一列定宽，一列自适应）

结构: 1 <div class="parent"> 2 <div class="left"> 3 <p>left</p> 4 </div> 5 <div class="right"> 6 <p>right</p> 7 <p>right</p> 8 </div> 9 </div> 样式: 1.解决方案一:

慕课笔记利用css进行布局【混合布局】

<html> <head> <title>混合布局学习</title> <style type="text/css"> body{margin:0;padding:0;text-align:center} .top{height:50px;background:#00f;margin:0 auto} .head{height:50px;width:700px;background:#f96;margin:0 auto} .ma

CSS布局两列布局之单列定宽,单列自适应布局思路

前言说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的我们将从 float, inline-block, table, absolute, flex, grid 这几个布局方式来实现这种效果 float [float + margin] 将定宽的一列使用float,而自适应的一列使用计算后的margin <style> .f1 .parent{overflow: hidden;zoom: 1;} // 触发bfc和haslayout来闭合

CSS两列布局

在布局中,我们常常需要出现两列的情况,其中左边一列固定宽度,右边一列随着浏览器宽度变化而变化.如何实现呢? 传统的方法是利用float将左部分浮动起来,再通过margin将右部分右移,得到所需效果,代码如下:  <div class="left background-color-red height-60 width-300"></div> <div class=" background