- 1 -
关于DIV布局的技巧
二、DIV+CSS 网页布局的分类
1、一列固定宽度一列布局是所有布局的基础，也是最简单的布局方式，用 DIV+CSS 布局的代码如下：
XHTML 代码：
一列固定宽度
CSS 代码： #main1 { width: 400px; height: 300px; background- color: #EEEEEE; border: 1px
solid #999999; }
2、一列自适应宽度自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值，是网页设计中一种非常灵活的布局形式，用 DIV+CSS 布局的代码如下： XHTML 代码：
一列自适应宽度
CSS 代码： #main2 { width: 70%; height: 300px; background- color: #EEEEEE; border: 1px
solid #999999; }
3、一列固定宽度居中页面整体居中是网页布局中最常见到形式，在传统的表格布局中，使用TABLE 的align="center" 属性来实现，在DIV+CSS 布局中采用如下代码来实现：
XHTML 代码：
一列自适应宽度
CSS 代码： DIV+CSS 网页布局方法探析。如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利，传统的TABLE 网页布局由于其庞大的HTML 代码，使得其在搜索引擎方面显得有些无能为力，而用DIV+CSS 进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。但是又由于CSS 对不同浏览器存在兼容性问题，所以对于初学者来说，在使用DIV+CSS 进行网页布局过程中可能会遇到各种问题，本文就给大家探讨几点DIV+CSS 布局的技巧。
4、二列固定宽度在有一列固定宽度布局的基础上，实现二列固定宽度也就很简单了，用DIV+CSS 布局的代码如下：
XHTML 代码：
实例解析：使用DIV CSS网页布局实现Google首页
DIV CSS网页布局有很多值得我们学习的地方，本文向大家介绍一下如何使用DIV CSS网页布局实现Google首页，希望你会感兴趣。
本文和大家重点讨论一下用DIV CSS网页布局之Google首页实现，Google首页一直是用table布局的。我们把Google首页用PrtScr截屏，作为制作时的设计稿参考，并且不打开Google首页查看其源代码——就当它不存在。这样和真实项目工作比较接近。
用DIV CSS网页布局之Google首页实现
今天我们来学习用Web标准的方法来制作Google首页（中文）。Google首页一直是用table布局的。我们把Google首页用PrtScr截屏，作为制作时的设计稿参考，并且不打开Google首页查看其源代码——就当它不存在。这样和真实项目工作比较接近。
第一部分、DIV CSS网页布局之HTML的构建（基于XHTMLTransitional）
从设计稿上看到的内容，去揣摩结构。因为整个页面内容较少，容易理解，但也碰到了我们的第一个问题：是用
标签还是
？各自代表着paragraph和division，原则上说，这个页面上没有任何的段落存在，所以不应该用
。但这里涉及到一个问题，抛开样式表显示的话，用
更加的清晰，因为默认
的margin和padding值都为零。好吧，用
还是用
是一个个人喜好问题，但是原则上应当用后者。在本例中也使用后者。开始找个称手的编辑器写HTML：
1.
2.
3. a>|我的帐户
span>a>|退出a>div>
4.
然后我们看到中间有“网页图片资讯论坛更多»”这些链接。怎么做？一般就两种写法，看个人喜好。把这几个链接写一行里面或者写在一个ul里面，如下：
5.
span>a>
6.
7. 资讯a>论坛a>
8.
9. 更多»strong>a>div>
科学技术创新
1div+css布局的优势1.1与表格布局比较遥css+div布局在网站开发中已经被应用很多年了袁占据了相当大的主导地位遥div是HTML里的一种标签
作者简介院楚孟慧渊2000袁01袁03-冤袁女袁籍贯院山东济宁袁现于山东科技大学攻读学士学位袁目前主要从事于计算机科学与技术相关专业研究遥86--2021.09科学技术创新头部
图3底部清除浮动当大小不一致的div元素排列在同一行袁不能完全显示的div会自动换行袁并在下一行的开头显示袁如图4遥
图4底部换行显示在css中加入float院left使得三个div层全部左移形成水平排列的效果遥css样式表中的高度和宽度大小相同遥3.3定位布局3.3.1静态定位遥position院static如果代码中不写position属性相当于写上了position院static袁元素在它原本的位置显示袁即使增加top尧left等属性也不起作用遥3.3.2相对定位与绝对定位遥相对定位院podition院relative是相对于原来位置进行上下左右的移动袁且原来位置仍被占位遥绝对定位position院absolute是相对于网页左上角0点来说袁配合top尧left尧right尧bottom来进行定位遥若位于父层元素的下一层元素则是相对于父层元素来定位袁前提是父层元素已经定位遥当父层元素定位为绝对定位袁子层元素相对于最近的父层元素发生改变遥当Grandfather层定位袁fatehr层进行想对移动之后袁son层相对于已经定位的father层进行移动袁如图5所示遥
图5绝对定位解析院首先Grandfather层div设置position院absolute袁此时Father层的最近父层则为Grandfather层袁于是Father层相对于Grandfather层偏移遥Father层设置为position院absolute之后Son层可以相对于Father层进行偏移遥4结论综上所述袁css+div布局结构存在着优势同时又存在着劣势遥但div+css布局能够成为主流主要是由于css与div将样式与布局分离袁避免改变样式时需要大量的修改代码遥所以对于新手设计师来说需要将div+css结构掌握之后再进行网页设计袁尽量避免定位不准确的问题袁掌握三种常用的布局方式对设计网页有极大帮助遥参考文献[1]刘坤彪,程旭东,陈铭.基于CSS的标准网页布局设计[J].南阳理工学院学报,2012,4(06):23-28.[2]谢振华.Div+css网页布局设计实现[J].中小企业管理与科技(中旬刊),2016(04):151-152.[3]韦春暖.网页布局设计技术问题探究[J].数字通信世界,2018(09):95.[4]郑宁宁.浅析DIV+CSS网页设计技术[J].山东省农业管理干部学院学报,2008,24(06):169-170.[5]张伟娜,王海波.DIV+CSS网页设计初探[J].电脑知识与技术,2013,9(03):607-611.[6]黄雄平.基于Dreamweaver的DIV+CSS网页设计初步研究[J].电脑知识与技术
Div+CSS布局入门教程
页面布局与计划
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中咱们将会用到一些有关于HTML的大体知识，而在你学习这篇入门教程之前，请确信你已经具有了必然的HTML基础。下面咱们就开始一步一步利用DIV+CSS进行网页布局设计吧。
所有的设计第一步确实是构思，构思好了，一样来讲还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处置软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。
下面，咱们需要依照构思图来计划一下页面的布局，认真分析一下该图，咱们不难发觉，图片大致分为以下几个部份：
一、顶部部份，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
依照上图，我再画了一个实际的页面布局图，说明一基层的嵌套关系，如此明白得起来就会更简单了。
DIV结构如下：
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/ ├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此，页面布局与计划已经完成，接下来咱们要做的确实是开始书写HTML代码和CSS。
写入整体层结构与CSS
接下来咱们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：
若是id="divID"那个层中包括了一个，那么那个img在CSS中对应的设置语法应该是#divID img {}，一样，若是是包括在class="divID"那个层中时，那么设置语法应该是.divID
