DIV+CSS布局第一部分，一列布局，两列布局，三列布局以及组合布局举例说明

最新推荐文章于 2024-05-01 23:23:55 发布
最新推荐文章于 2024-05-01 23:23:55 发布
阅读量8.1k 收藏 39
点赞数 10
分类专栏： html 文章标签： DIV CSS 布局 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xxlovesht/article/details/80736419
版权

DIV+CSS布局一


一列布局：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>布局</title>
		<style type="text/css">
			body,h1{margin: 0;padding: 0;}
			.header{background-color: #000;
			color: #FFF;
			text-align: center;}
			.main{
				background-color: #666;
				color: #fff;
				margin: 0 auto;
				width:80%;
				height: 700px;
				text-align: center;
				
			}
			.foot{
				background-color: #000;
				color: #fff;
				margin: 0 auto;
				width:80%;
				height: 150px;
				text-align: center;
				
			}
		</style>
	</head>
	<body>
		<div class="header"><h1>页面头部信息</h1></div>
		<div class="main"><h1>页面主要内容</h1></div>
		<div class="foot"><h1>版权信息</h1></div>
	</body>
</html>

运行结果如下：


两列布局

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>两列布局</title>
		<style type="text/css">
			body,h1{margin: 0;padding: 0;}
			.left{
				float: left;
				width: 30%;
				background-color: black;
				color: green;
				height: 300px;
			}
			.right{
				float: right;
				width: 70%;
				background-color: white;
				height: 300px;
				color: red;
			}
			.main{width: 90%;
			margin: 0 auto;
			text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="main">
		<div class="left">LOGO</div>
		<div class="right">用户信息</div>
		</div>
	</body>
</html>

运行效果：


三列布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三列布局</title>
		<style type="text/css">
			body,h1{margin: 0;padding: 0;}
			.left{
				float: left;
				width: 20%;
				background-color: black;
				color: green;
				height: 300px;
			}
			.right{
				float: right;
				width: 30%;
				background-color: green;
				height: 300px;
				color: red;
			}
			.middle{
				float: left;
				width: 50%;
				background-color: yellow;
				height: 300px;
				color: gray;
			}
			.main{width: 90%;
			margin: 0 auto;
			text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="main">
		<div class="left">左边</div>
		<div class="middle">中间信息</div>
		<div class="right">右边</div>
		</div>
	</body>
</html>

运行结果如下：


综合布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,h1{margin: 0; padding: 0;color: gray;text-align: center;}
			.top{
				background: yellowgreen;
				width: 100%;
				height: 100px;
			}
			.top_main{
				margin: 0 auto;
				background: #000;
				width: 900px;
				height: 100px;
			}
				.top_left{
				float: left;
				background:gold;
				width: 200px;
				height: 100px;
			}
			.top_right{
				float: right;
				background: #00C;
				width: 700px;
				height: 100px;
			}
			.nav{
				margin: 0 auto;
				background: #999;
				width: 900px;
				height: 50px;
			}
						.left{
				float: left;
				width: 300PX;
				background-color: black;
				color: green;
				height: 300px;
			}
			.right{
				float: right;
				width: 300PX;
				background-color: green;
				height: 300px;
				color: red;
			}
			.middle{
				float: left;
				width: 300PX;
				background-color: yellow;
				height: 300px;
				color: gray;
			}
			.main{width: 900PX;
			margin: 0 auto;
			height: 500px;
			background-color: peachpuff;
			}
			.footer{
				margin: 0 auto;
				background-color: #000;
				width: 900px;
				height: 200px;
				color: #FFF;
			}
		</style>
	</head>
	<body>
		<div class="top">
			<div class=top-main>
				<div class="top_left"><h1>logo</h1></div>
				<div class="top_right"><h1>头部信息</h1></div>
			</div>
		</div>
		<div class="nav"><h1>页面导航</h1></div>
		<!--主要内容-->
		<div class="main">
		<div class="left">左边</div>
		<div class="middle">中间信息</div>
		<div class="right">右边</div>
		</div>
		<!--版权信息-->
		<div class="footer"><h1>版权信息</h1></div>
	</body>
</html>

运行结果如下：



熊猫_water
关注
  • 10
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
css两列等高,多种方法实现div两列等高（收集整理）
weixin_28805935的博客
08-03 766
HTML骨架<divid="header">头部div><divid="container"><divclass="mainbox">主内容区域div><divclass="sidebox">侧边栏div>div><divid="footer">页脚div>1.背景模拟(使用背景图片实现等高)：背景模拟主要依...
DIV+CSS实现三列布局
qq_2575896094的博客
05-08 2121
实现三列布局最基本的要求:两边列宽度固定,中间列自适应中间列内容完整显示中间列优先加载实现三列布局方案:定位方式:代码:&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;定位方式实现三列布局&lt;/title&amp
div 三列布局
weixin_30590285的博客
01-11 222
原理：当子元素处于浮动状态，设置负margin>=子元素宽度时，子元素会覆盖到兄弟元素上 <!DOCTYPE html><html><head> <title></title> <meta charset="utf-8" /> <style type="text/css"> html...
【CSS 布局】-多列布局
我有满天星辰的博客
02-10 2428
(2)设置 grid 属性, grid-template-columns: auto 1fr auto;两列布局：一列定宽(也有可能由子元素决定宽度)，一列自适应的布局。(2)通过外边距的方式使该容器的左边有左边列容器的宽度的外边距。(2)通过外边距的方式使该容器的左边有左边列容器的宽度的外边距。(1)左右两列脱离文档流，并通过偏移的方式到达自己的区域。(3)使中间自适应的宽度为父级容器减去两个定宽的列。(2)使中间自适应的宽度为父级容器减去两个定宽的列。(2)设置 flex 属性,flex : 1。
前端提高篇（四十四）CSS练习3：flex布局（导航栏，两列三列布局(1)
最新发布
2401_84435192的博客
05-01 19
其中，li设置成inline-block，并在ul上设置font-size为0，消除li之间的空隙；一般两列布局会在父级设置一个最小宽度min-width，当浏览器的宽度小于这个值时，下方出现滚动条，页面从左到右滚动看全貌。当两个子div不能充满父级时，2子由于设置了flex-grow，而1子的flex-grow为0，所以多余的宽度都给了2。两个子div，第一个子div设定宽度，第二个不设宽度，但设置了felox-grow：1；还可以用float，li脱离文档流，让其横放，并清除浮动。
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
热门推荐
LonelySnow的博客
04-08 2万+
1.应用场景 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决，需要攻克以下两点： 1）让两个div并排到一行 2）让一个div宽度固定，另个div占据剩下宽度的空间 关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； ...
学习DIV+CSS网页布局之一列布局
09-24
【描述】: "本文旨在探讨CSS布局中的一列布局技术，通过实例解析如何利用DIV+CSS实现单列网页设计，适合初学者及需要进阶理解网页布局的开发者参考。" 在网页设计中，布局是构建网页结构的关键部分，它决定了网页...
学习DIV+CSS网页布局之三列布局
09-24
本文将深入探讨`三列布局`，这是`DIV+CSS`布局中的一个重要概念，尤其适用于创建复杂且响应式的网页。 **一、宽度自适应三列布局** 1. **基本原理**：宽度自适应的三列布局基于两列布局的原理，通过增加一列并调整...
div+css布局资料.zip
11-08
三、常见的Div+CSS布局模式 1. **流式布局**：内容从左到右排列，适用于宽屏显示，常用于新闻网站和博客。 2. **网格布局**：将页面划分为若干等大或不等大的网格，每个网格内放置相应内容，常见于电商网站。 3. **...
非常漂亮的Div+CSS布局入门教程第1/5页
10-30
在网页设计领域，Div+CSS布局是现代网页开发的基础，它允许设计师以更加灵活和精确的方式控制网页元素的样式和位置。本篇“非常漂亮的Div+CSS布局入门教程”旨在引导初学者掌握这一核心技术。 首先，了解一些基本...
【总结】：CSS常用的两栏布局方法（最全面）
weixin_60297362的博客
03-23 4680
文章目录一、CSS两栏布局（左列定宽，右列自适应宽）方法一：浮动+margin方法二：定位+margin方法三：浮动+BFC方法四：flex布局方法五：able布局二、CSS两栏布局（左列不定宽，右列自适应宽） 一、CSS两栏布局（左列定宽，右列自适应宽） 最终效果： 方法一：浮动+margin HTML： <div class="container"> <div class="left">定宽</div> <div class="right">自适应
探索CSS实现三行三列等高布局
咸鱼白菜
06-29 2976
[ 2006-02-13 07:47:07 | Author: greengnn ] Font Size: Large | Medium | Small 翻译自：In Search of the Holy Grail原文：http://www.alistapart.com/articles/holygrail这个翻译的页面版权归greengnn所有，转载请注明出处第一步：创建一个结
html+css实现三列布局的4种方式
u013455430的专栏
01-14 9244
面试问到一个问题,要设计左右两边固定100px，中间自动填充，总长度为100%的一个页面 刚开始我说用栅格，实践上确实不行，所以去百度下如何实现，自己去实现了4种方式分别是：BFC块级布局，flex布局，table布局,css计算宽度布局 由于不懂BFC布局，所以在实现布局的时候走了很多弯路，一直复现失败，但后调整了html中的div顺序解决了问题，直到现在我还是不能理解这个问题，等我看懂了再...
css二列布局和多列布局
KING
01-06 1889
设置为float的形式 .left{ width:20%; height:500px; float:left; background:#ccc; } .right{ width:20%; height:500px; float:right; background:#ddd; } .center{ widt
DIV+CSS一行两列布局
gzblog的专栏
06-21 2121
来源：本站原创 点击：5445 时间：2007年04月19日 论坛讨论 [字号：大中小] 实现效果：main 我是包在外面的div col1 我是第一列col2 我是第二列clear-float;我用来清除浮动（清除float）以下是说明：CSS代码：.main{width:800px;/* 总的宽度 */background:red;}.main .c
网页布局：CSS实现一列二列三列和混合布局
baochanghong的专栏
07-18 1791
常见网站布局 网站常见的布局方式主要有一列布局，二列布局，三列布局和混合布局。 一列布局 效果图： 代码： CSS: body{margin:0;padding: 0;} .top{height:100px;background: blue;} .main{width:800px;height:300px;background: #c
CSS布局之多列布局
wangwangwanglichao的博客
03-31 9603
前端布局非常重要的一环就是页面框架的搭建，也是最基础的一环。在页面框架搭建之中，又有居中布局/多列布局/全局布局。本文介绍一下多列布局的一些技巧。多列布局定宽 + 自适应1.使用float + overflow：原理: 通过将左边子元素脱离文档流,设置右边子元素规定当内容溢出元素框时发生的事情以达到多列布局;用法：先将左边子元素设置为float:left;再设置右边子元素为overflow:hid...
css3——多列布局、瀑布流
肖的博客
02-19 2309
colum-count：属性设置列的具体个数 colum-width：属性控制列的宽度 column-gap：两列之间的列间距 column-rule：规定列之间的分割线的宽度、样式和颜色 column-span：规定元素应横跨多少列（1：不跨列（默认）；all：跨所有列） 实例： &amp;lt;style&amp;gt; div { width: 100%; ...
利用div+css 设计一个三行三列的一个布局效果
05-26
`.row` 定义为一个行元素，内部的 `.col` 元素则定义为列元素，使用 `flex-basis: 33.33%` 让每个列元素占据一行中的三分之一，通过 `height: 100px` 和 `background-color: #ccc` 以及 `border: 1px solid #666` 来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

熊猫_water

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值