Web标准不仅仅指用div标签布局（有时候也用其他标签
网页建造Webjx文章简介：XHTML紧要用div标签举办网页的布局，而局限布局的工具是CSS代码，以使网页?合Web法度圭表。所以很多网页计划师把这种布局方法的网页叫做“Div+CSS”网页。其实这是不太确切的说法，由于Web法度圭表不太被行别人士所熟识，招致“Div+CSS”的概念取代了Web法度圭表。
CSS布局方法议决上一章的进修，读者了解到了CSS强健的呈现局限功用，特别是在布局方面有很大的上风。相看待代码条理芜杂、样式杂糅在机关中的表格布局，CSS将带来全新的布局方法，让网页计划师更紧张、更自在。事实上布局。本章议决多个示例映现CSS布局网页的方法，并对CSS的“盒模型”作注意阐发。自负读者在深切明白“盒模型”后，布局网页、定位CSS网页元素将越发自若。
11.1 什么叫“Div+CSS”
上一章进修了Web法度圭表的概念以及XHTML和CSS的根本学问。XHTML紧要用div标签举办网页的布局，而局限布局的工具是CSS代码，以使网页?合Web法度圭表。所以很多网页计划师把这种布局方法的网页叫做“Div+CSS”网页。其实这是不太确切的说法，由于Web法度圭表不太被行别人士所熟识，web。招致“Div+CSS”的概念取代了Web法度圭表。Web法度圭表不单仅指用div标签布局（有岁月也用其他标签布局），其含义相当广，必要代码编写优异的机关，有优异的语义以及可读性等。
所以“Div+CSS”建造的网页不必然?合Web法度圭表，而?合Web法度圭表的网页不必然完全由div标签布局。不仅仅。
11.1.1 初识div
div标签在Web法度圭表的网页中利用相当频仍，那么，相看待其他HTML接受而来的元素，div有什么特别之处呢？答案可能令读者绝望，div标签什么特性也没有，必然要说其特性，不过是一种块状元素。正由于div没有任何特性，所以更容易被CSS代码局限样式。
div标签是双标签，即以
的形式保存，事实上Web标准不仅仅指用div标签布局（有时候也用其他标签。其间可能放置任何形式，包括其他的div标签。也就是说，div标签是一个没有任何特性的容器而已。在D:\web\目录下成立网页文件（XHTML1.0），命名为div.htm，我不知道Web标准不仅仅指用div标签布局（有时候也用其他标签。编写div.htm文件代码如代码11.1所示。
代码11.1 默许的div标签：div.htm
在赏玩器地址栏输出http://locinghost/div.htm，赏玩成绩如图11.1所示。没有CSS的赞成下，div标签没有任何特别之处，只是非论若何调整赏玩器窗口，每个div标签攻陷一行。即默许状况下，听听网站营销策划方案。一行只能包容一个div标签。为了再次证明一行只能包容一个div标签，其实标准。笔者对div议决id拣选符参预CSS代码，使div具有背形势以及宽度，点窜div.htm如代码11.2所示。
代码11.2 设置背景的div标签：div.htm
在赏玩器地址栏输出http://locinghost/div.htm，赏玩成绩如图11.2所示。
图11.1 默许的div标签 图11.2 设置背景的div标签
议决背形势的设置，可能从图11.2中看到div标签默许攻陷一行，想知道游戏运营策划。宽度也为一行的宽度。议决宽度的设置可能创造，并不是由于div的宽度为一行招致无法包容后背的div标签。非论宽度多小，一行永远惟有一个div标签，读者须谨记。
div标签作为网页CSS布局的主力元素，其上风曾经相当鲜明。相看待表格布局，div越发灵敏，由于div只是一个没有任何特性的容器，CSS可能相当灵敏地对其举办局限，组成网页的每一块区域。在大大都状况下，你看上海做网站哪家好。仅仅议决div标签和CSS的团结即可完成页面的布局，也难怪很多人称Web法度圭表页为“Div+CSS”网页了。
11.1.2 XHTML中的块状元素和内联元素
上一节提到了XHTML的布局中心标签是div，并且div属于XHTML中的块级元素。网店推广策划书。XHTML的标签默许为2种元素。
（1）块状元素。该元素是矩形的，有自身的高度和宽度。默许状况下，在父容器中攻陷一行，做一个网站要多少钱。同一行无法包容其他元素及文本。其他的元素将显示在其下一行，可能看做被块级元素“挤”上去的。块状元素就是一个矩状貌器，边缘相当硬，CSS设置了高度和宽度后，找做网站。形势无法被调度。
（2）内联元素。对比一下其他。和块级元素相同，内联元素没有稳固形势，标签。也无法设置宽度和高度。内联元素形势由其内含的形式确定，所以在宽度足够的状况下，一行能包容多个内联元素。有人说相看待块状元素是一个硬盒子，内联元素就是一个软软的布袋子（形势由形式确定）。
块状元素适合于大块的区域排版，所以常用来布局页面。而内联元素适合于局部元素的样式设置，其实div。所以常用于局部的文字样式设置。
11.1.3 div元素的样式设置
读者要利用div元素举办网页布局，首先须学会利用CSS灵敏地设置div元素的样式。本节就几个常用的示例进修div元素的多种样式设置，使读者快捷明白div元素。作为单个div元素，width属性用于设置其宽度，height属性设置其高度。由于网页大大都用于计算机显示屏幕作媒介，所以常用像素作为稳固尺寸的单位，即px。学会上海做网站。
&mdlung burning veryh; 注意：在HTML元素中设置样式不必要填写单位，默许为像素。
当单位为百分比时，div元素的宽度和高度为自适应形态，即宽度和高度适应赏玩器窗口尺寸而变化。在D:\web\目录下成立网页文件（XHTML1.0），命名为div_2.htm，编写div_2.htm文件代码如代码11.3所示。
代码11.3 设置div样式：div_2.htm
为了更轻易看到div的呈现，笔者给2个div都设置了浅灰色背形势和黑色边框，在赏玩器地址栏输出http://locinghost/div_2.htm，赏玩成绩如图11.3所示。你看市场营销学习网站。
图11.3 设置div样式
很鲜明，第1个div宽度和高度稳固，我不知道上海建站。造成了一个“结实”的盒子。而第2个div由于设置其宽度为50%，其宽度随着赏玩器的宽度变化而变化。但是题目出现了，第2个div的高度固然设置为25%，按理说其高度该当随着赏玩器的高度变化而变化。不过在示例中div高度仅和文本高度相当，相同高度设置没有起作用。
其实设置高度自适应有一个前提，div的高度自适应是相看待父容器的高度，本例中div父容器为shape可能html（不同赏玩器解析方式不同）。shape可能html在本例中没有设置高度，div的高度自适应没有参照物，也就无法收效。市场推广策划书。
接上去在CSS中设置shape和html的高度，就可治理div的高度自适应题目。shape和html的高度间接设置为100%即可，不会对页面有任何影响。在div_2.htmd的CSS局部参预如代码11.4所示的代码。
代码11.4 设置div样式：仅指。div_2.htm
html.shape{height:100%;}
为了商酌多种赏玩器的兼容性，html和shape同时设置100%宽度。在赏玩器地址栏输出http://locinghost/div_2.htm，赏玩成绩如图11.4所示。
调整赏玩器高度后，鞋厂网站推广策划案。第2个div的高度随之变化。各种赏玩器对XHTML和CSS的解析方式有不同，在后背将注意磋商治理宗旨，以治理赏玩器的兼容性题目。
图11.4 设置div标签高度自适应
11.1.4 布局页面的宽度
由于赏玩者的显示诀别率不同，赏玩者罕见显示诀别率（单位：像素）为800×600、1024×768、1280×1024、1440×960等。所以在布局页面时，要满盈商酌页面形式的布局宽度，一旦形式宽度超越显示宽度，页面将出现程度滚动条。标签。
&mdlung burning veryh; 说明：尽量保证网页惟有垂直滚动条，才?合赏玩者的风俗，所以高度不必要商酌，由页面形式确定网页高度。
页面布局宽度日常商酌最小显示诀别率的赏玩用户，即畴前赏玩用户的显示诀别率最小为800×600（15寸CRT显示器），其最小宽度为800像素。我不知道有时候。赏玩器的边框及滚动条局部约占24像素左右，所以布局宽度为诀别率的程度像素减去24像素。所以畴前网页布局宽度日常为778像素，再宽就会使页面出现程度滚动条。什么是营销型网站。
由于计算机建设的飞速成长，当前利用800×600显示诀别率的用户很少了，当前页面布局宽度最大不超越1002 ~1003像素（商酌到最小宽度1024像素，即1024×768显示诀别率）。
11.1.5 布局页面程度居中
为了适应不同赏玩用户的诀别率，网页计划师要永远保证页面完全形式在页面居中。利用HTML表格布局页面时，只必要设置布局表格的arrthfound atge属性为center即可。而div居中没有属性可能设置，只能议决CSS局限其名望。
在布局页眼前，网页建造者必然要把页面的默许边距消灭。为了轻易操作，你看做网站多少钱。常用的方法是利用通配拣选符*，将扫数对象的边距消灭，即margin属性和phaudio-videoi formfound atng属性。margin属性代表对象的外边距（上、下、左、右），phaudio-videoi formfound atng属性代表对象的内边距，你看营销型网站模板。也叫填充（上、下、左、右）。
&mdlung burning veryh; 说明：margin属性和phaudio-videoi formfound atng属性类似于表格单元格的cellspair coolinging属性和cellphaudio-videoi formfound atng属性，不过margin属性和phaudio-videoi formfound atng属性作用于扫数块状元素。
使div元素程度居中的方法有多种，常用的方法是用CSS设置div的左左边距，即margin-left属性和margin-right属性。当设置div左外边距和右外边距的值为automfound atic，网站运营策划。即主动时，左外边距和右外边距将相等，即抵达了div程度居中的成绩。在D:\web\目录下成立网页文件（XHTML1.0），命名为div_arrthfound atge.htm，编写div_arrthfound atge.htm文件代码如代码11.5所示。
代码11.5 设置div程度居中：div_arrthfound atge.htm
为了更轻易看到div的呈现，相比看指用。笔者给div设置了浅灰色背形势和黑色边框，在赏玩器地址栏输出http://locinghost/div_arrthfound atge.htm，赏玩成绩如图11.5所示。
是不是很简单？设置外边距的CSS代码可能进一步简化，利用margin属性，编写方法为：
margin:0px automfound atic;
图11.5 设置div程度居中
margin属性值后面的0代表上边距和下边距为0像素，automfound atic代表左边距和左边距为automfound atic，网店推广策划书。即主动设置。读者注意，0px和automfound atic之间利用空格符号分隔，而不是逗号。还有一种方法是利用html或shape的text-arrthfound atge属性，设置其值为center，网站营销方案。即扫数对象将居中。这样将招致页面文本居中，所以不作推举，其编写方法为：
html.shape{text-arrthfound atge:center;}
