CSS布局教程

经过上面的规划，下面开始图片的切割、优化和导出，为页面成形提供必要的原料。在切割前应该胸有成竹，对某些区域图片的实现，应该思考以更恰当的方法，放置在合适的容器中，而且不额外增加页面HTM，编码。在保证图片质量的情况下尽可能地优化图片文件，减小体积，使浏览更加流畅。为了实现三列在高度上的自适应，即当中部内容较多时，页面自然地撑开而增加高度，此时三列结构在视觉上是存在的，因而可以给“包围”层wrap设置一个背景图片，并且设置—垂直方向重复排列。
下面开始3个页面共有元素的图片切割。共有元素包括左侧标签链接区域、右侧网站LOGO与图片推荐，以及中部主内容区域的Banner图片、网站导航和底部导航与友情链接。天津网站制作网站首页中部内容区图片的切割。栏目图片调用共有5个图片，除此而外还有栏目标题部分的图片，将栏目标题分隔线单独切割出来
...

本章案例是一个古典风格的天津软膜天花网页，古色古香的气息扑面来，相对较为复杂的结构给HTML与CSS编码造成一定难度。通过细致的分析与规划，逐步理清各元素的关系，看似复杂的页面也能轻松地编写代码，形成嵌套合理且语义明确的HTML文档。利用浮动将各元素于合适的位置，并尽量减少嵌套，将相对重要的内容置于文档前部。灵活地运用CSS背景设置，将多个图片集成于同一个图片文件，利用背景图片的定位设置显示不同的区域。使用列表元素别致的链接悬停交互效果为页面增加良好的气氛。
...

    在Web开发工作中会出现令天津网站制作人员非常烦恼的修改，例如当页面制作与网站后台程序都已完成，客户提出调整、修改。以传统Web开发模式进行构架，这样的修改、调整会出现困难与障碍，开发人员不得不进行返丁，按照调整后的方案重新规划、制作。而应用DIV+CSS进行的Web开发，以合适的标签来组织文档，建立了良好的XHTML结构，内容与表现相分离。这使得页面的调整、修改在一定范围内不需要改变任何XHTML标记，仅通过修改CSS样式对页面进行重构，即可“演变”出风格完全不同的页面，从而大大减少了页面XHTML编码与网站程序员的工作。现在本案例也模拟面临调整、修改，原来的效果比较简洁、素雅，现在根据要求加以润色，以轻盈的色彩来表现整个页面，页面在结构上没有出现太大变化，只是很多地方运用更加鲜亮的色彩。网站重构并非高深莫测，只要页面结构合理，重构方案往往都可以仅通过CSS实现。在重构时灵活地利用已有元素之间的关系，充分发挥CSS的优势。下面开始对天津软膜天花网站页面进行分析并切割图片，为页面重构作准备。
...

经熟知这是典型的三行两列式布局，整个页面布局的CSS样式，需要对5个div层进行定义以建立初步的页面布局框架，这5个div分别是header, main, container, sider和 footer~下面首先进行整体布局声明，CSS编码如下。上述编码中，定义外込边距ma玛in和内边距padding都为o；文本颜色设置为黑色（#000）（字大小设置为12px；去除列表项预设标记；去除文本装饰，这里主要是去除了默认情况下链接文本的下划线。header层是页面头部元素的容器，header层与内容层有一定的距离，在这里定义下外边距为20px即可实现这样的留白。main层是内容区container层与侧边栏sider层的容器，天津软膜天花的主要任务是实现水平居中，在CSS中定义它的宽度并让它水平居中即可。main层的具体CSS编码如下。container层内容区与sider层侧边栏是页面中部的主体，它们将main正层分分为左左右两块，container层酲的下内边距定义为10px，是为了让内容文字与底部版权区域产生一定的距离，避内容文字紧紧贴在版权区域。container层与sider层浮动方向的定义，体现了CSS布局中“反向浮动”的思想。按照正常的天津网站建设和天津网站制作文档流，container层在上部或左侧，而sider层位于下部或右侧。对这两个层进行相反于正常文档流的浮动，让页面的主要内容位于文档编码的前面部分，但在视觉上它依然是位于右侧的位置footer层是页面底部版权区域，上边框为一条蓝色的实线，在布局中可以通过CSS将这条线勾勒出来。在IE浏览器中不管是否清除浮动，在IE浏览器中不管是否清除浮动，页面布局的外观视觉效果都是一致的。但在Fire fox浏览器中，不清除浮动会造成footer层布局错乱，footer层并未设置浮动，但它依然“跑”到了container层的下方，而并不是预想地出现在main层的下方。似乎Firefox浏览器未能正确地获取container层与sider层高度上的变化而紧随着container层浮动。经过clear清除浮动的定义，footer层已经位于main层的下方，但在Firefox浏览器中main层的高度依然不正确（可以定义main层的背景色进行查看）。如果要求精确地控制，则必须在main层内部设置一个辅助div层或其他XHTML标记，以用于清除浮动，这样Firefox浏览器才能正确地“理解”main层的高度。至此，CSS页面布局已经全部完成，由于在CSS编码中加入了辅助编码的背景色，可以清晰查看各部分的位置与排列，从而直观地判断CSS页面布局是否成功。