通常定位>标签属性或引用CSS样式来实现DIV标签定义块可以嵌套复杂的页面布局,因此,这为网页布局提供了有利技术支持另外,在所构成的块中,可以放置文字图像和表格等各种网页元素,方便对网页进行设计。
2、CSS技术CSS是英语CascadingStyleSheets(层叠样式表)的缩写,它是一种用来表现HTML或XML等文件样式的标记性语言,用于网页的排版和风格设计,可以弥补HTML的不足,使Web变得更丰富。在使用表格布局时,也曾接触和应用到CSS。CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。它的基本语法为:选择器(selector){属性(property):值(value)}。选择器通常是需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性是希望设置的样式属性(styleattribute),每个属性有一个值,属性和值被冒号分开。如果要定义多个声明,则需要用分号将每个声明分开。
4.5DIV+CSS布局方法
1、DIV+CSS盒模型盒模型将页面中的每个元素看做一个矩形框,这个框由元素的内容内边距(padding)边框(border)和外边距(margin)组成网页就是由许多个盒子通过不同的排列方式(纵向排列横向排列和嵌套排列)堆积而成。
图4.1CSS盒子模型
2、DIV+CSS定位。定位是通过实现位置属性的值的最重要的技术页面布局,CSS定位,属性值有以下4种,即:staticrelativeabsolutefixed
Static:静态定位:;默认值没有特殊的定位,定位对象遵循HTML规则,按照这个时间显示在页面上框的总体布局。
Relative:相对定位:使用该属性值框中仍然是常见的布局,占据其位置,在定位的计算,只能通过left,right,top,bottom等属性,使得相对于箱子到原来的起点显示举动。
Absolute:绝对定位:相对于与位置属性最接近母块绝对定位盒位置将是,如果尚未定位的父块,则相对于body对象,即浏览器窗口绝对定位的元素抛开了文档排列布局,相当于游离于文档页面之上,所以各对象会相互覆盖,而其层叠顺序可由z-index属性改变。
fixed:固定的位置:类似于绝对的,但它仅仅是相对于浏览器窗口中的浏览器定位和固定到一个位置,不与滚动条滚动和滚动。
3.根据上述浮动框定位模式,盒子并未出文档的控制流,排列,而仍在非常与使用一个浮箱技术的限制使盒从文档的向左侧流动或右,和多样化的安排,布置灵活浮动元素会生成一个块级框,可以向左或向右移动,直到整个容器盒边境或其他浮箱,直到盒通过设置float属性值实现浮动外缘,属性值有以下三种:none、left、right其中none表示不浮动;left表示浮在左边;right表示浮在右边。
有时,浮动不当会导致页面错位出现的话,那么你可以使用Clear方法来清除浮球,不仅可以解决错位页面的问题,还要解决孩子的浮动元素不能引起上级元素自适应背景通过设定清晰透明浮法财产价值实现的子元素的高度问题,属性值有以下四种::noneleftrightboth其中none表示允许两边都可以有浮动对象;left表示不允许左边有浮动对象;right表示不允许右边有浮动对象;both表示不允许有浮动对象。
4、DIV+CSS技术优势与传统网页设计技术相比,DIV+CSS技术有明显优势:
1.页面访问量,因为大多数写在CSS页面,这使得该页面体积容量大大降低了代码,速度更快。
2.保持风格一致的移动端使用DIV+CSS技术,将控制与来自不同区域或不同的页面相同的CSS文件中的所有页面反映偏差的影响。
3.移动端更容易维护维修人员需要将文件的内容;修改到外部作风,提高工作效率。
4.更好的搜索引擎,由于独立CSS样式表书面文件,这使得该页面的主体显著便于包括搜索引擎获得的更突出的部分索引。
5.劳动分工更有利于团队采用DIV+CSS技术,内容与表现分离,在劳动分工中团队开发更容易,减少相互联系。
4.6DIV+CSS布局设计
DIV+CSS是从排版习惯的传统观念不同的新的出版布局将是整个第一页
标记的每个块上,然后添加CSS定位块,最后加入适当的样式在每个块下面的内容最常见的三栏布局作为他们分配方法的一个例子概述。
4.6.1整体布局
首先根据网页内容把网页区分成不同的区块这里共分为topcontentfooter三个区域分别作为网页的顶部内容和版权区域然后在各区块内编写文档代码如下:
charset=utf-8"/>
三栏布局实例
此处显示id"header"的内容
此处显示id"left"的内容