CSS网页布局和定位 经典.pptVIP

Company Logo 深入理解盒子模型（1-1） 盒子模型是CSS的核心概念之一，它指定元素如何显示以及如何相互交互。页面中所有元素都可以看成一个盒子，占据着一定的页面空间。一个页面就是由很多这样的盒子组成，这些盒子之间会互相影响，共同构成复杂的页面效果。 在CSS中，一个独立的盒子（DIV）模型margin（外边距）、border（边框）、padding（内边距）、content（内容）4个部分组成。如图： Company Logo 深入理解盒子模型（1-2） Company Logo 盒子模型（1-3）示例 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title style type=text/css .box1{ border:1px solid #666666; height:50px; background:#CCCC00; margin:30px} .box2{ border:1px dashed #FF0000; padding:10px 10px 10px 50px; color:#ffffff; background-color:#000066; margin:20px 10px 20px -30px;} /style /head body div id=box1 class=box1 盒子1 div id=box2 class=box2 盒子2 /div /div Company Logo CSS+DIV网站设计的优势 首先，CSS的极大优势表现的简洁的代码，对于一个大型网站来说，可以节省大量带宽（速度加快）；而且从所周知，有哪些信誉好的足球投注网站引擎喜欢清洁的代码（其真正意义在于，增加了有效关键词占网页代码的比重），因此使用CSS+DIV的web标准制作的网站具有有哪些信誉好的足球投注网站引擎好的一定优势。 其次，CSS+DIV制作的网站使得网站改版相对简单，很多问题只需要改变CSS而不需要改变程序，从而降低了网站改版的成本。 Company Logo CSS+DIV网站设计的劣势 第一，CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个外部文件中，这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。 第二，对于CSS网站设计的浏览器兼容性问题比较突出。基于HTML4.0的页面设计在IE4.0之后的版本中几乎不存在兼容性问题，但CSS+DIV设计的网站在IE浏览器里面正常显示的页面，到火狐浏览器（FireFox）中却可能面目全非（这也是为什么建设网络营销人员使用火狐浏览器的原因所在）。CSS+DIV还有待于各个浏览器广商的进一步的支持。 Company Logo 网页布局 制作网页前我们需要对网页整体结构做一个版块的划分，版块划分的合理性很大程度上决定了网页布局的复杂程度。如： 分析：整个图片分为以下几个部分 顶部：包括Logo和一个背景图片 导航栏 内容部分分为侧边栏和主体内容 底部页脚包括一些版权信息 header menu content sidebar Footer Company Logo 实际布局图如下： Company Logo 块级元素与内联元素（1-1） Company Logo 块级元素与内联元素（1-2） Company Logo Float浮动布局 在前面我们利用float属性实现了定位，实际上当你把它用到div标签上时，浮动就是变成一个强大网页布局工具。基于浮动的布局利用了float属性来并排定位元素，我们只需要设定一个宽度，将元素设为左浮动和右浮动就可以了。 CSS允许如果元素浮动float，不论是图片，段落还是列表。无论先前元素是什么状态，浮动后都成为块级元素。浮动元素的宽度默认为auto。 注意： 浮动元素的外边缘不会超过其父元素的内边缘。 浮动元素不会互相重叠。 浮动元素不会上下浮动。 如果以个浮动元素在另一个浮动元素之后显示，而且会超出容纳块，则它下降到低于先前如何浮动元素的位置（即被顶到下一行）。 Company Logo 两列的浮动布局（示例1） 将两个DIV块放在另一个DIV块中，分别设置左右浮动实现。 Company Logo 三列的浮动布局（示例2） Company Logo 总结 网站可以分为内容、表现、结构三部分 DIV是Xhtml中