文档库 最新最全的文档下载
当前位置:文档库 › 根本不存在DIV+CSS布局这回事

根本不存在DIV+CSS布局这回事

根本不存在DIV+CSS布局这回事
根本不存在DIV+CSS布局这回事

根本不存在DIV+CSS布局这回事

星狮创想肖坤前2013-02-01

在《欲练CSS ,必先宫IE》和《你有

强迫症吗?》这两篇文章中,看到有不少评论用到div+CSS 布局这个说法,用来和table布局比较。实际上div不是用来布局的,div只是用来表示一个其它元素都无法准确表达语意的一个块区,只有CSS是用于布局的,所以根本就不存在div+CSS布局这回事。反过来,table布局的时候经常依赖于CSS定义一个单元格的布局属性,所以可以说是table+CSS布局。也就是说,我们讨论的两种主流布局方法应该是纯CSS布局和table+CSS布局,如果你觉得你在用的是div+CSS布局,那么有可能你也有强迫症了。

接下来我们说说如何进行纯CSS布局,因为CSS布局依赖于XHTML,所以我们先要说说如何书写一个CSS无关的XHTML。其实书写CSS无关的XHTML并不难,虽然你不能再好像书写table布局代码那样集中精力于最重的视觉效果上,但其难度也不过是中学生写作文那样。

中学生写作文如何写呢?首先看看题目,然后想想整篇文章分为哪几个大的段落,每个大的段落说些什么,能够把你要说的东西说清楚。对于XHTML来说,这相当于用div把文档切割为几大块。这时候你不要想着这些div将构建一个怎样的DOM啊、CSS如何选择DOM中元素设置规则实现布局之类的事情,就大概划分一下文档的大区域就好了。

然后当然是用一些常用的手法来表现感情或者论证问题,这在XHTML中就是用特定的元素来完成一些常见的信息组织。下面就是信息组织形式与元素的对应列表。

img

作为内容的图片是一定要放到img里面的,这没有更好的选择了。然而如果图片不是作为内容,而是作为修饰性的,则千万不要用img。对于非内容的图片,应该在CSS中引用,而不在XHTML中出现。例如每一个导航链接有一个前导的箭头指示,那么这些箭头就应该通过CSS的background-image属性加上去,而不是直接作为img出现。

a

这也是一个非常准确定义的元素,链接都需要使用它。或许已经有很多人忘记了a的本意是锚点,其实这是一个十分有用的语义,你可以用它来标记文档中一些重要的引用位置。

ul, ol

ul和ol分别是什么意思呢?如果你回答不上来,却知道它们可以用来干什么,那证明你是被可视化工具宠坏了,要转换过来编写符合语义的XHTML需要先补充基础知识,这时候你最好先找一些看起来非常基础非常全面的XHTML书籍看看,因为没有扎实的基础你在上面构建更多的知识都是不牢固的。ul和ol其实分别代表unordered list和ordered list,也就是无序列表和有序列表。在语义上,它们都用于表示一类并列关系的内容,例如我们去商店购物之前列一张shopping list,上面要买的东西就是并列关系,在中文可以用顿号隔开那种。它们的差别在于是否有顺序,例如shopping list是没顺序的,先买什么后买什么是没关系的,但是一份旅游行程安排上面的景点列表却是有游览的先后顺序的。

ul常用于导航栏,因为导航元素符合上面所说的并列关系,树状导航结构还可以通过嵌套ul来表述。在这里,导航可以是我们常见的水平或竖直导航栏,甚至可以是地图导航,例如在中国地图上不同的省份热区其实是不同的li。如果我说,在主流浏览器上用户看到了中国地图和可以直接点击省份热区,在不支持CSS 的浏览器上用户能看到一份纯文本的省份名称列表,使用的是同一份XHTML,而这完全通过CSS实现,甚至不依赖于JavaScript,你相信吗?

另外,如果你要显示一个图库的缩略图,这些图片也可以放在ul中哦,因为这些图片也是并列关系。它们可以自动先横排,排满一行就自动排第二行,CSS可以让他们乖乖排队,而不需好像table那样把图片定死在一个格子里。其实table用于布局就如同用监狱关押内容一样,把内容锁死在一个格子里不让它到处

