div + css布局

1.引入

我们之前学习了两种排版，分别是表格布局和流式布局，那么我们发现这俩中排版都有自己的局限性，那么下面呢，我们就一起来学习一个比较重要的布局css+div布局。这一种布局方式是基于盒子模型的一种布局方式，在实际的开发中使用的比较多。

2.div+css布局

css+div布局是一种重要的布局方式，可以按照不同的排版方式实现不同效果的页面布局。

3.div+css布局

(1).简单的上中下结构布局

<style type="text/css">body{font-size: 25px;font-family: "宋体";color: #0000ff;text-align: center;}.containner{margin: 0 auto;height: 900px;width: 1200px;padding: 10px;background-color: #bfbfbf;}.containner .head{height: 180px;background-color: #00AA00;margin-bottom: 10px;}.containner .content{height: 600px;background-color: #b90000;margin-bottom: 10px;}.containner .foot{height: 100px;background-color: #55ff00;margin-bottom: 10px;}</style>
<div class="containner"><div class="head">这是头部</div><div class="content">这是内容</div><div class="foot">这是底部</div>
</div>

(2).简单的上左中(窄)右宽(宽)下结构布局

<style type="text/css">body{font-size: 25px;font-family: "宋体";color: #0000ff;text-align: center;}.containner{margin: 0 auto;height: 900px;width: 1200px;padding: 10px;background-color: #bfbfbf;}.containner .head{height: 180px;background-color: #00AA00;margin-bottom: 10px;}.containner .content{height: 600px;margin-bottom: 10px;}.content-left{float: left;height: 600px;width: 300px;background-color: #b90000;margin-bottom: 10px;}.containner .content .content-right{float: right;height: 600px;width: 890px;background-color: #ff5500;margin-bottom: 10px;}.containner .foot{height: 100px;background-color: #55ff00;margin-bottom: 10px;}
</style><body><div class="containner"><div class="head">这是头部</div><div class="content"><div class="content-left">导航</div><div class="content-right">详细内容</div></div><div class="foot">这是底部</div></div>
</body>

(3).简单的上中(左中右)下结构布局

<style type="text/css">body{font-size: 25px;font-family: "宋体";color: #0000ff;text-align: center;}.containner{margin: 0 auto;height: 900px;width: 1200px;padding: 10px;background-color: #bfbfbf;}.containner .head{height: 180px;background-color: #00AA00;margin-bottom: 10px;}.containner .content{height: 600px;margin-bottom: 10px;}.content-left{float: left;height: 600px;width: 300px;background-color: #b90000;margin-bottom: 10px;}.content-center{float: left;height: 600px;width: 590px;background-color: #4c7300;margin-bottom: 10px;margin-left: 10px;}.content-right{float: right;height: 600px;width: 290px;background-color: #ff5500;margin-bottom: 10px;margin-left: 10px;}.containner .foot{height: 100px;background-color: #55ff00;margin-bottom: 10px;}
</style>
<body><div class="containner"><div class="head">这是头部</div><div class="content"><div class="content-left">内容左</div><div class="content-center">内容中</div><div class="content-right">内容右</div></div><div class="foot">这是底部</div></div>
</body>

上述给出的是几种常见的div布局，我们还可以根据客户的需求设计出更多的按照实际要求的内容，但是无论如何设计，我们只要抓住一点就是使用块级结构div产生的盒子进行页面内容的布局即可完成。

前端开发_HTML5_布局-div+css布局相关推荐

【web前端开发】介绍div+css的6个优点
2019独角兽企业重金招聘Python工程师标准>>> 关于div+css你知道多少?XHTML网站设计标准中,不再使用表格定位技术,而是采用div+css的方式实现各种定位.一般来 ...
html div套div,Web前端开发技术之Div+Css基础
今天我们的课程内容有: CSS在页面风格设计中的作用多个HTML页面调用一个CSS文件 DIV的创建与应用用DIV+CSS的方式来写HTML页面传统HTML的缺点和现在Css的优势Html的不足 ...
DIV+CSS布局心得
DIV+CSS布局心得文章目录 DIV+CSS布局心得 1,清空所有原有样式随时对HTML和CSS进行注释 2,分析页面布局 DIV+CSS布局页面页面常用HTML标签 CSS常用选择器 CSS ...
网页设计（二）——DIV+CSS布局1
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
不会前端也可以看得懂的3种DIV+CSS布局技术
网页布局(layout)是CSS的一个重点应用. 很多想入门前端的小伙伴一直在反馈,要怎么入门 css 呢,其实 css 布局也就那么几种我们需要有全局思维我们可能无法一下子就很细致地还原页面的每 ...
DIV+CSS布局基本流程及实例介绍
都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称.DIV+CS ...
城市智慧路灯综合管理平台、图监控、灯箱实时监控、策略管理、故障报警、灯具管理、数据统计、故障分析、开关灯记录分析、区域管理、分组管理、DIV+CSS布局设计、HTML/Bootstrp/jQuery
源码类别: 后台模板文件大小: 21.5 MB 源码内容:城市智慧路灯综合管理平台后台模板前端技术: HTML/CSS/Bootstrap/jQuery 模板语言: 简体中文 ...
总结2019大前端开发十大战略性技术布局
2010年,如果你能学会Android开发到目前,你的薪资不会低于年薪50万 2015年,如果你能熟练使用react到目前,你的薪资不会低于月薪30K-- 看到这两个数据,也许有人会说,首先技术刚出来 ...
决胜未来，2019年前端开发十大战略性技术布局 1
2010年的你,如果能学会Android开发,现在的你,薪资不会低于年薪50万-- 2015年的你,如果能熟练使用react,现在的你,薪资不会低于月薪30K-- 看到这两个数据,也许有人会反驳:技术 ...
决胜未来，2019前端开发十大战略性技术布局
2010年的你,如果能学会Android开发,现在的你,薪资不会低于年薪50万-- 2015年的你,如果能熟练使用react,现在的你,薪资不会低于月薪30K-- 看到这两个数据,也许有人会反驳:技术 ...

前端开发_HTML5_布局-div+css布局

div + css布局

前端开发_HTML5_布局-div+css布局相关推荐

最新文章

热门文章