DIV+CSS响应式布局介绍
响应式布局这件小事
::
2012-11-1211:05[小大]来源:https://www.wendangku.net/doc/fd12138072.html,
讲到响应式布局，相信大家都有一定的了解，响应式布局是今年很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果，设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事，包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计（通过CSS3 Media Query实现响应布局）。
一、什么是响应式布局？
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
二、响应式布局有哪些优点和缺点？
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
三、响应式布局该怎么设计？
我们在上面了解了什么是响应式布局，那在我们的实际项目中应该怎么去设计呢？在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰，现在还要来个不同尺寸设备，我们该怎么淡定下来呢？有需求就会有解决方案，呵呵，说到响应式布局，就不得不提起CSS3中的Media Query（媒介查询），这可是个好东西，易用、强大、快捷……Media Query 是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。接下来就一起来深入的了解Media Query。
1、CSS中的Media Query（媒介查询）是什么？
通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。
2、media query能够获取哪些值？
设备的宽和高device-width，device-heigth显示屏幕/触觉设备。
渲染窗口的宽和高width，heigth显示屏幕/触觉设备。
设备的手持方向，横向还是竖向orientation（portrait|lanscape）和打印机等。
画面比例aspect-ratio点阵打印机等。
设备比例device-aspect-ratio-点阵打印机等。
对象颜色或颜色列表color，color-index显示屏幕。
设备的分辨率resolution。
3、语法结构及用法
@media设备名only（选取条件）not（选取条件）and（设备选取条件），设备二{sRules}
示例一：在link中使用@media：
上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。
示例二：在样式表中内嵌@media：
@media（min-device-width:1024px）and（max-width:989px），screen and （max-device-width:480px），（max-device-width:480px）and（orientation:landscape），（min-device-width:480px）and（max-device-width:1024px）and（orientation:portrait）{srules}
在示例二中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。
从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，srules为兼容设置的样式表，包含在中括号里面。only（限定某种设备，可省略），and（逻辑与），not （排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。
4、可用设备名参数：
5、逻辑关键字：
6、可用设备名参数：
7、测试Media Queries
最后，我们需要对我们刚刚设计的Media Queries进行测试，想要在不同设备上测试Media Queries的效果，可以使用一个浏览工具来检验不同尺寸屏幕下的显示效果，在这里为大家介绍一个不错的在线工具–Responsivator，它可以模拟iPhone等各种不同设备，并且还可以自定义不同尺寸屏幕的显示效果，只需要输入一个url甚至是本地的一个url（如：http://127.0.0.1/），就可以看到网站在不同尺寸屏幕下的显示效果。
8、通过Media Queries实现响应式布局设计
好了，我们明白了什么是Media Query，那我们一起来运用到响应式布局的设计项目中去。设计思路很简单，首先先定义在标准浏览器下的固定宽度（假如标准浏览器的分辨率为1024px，那么我们设置宽为980px），然后用Media Query来监测浏览器的尺寸变化，当浏览器的分辨率小于1024px的时候，则通过Media Query预设的样式表来将页面的宽度设置为百分比显示，这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。同理，当浏览器的可视区域改变到某个值（假如为650px）的时候，页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整。看看我们的例子：
/*当浏览器的可视区域小于980px*/
@media screen and（max-width：980px）{
#wrap{width：90%;margin:0auto;}
#content{width：60%;padding：5%;}
#sidebar{width：30%;}
#footer{padding：8%5%;margin-bottom：10px;}
}
/*当浏览器的可视区域小于650px*/
@media screen and（max-width：650px）{
#header{height：auto;}
#searchform{position：absolute;top：5px;right：0;}
#content{width：auto;float：none;margin：20px0;}
#sidebar{width：100%;float：none;margin：0;}
}
通过上面我们就可以监测浏览器的可视区域变化的是时候我们的页面结构元素也会相对应的变化，当然你可以再多设置几个尺寸的监测层叠样式表，这样子就可以根据不同尺寸设备来进行响应式的布局。为了更好的显示效果，我们往往还要格式化一些CSS属性的初始值：
/*禁用iPhone中Safari的字号自动调整*/
html{
-webkit-text-size-adjust：none;
}
/*设置HTML5元素为块*/
article，aside，details，figcaption，figure，footer，header，hgroup，menu，nav，section{
display：block;
}
/*设置图片视频等自适应调整*/
img{
max-width：100%;
height：auto;
width：auto\9;/*ie8*/
}
.video embed，.video object，.video iframe{
width：100%;
height：auto;
}
最后要注意的是在页面的头部
之间加上下面这句∶meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。
参数设置∶
width–viewport的宽度
height–viewport的高度
initial-scale–初始的缩放比例
minimum-scale–允许用户缩放到的最小比例
maximum-scale–允许用户缩放到的最大比例
user-scalable–用户是否可以手动缩放
最后对于在IE浏览器中不支持media query的情况，我们可以使用Media Query JavaScript来解决，只需要在页面头部引用css3-mediaqueries.js即可。示例：
<！--［if lt IE9］>
src=“https://www.wendangku.net/doc/fd12138072.html,/svn/trunk/css3-mediaqueries.js”> <！［endif］--> 好了，响应式布局的小事就这么多，如你有好的补充意见或不同的见解，可以联系我，我们一起探讨这件小事…… 实验九 Div+CSS网页布局 一、站点规划 在网页制作中，有许多的术语，例如： HTML、CSS、DIV等等。下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要制作的界面布局简单的构画出来。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图: 根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容： 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在实验DivCSS网页布局
DIV+CSS：网站首页布局实例教程
DIV+CSS：网站首页布局实例教程 第一步：页面布局与规划 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/
├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 第二步：写入整体层结构和CSS 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：
DIV+CSS网页布局技巧实例
DIV+CSS网页布局技巧实例1：设置网页整体居中的代码
DIV+CSS网页布局技巧实例4：使用css缩写 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，css缩写的主要规则如下： 颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如： #000000可以缩写为#000;#336699可以缩写为#369; 注意:在同一个CSS配置节中，不要交错使用全写和缩写的颜色配置，在系统资源极低时，会导致浏览器渲染失败。 盒尺寸 通常有下面四种书写方法: ?property:value1; 表示所有边都是一个值value1； ?property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 ?property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 ?property:value1 value2 value3 value4; 四个值依次表示top,right,bottom, left 方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：margin:1em 0 2em 0.5em;
边框(border) 边框的属性如下： ?border-width:1px; ?border-style:solid; ?border-color:#000; 可以缩写为一句：border:1px solid #000; 语法是border:width style color; 背景(Backgrounds) 背景的属性如下： ?background-color:#f00; ?background-image:url(background.gif); ?background-repeat:no-repeat; ?background-attachment:fixed; ?background-position:0 0; 可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0; 语法是background:color image repeat attachment position; 你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：?color: transparent ?image: none
网页设计基础Div+CSS布局入门教程
网页设计基础：Div+CSS布局入门教程 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML 基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图：
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 以下为引用的内容： DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/
│├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CS S布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： 以下为引用的内容：
DIV+CSS布局大全
目录 div＋css布局入门 (4) XHTML下css+div布局总结 (6) 网页设计DIV+CSS——第1天:选择什么样的DOCTYPE (9) 第一天 (9) 什么是DOCTYPE (10) 我们选择什么样的DOCTYPE (10) 补充 (10) 网页设计DIV+CSS——第2天:什么是名字空间 (10) 网页设计DIV+CSS——第3天:定义语言编码 (11) 网页设计DIV+CSS——第4天:调用样式表 (11) 外部调用样式表 (11) 双表法调用样式表 (12) 网页设计DIV+CSS——第5天:head区的其他设置 (12) 收藏夹小图标 (12) 为搜索引擎准备的内容 (12) 网页设计DIV+CSS——第6天:XHTML代码规范 (12) 1.所有的标记都必须要有一个相应的结束标记 (13) 2.所有标签的元素和属性的名字都必须使用小写 (13) 3.所有的XML标记都必须合理嵌套 (13) 4.所有的属性必须用引号""括起来 (13) 5.把所有<和&特殊符号用编码表示 (13) 6.给所有属性赋一个值 (13) 7.不要在注释内容中使“--” (13) 网页设计DIV+CSS——第7天:CSS入门 (14) 1.基本语法规范 (14) 2.颜色值 (14) 3.定义字体 (14)
5.派生选择器 (14) 6.id选择器 (14) 6.类别选择器 (15) 7.定义链接的样式 (15) 网页设计DIV+CSS——第8天:CSS布局入门 (15) 1.定义DIV (15) 2.CSS2盒模型 (16) 3.辅助图片一律用背景处理 (17) 网页设计DIV+CSS——第9天:第一个CSS布局实例 (17) 1.确定布局 (18) 2.定义body样式 (18) 3.定义主要的div (18) 4.100%自适应高度? (20) 网页设计DIV+CSS——第10天:自适应高度 (20) 网页设计DIV+CSS——第11天:不用表格的菜单 (21) 1.不用表格的菜单(纵向) (21) 2.不用表格的菜单(横向) (22) 网页设计DIV+CSS——第12天:校验及常见错误 (24) 1.XHTML校验 (24) 2.CSS2校验 (25) CSS的十八般技巧 (25) WEB打印实例教程 (30) Div+CSS布局入门教程 (37)
DivCSS布局入门教程相当经典
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图: 根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#H eader {} /*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：
网页设计-页面布局篇(Css+Div)
网页设计-页面布局篇(Css+Div) >>目录<< 第一步：规划网站，本教程将以图示为例构建网站； 第二步：创建html模板及文件目录等； 第三步：将网站分为五个div，网页基本布局的基础； 第四步：网页布局与div浮动等； 第五步：网页主要框架之外的附加结构的布局与表现； 第六步：页面内的基本文本的样式(css)设置； 第七步：网站头部图标与logo部分的设计； 第八步：页脚信息(版权等)的表现设置； 第九步：导航条的制作(较难)； 第十步：解决各种浏览器之间的兼容性(暂不讨论)
第一步：规划网站，本教程将以图示为例构建网站1.规划网站，本教程将以下图为例构建网站。
其基本布局见下图： 主要由五个部分构成： 1.Main Navigation导航条，具有按钮特效。Width: 760px Height: 50px 2.Header网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px 3.Content网站的主要内容。Width: 480px Height: Changes depending on content 4.Sidebar边框，一些附加信息。Width: 280px Height: Changes depending on 5.Footer网站底栏，包含版权信息等。Width: 760px Height: 66px 第二步：创建html模板及文件目录等 1.创建html模板。代码如下：
实验四--Div+CSS网页布局
实验四 Div+CSS网页布局 一、站点规划 在网页制作中，有许多的术语，例如： HTML、CSS、DIV等等。下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要制作的界面布局简单的构画出来。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容： 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在
标签对中写入DIV的基本结构，代码如下：DIV+CSS常用的Html网页布局代码
单行一列 以下是引用片段： body { margin: 0px; padding: 0px; text-align: center; } #content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 两行一列 以下是引用片段： body { margin: 0px; padding: 0px; text-align: center;} #content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;} #content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;} 三行一列 以下是引用片段： body { margin: 0px; padding: 0px; text-align: center; } #content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } #content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } #content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 单行两列 以下是引用片段： #bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; } #bodycenter #dv1 {float: left;width: 280px;} #bodycenter #dv2 {float: right;width: 410px;} 两行两列 以下是引用片段： #header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;} #bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } #bodycenter #dv1 { float: left; width: 280px;} #bodycenter #dv2 { float: right;width: 410px;} 三行两列 以下是引用片段： #header{ width: 700px;margin-right: auto; margin-left: auto; } #bodycenter {width: 700px; margin-right: auto; margin-left: auto; } #bodycenter #dv1 { float: left;width: 280px;} #bodycenter #dv2 { float: right; width: 410px;} #footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } 单行三列 绝对定位
表格与DIV+CSS的布局设计分析
表格与DIV+CSS的布局设计分析 摘要：网页的布局是给浏览者的第一印象，往往决定着网站的可看性。在网页中应用不同的布局技术所能呈现的效果也不尽相同，它们各有其自己的优点，使用表格进行布局是传统的网页布局显示技术，仍是现在最常见的网页制作方法，而div+css布局是一种新的排版布局理念，可以使页面载入得更快，修改设计时更有效率而代价更低。 关键词：网页布局表格 div+css 中图分类号：tp393.092 文献标识码：a 文章编号：1007-9416(2011)12-0191-01 随着互联网应用的日渐普遍，网络应用进入了人们生活的多个层面，进而人们对网站需求的增大，市场对网页制作人员的需求也大大增加。对于一个网站来说,要要给用户带来好的享受，就必须提高网页布局设计的美观度。网页就好比一张图纸，通过排版布局之间的对比才凸显它的美，网页布局的效果直接影响到网页设计的质量。目前常见的网页布局技术有表格技术和div+css技术。 1、表格布局技术 1.1 表格布局技术的特点 表格是网页的一个非常重要的元素，表格主要由行、列和单元格组成。在使用表格布局时，设计者一般会先根据页面版式的设计需要将整个网页以水平切割的方式分解成多张独立的表格，而表格的行、列数则由该表格中所包含的版块数目来决定。对于复杂的版块，
还必须在里面插入嵌套表格来完成。 1.2 表格布局技术的优势 对于初学者来说，表格可能是最好的布局方式，容易上手。表格布局能对不同对象加以处理，而又不用担心不同对象之间的影响；而且表格在定位图片和文本上比起用css更加方便。网上绝大部分的页面都是使用表格来美化的，因为表格有很好的兼容性，可被绝大部分的浏览器所支持，而且使用表格会使页面结构清晰、布局整齐。 1.3 表格布局技术的缺陷 使用table布局会生产很多冗余代码，会影响浏览速度以及占用过多服务器空间。而且，表格结构单一，难以体现出层次感，无法将设计的美感流畅地通过网页表现出来。 2、div+css布局技术 2.1 div+css布局技术介绍 div+css的布局技术其实涉及到了网页的两个重要组成部分：结构和表现。比如，在一个网页中，其内容可以包含很多，如各种级别的标题、正文段落、图片等，通过div，我们可以将网页中的这些内容元素放置到各个div中，构成网页的“结构”；然后，我们再根据页面的设计需要运用css样式表文件设置其中的文字、图片和列表等元素的“表现”效果。 在div+css的布局技术中，设计者运用html来确定网页的结构和内容，而用css来控制网页中内容的表现形式，很好地实现了内容与形式的分离。
Div+CSS基础代码网页布局+实例教程
Div+css 一，什么是CSS CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。 二．DIV+CSS 简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。首先认识DIV 是用于搭建html网页结构（框架）标签，像、、等html标签一样，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。 表格 以前html直接设置高度width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。 例子：
分别设置了高度为100px和50px的两行表格 DIV的布局方法 CSS 代码 .yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;} Html body内代码： 我的高度为100px 我高度为50px
DIV+CSS布局
Css 样式表
1.1、html 标签
静态结构 ＜html＞ ＜head＞ ＜title＞标题＜title＞ ＜/head＞ ＜body＞..........文件内容.......... ＜/body＞ ＜/html＞ 1.文件标题 ＜title＞..........＜/title＞ 2.文件更新--＜meta＞ 【1】10 秒后自动更新一次 ＜meta http-equiv="refresh" content=10＞ 【2】10 秒後自动连结到另一文件 ＜meta http-equiv="refresh" content="10；URL=欲连结文件之 URL"＞ 3.查询用表单--＜isindex> 若欲设定查询栏位前的提示文字： ＜isindex prompt="提示文字"＞ 4.预设的基准路径--＜base> ＜base href="放置文件的主机之 URL"＞
用于分割内容 换行
html 样式
DIV+CSS最常用的网页布局代码
div css布局不同于table布局，它主要是按列来计算，而table是嵌套实现。这里列举了最常见的 几种布局代码： 单行一列 以下是引用片段： body { margin:0px; padding:0px; text-align:center; } #content { margin-left:auto; margin-right:auto; width:400px; width:370px; } 两行一列 以下是引用片段： body { margin:0px; padding:0px; text-align:center;} #content-top{ margin-left:auto; margin-right:auto; width:400px; width:370px;} #content-end {margin-left:auto; margin-right:auto; width:400px; width:370px;} 三行一列 以下是引用片段： body { margin:0px; padding:0px; text-align:center; } #content-top{ margin-left:auto; margin-right:auto; width:400px; width:370px; } #content-mid{ margin-left:auto; margin-right:auto; width:400px; width:370px; } #content-end{ margin-left:auto; margin-right:auto; width:400px; width:370px; } 单行两列 以下是引用片段： #bodycenter { width:700px;margin-right:auto; margin-left:auto;overflow: auto; } #bodycenter#dv1 {float:left;width:280px;} #bodycenter#dv2 {float:right;width:410px;} 两行两列 以下是引用片段： #header{ width:700px; margin-right:auto;margin-left:auto; overflow:auto;} #bodycenter { width:700px; margin-right:auto; margin-left:auto; overflow: auto; } #bodycenter#dv1 { float:left; width:280px;} #bodycenter#dv2 { float:right;width:410px;} 三行两列 以下是引用片段： #header{ width:700px;margin-right:auto; margin-left:auto; } #bodycenter {width:700px; margin-right:auto; margin-left:auto; } #bodycenter#dv1 { float:left;width:280px;} #bodycenter#dv2 { float:right; width:410px;} #footer{ width:700px; margin-right:auto; margin-left:auto; overflow:auto; }
DIV+CSS网页设计常用布局代码
单行一列 body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;width:400px;width:370px;} 两行一列 body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;} #content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;} 三行一列 body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;} #content-mid{margin-left:auto;margin-right:auto;width:400px;width:370px;} #content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;} 单行两列 #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} #bodycenter#dv1{float:left;width:280px;} #bodycenter#dv2{float:right;width:410px;} 两行两列 #header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} #bodycenter#dv1{float:left;width:280px;} #bodycenter#dv2{float:right;width:410px;} 三行两列 #header{width:700px;margin-right:auto;margin-left:auto;} #bodycenter{width:700px;margin-right:auto;margin-left:auto;} #bodycenter#dv1{float:left;width:280px;} #bodycenter#dv2{float:right;width:410px;} #footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} //https://www.wendangku.net/doc/fd12138072.html, 单行三列绝对定位
Div+CSS布局示例
实训六Div+CSS布局示例 主要内容： 本周需要完成的任务：根据前几周的设计， 各组创建自己的站点文件夹，并把站点内文件夹结构创建好，搜集相关素材； 使用Div+CSS实现网页框架。 参考图： 操作部分：Div标签及盒子模型 提示：请务必做好准备工作。 在硬盘上创建一个自己的文件夹，专门存放网页素材和制作的网页。如在E:/盘创建一个“myweb“文件夹。 将从FTP上下载下来的”images”文件夹（专门存放图片），存放在自己的“myweb” 文件夹内，以备制作网页时使用。 将从FTP上下载下来的 test.html 文件，存放在自己的“myweb”文件夹内，这是一个网页HTML代码的标准模版。 将 test.html 复制一份，重命名之后以记事本的方式打开，开始编辑代码。 1.在上一节制作的网页的基础上，继续修改，使三个盒子都能居中显示。
保存后测试。 2.会发现得到如下结果：
原因：#red和#blue都被添加了float:left;属性,而#green没有float属性。 结论：margin:0 auto;这种居中对齐方法，对于有浮动属性的div不起作用。 解决办法：将显示在同一行的、需要浮动的盒子，用一个大盒子套起来，这个大盒子不必浮动，也就能使margin:0 auto;这种居中对齐方法有效。 然后修改CSS文件： 注意：HTML文件和CSS文件都保存，测试。
知识链接： 使用CSS实现居中的方法： Margin:0 auto; 注：此方法不适用与具有浮动（float）属性的Div。 Div+CSS应用示例 以如下网页为例，分步讲解： 1.首先，确定网页布局，先横向划分大盒子，划分结果如下：
div,css布局模板
竭诚为您提供优质文档/双击可除 div,css布局模板 篇一：div+css布局例子 div+css布局入门教程 |20xx-6-1810:34:00 一、页面布局与规划 在网页制作中，有许多的术语，例如：css、html、dhtml、xhtml等等。在下面的文章中我们将会用到一些有关于html 的基本知识，而在你 学习这篇入门教程之前，请确定你已经具有了一定的html基础。下面我们就开始一步一步使用diV+css进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用photoshop或Fireworks(以下简称ps或Fw)等图片处理软件将需要制作的界面布 局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了logo、menu和一幅banner 图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图： 根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 diV结构如下：│body{}/*这是一个html元素，具体我就不说明了*/└#container{}/*页面层容器*/├ #header{}/*页面头部*/├#pagebody{}/*页面主体*/ │├#sidebar{}/*侧边栏*/ │└#mainbody{}/*主体内容*/ └#Footer{}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写html代码和css。 二、写入整体层结构与css 接下来我们在桌面新建一个文件夹，命名为“diV+css 布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：
Div+CSS布局入门教程(全套)
Div+CSS布局入门教程（全套） 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： 无标题文档 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在标签对中写入DIV的基本结构，代码如下：
- 实验四--Div+CSS网页布局
- DIV+CSS布局
- DIV+CSS：网站首页布局实例教程
- DIV+CSS：网站首页布局实例教程
- DivCSS布局入门教程相当经典
- 表格与DIV+CSS的布局设计分析
- DIV+CSS网页设计常用布局代码
- DIV+CSS网页布局技巧实例
- 2018网页设计与制作教程(div+css布局技术)
- divcss布局教程精品PPT课件
- div,css布局模板
- 实验DivCSS网页布局
- DIV+CSS布局大全
- DIV+CSS常用的Html网页布局代码
- DIV+CSS三种经典布局教案
- 超级牛最详细的Div+CSS布局案例
- Dreamweaverdiv+css网页标准布局实例
- CSS+DIV排版布局
- DIV CSS布局快速入门.ppt
- 超级牛最详细的Div+CSS布局案例教学教材