乱跑;符合语义的XHTML就如同一个开放的舞台,你只要懂得利用CSS的规则,内容就自然会找一个适合表现自己的地方站着。

dl

没有听说过dl吗?因为那些可视化工具生成的代码中从来不会出现dl?dl的意思是definition list,也就是定义列表。它包含的子元素不是li,而是dt和dd,也就是definition term和definition description。dl本身设计为字典单词与解释列表这样的语义,例如:

Apple

苹果

Boy

男孩

然而,如果你需要表示的的语义也是类似的,一个列表既包含定义也包含解释,那么也可以考虑用dl。form, input

form也就是表单啦,这没什么好说的,就算再不顾及语义的人在书写XHTML时也会考虑到它与各种input 对提交数据的影响,从而小心谨慎。

table

table自然是用来表示表格的,这不废话!如果是数据表,当然可以用table来表示,但如果不是,就最好别用table了。

人名列表呢?例如一个3行4列的人名列表。如果这12个人名是并列关系,我建议你用ul和12个li来表示,再通过CSS来让它们在一行内并列显示多个。名片表呢?也就是3行8列,每两列中左侧一列显示人名右侧一列显示电话地址等联系方式。我觉得dl在一定程度上能满足此需求,dt放人名,dd放联系方式,不过这时候就涉及了dl滥用的争论,因为人名与联系方式当作定义与解释有点牵强。

接下来还有一个关于你是否系统学习过XHTML的小提问,那就是你是否知道table下面的caption、col、colgroup、thead、tbody、tfoot元素及summary属性分别用于定义什么,还有就是你书写table时是否会使用thead、tbody。

div, span

再次审阅上面的列表,如果你需要表示一个块区却无法在上面找到更适合的元素,那么你就可以考虑使用div和span这两个最没有语义的元素了。div与span的区别,历史上的不说了,现在通常大块的区域用div,行内的小文本片段就用span。在上面我已经说了div一般用于全局划分为几个大的区域,所以一般不需要使用了。span其实也很少使用,因为行内的强调通常可以用语义更强的元素例如strong和em。

在理解上上述那么多常用元素后,写一个XHTML就真的如同中学生写作文一样容易啦,还是搭积木那样,其实和以前使用可使化工具搭积木没什么不同,唯一不同是现在你理解了你在搭的是什么,而以前你只在乎搭出你想要的视觉效果来。写代码与写作文所类似的地方,就在于你写得越多就越熟练,也就越能写出好东西来。在写好XHTML后我们就要开始考虑如何写CSS了,或许还需要在XHTML中略作修改以方便CSS中规则的选择与匹配,不过这是以后再说的内容了,今天就说到这里。

实验DivCSS网页布局

实验九 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:网站首页布局实例教程

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布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容: 无标题文档 这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。 下面,我们在标签对中写入DIV的基本结构,代码如下:

[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS 信息,代码如下: /*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

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布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容: 以下为引用的内容: 无标题文档 这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。 下面,我们在标签对中写入DIV的基本结构,代码如下:

[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:

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模板。代码如下: CompanyName - PageName

实验四--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
分别设置了高度为100px和50px的两行表格 DIV的布局方法 CSS 代码 .yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;} Html body内代码:
https://www.wendangku.net/doc/714948083.html,演示,内容 测试内容高度超出演示实例,divcss5实例
完整CSS html最小高度实例代码:

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">

......
列块容器 标题.......... #=1~6;h1 为最大字,h6 为最小字 段落************* 链接…… 图像 注释 平行线
用于分割内容 换行

html 样式 font-family:verdana 字体 color:red 颜色 font-size:10 大小 text-align:center 文本对齐 bgcolor:red 背景颜色 background=”URL”背景图像

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/714948083.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的基本结构,代码如下:

为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS 信息,代码如下: /*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99} /*页面主体*/ #PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00} /*页面底部*/ #Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF} 把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。 关于以上CSS的说明(详细请参考CSS2.0中文手册,网上有下载): 1、请养成良好的注释习惯,这是非常重要的; 2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了; 3、讲解一些常用的CSS代码的含义: font:12px Tahoma; 这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式; margin:0px; 也使用了缩写,完整的应该是:

相关文档