这篇文章主要介绍了关于HTML+CSS和DIV如何实现排版布局，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
HTML CSS + div实现排版布局
1.网页可以看成是由一个一个“盒子”组成，如图：
![496770612-5b46ce6edc7b8_articlex[1].jpg](https://img.php.cn//upload/image/535/647/555/1531469577206233.jpg "1531469577206233.jpg")
由上图可以看出，页面分为上(网站导航)、中、下(版权声明)三个部分，
中间部分又分为左(商品分类)、中(主要部分)、右，这些版块就像一个个
的盒子，这些"盒子"中放置着各种内容，页面就是由这些"盒子"拼凑起来
案例布局分析：
![1376923543-5b46cf378eab4_articlex[1].jpg](https://img.php.cn//upload/image/871/742/343/1531469585501570.jpg "1531469585501570.jpg")
单列布局案例：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>单列布局</title>
</head>
<style>
body{
margin:0;
}
.box{
width:960px;
margin:0 auto;
}
.box .header{
height:120px;
border:1px solid #f00;
line-height:120px;
}
.box .main{
height:300px;
border:1px solid #0f0;
line-height:300px;
}
.box .footer{
height:100px;
border:1px solid #00f;
line-height:100px;
}
p{
text-align:center;
}
</style>
<body>
<p class="box">
<p class="header">头部</p>
<p class="main">主题</p>
<p class="footer">底部</p>
</p>
</body>
</html>
运行结果：
![4125081848-5b46d0aebc53f_articlex[1].png](https://img.php.cn//upload/image/397/587/984/1531469598789189.png "1531469598789189.png")
双列布局案例：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>双列布局</title>
</head>
<style>
body{
margin:0;
}
.box{
width:80%;
margin:0 auto;
overflow:hidden;
}
.box .left{
width:30%;
height:400px;
background-color:#0f0;
float:left;
}
.box .right{
width:70%;
height:400px;
background-color:#f00;
float:left;
}
</style>
<body>
<p class="box">
<p class="left"></p>
<p class="right"></p>
</p>
</body>
</html>
运行结果如下图：
![644704244-5b46d3b9c6eac_articlex[1].png](https://img.php.cn//upload/image/253/241/916/1531469605477367.png "1531469605477367.png")
三列布局案例：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>三列布局</title>
</head>
<style>
body{
margin:0;
}
.box{
width:960px;
margin:0 auto;
position:relative;
}
.box .left{
width:200px;
height:400px;
background-color:#0f0;
position:absolute;
}
.box .center{
height:400px;
background-color:#00f;
margin:0 300px 0 200px;
}
.box .right{
width:300px;
height:400px;
background-color:#f00;
position:absolute;
right:0;
top:0;
}
</style>
<body>
<p class="box">
<p class="left"></p>
<p class="center"></p>
<p class="right"></p>
</p>
</body>
</html>
运行结果如下图：
![301091421-5b46d50ad43e5_articlex[1].png](https://img.php.cn//upload/image/215/830/858/1531469612465577.png "1531469612465577.png")
混合布局案例：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>混合布局</title>
</head>
<style>
body{
margin:0;
}
.box{
width:960px;
margin:0 auto;
}
.header{
height:120px;
background-color:#ddd;
}
.main{
height:400px;
background-color:#f00;
position:relative;
}
.main .left{
width:200px;
height:400px;
position:absolute;
left:0;
top:0;
background-color:#0fccaa;
}
.main .center{
height:400px;
margin:0 305px 0 205px;
background-color:#123456;
}
.main .right{
width:300px;
height:400px;
position:absolute;
right:0;
top:0;
background-color:#ff0;
}
.footer{
height:80px;
background-color:#ddd;
}
</style>
<body>
<p class="box">
<p class="header"></p>
<p class="main">
<p class="left"></p>
<p class="center"></p>
<p class="right"></p>
</p>
<p class="footer"></p>
</p>
</body>
</html>
运行结果如下图：
![2619066118-5b46d5e7b3d8f_articlex[1].png](https://img.php.cn//upload/image/280/991/446/1531469627745767.png "1531469627745767.png")
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
以上是HTML+CSS和DIV如何实现排版布局的详细内容。更多信息请关注PHP中文网其他相关文章！
HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AMHTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。
HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AMHTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。
HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AMHTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。
HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AMHTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。
HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AMHTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。
HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AMHTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。
HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AMHTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。
HTML：建立网页的结构Apr 14, 2025 am 12:14 AMHTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
PhpStorm Mac 版本
最新（2018.2.1 ）专业的PHP集成开发工具
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
