CSS布局教程

相信新入门想学习DIV+CSS网页制作的很多朋友都有个问题，究竟怎样学习DIV+CSS呢？学习网页制作的流程是怎么样的呢？好了下面天津网站建设就来介绍下根据我的经验理出来的学习制作经验，希望给大家带来帮助和参考，让新手在制作学习中少走弯路。制作网页开始时候需要认识和了解知识：
1、了解html基础语言及结构，及能运用；
2、了解DIV+CSS属性，了解ID与class区别及用法，了解掌握常用CSS属性，CSS盒子结构；
...

CSS对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事，天津网站建设从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。对于web2.0的过度，请尽量用xhtml格式写代码，而且DOCTYPE 影响 CSS 处理，作为W3C的标准，一定要加 DOCTYPE声明。

IE6下为什么图片下有空隙产生

经过上面的规划，下面开始图片的切割、优化和导出，为页面成形提供必要的原料。在切割前应该胸有成竹，对某些区域图片的实现，应该思考以更恰当的方法，放置在合适的容器中，而且不额外增加页面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页面布局是否成功。

页面内容区包括文档标题和文档正文，—，该区域是本案例页面的核心内容。但页面编码比较简洁，看下面的XHTML编码。
<div id="container">
  <h1>简洁布局之变幻的CSS</h1>
  <p>天津网站建设编码中添加适当的注释可以辅助编码，使XHTML代码有更加清晰的结构。本案例页面结构相对简单，不难看出div结束标记是针对哪一个元素。面对团队其他成员或者页面结构复杂，无法快速看出相应的结束标记是属于哪一个元素，页面的结构会相对混乱，给Web开发工作带来不便。虽然Adobe Dreamweaver提供“选择父标签”工具，但不是每一位Web开发人员都使用此软件。所以通过简单的注释标识这些信息，可以让XHTML代码更加清晰易读。为了减小文件大小，在最终发布时可以去掉这些额外的注释信息。</p>
...

    有了页面总体布局，下面开始各个页面元素的完善。首先从头部header层开始。这一区域主要有4个组成部分，分别是网站LOGO、网站标语、搜索框及网站导航菜单。下面依次

序开始编码。
<p id="logo">我爱天津网站建设</p>
上面网站LOGO部分的XHTML代码将链接文字包含在段落p里面，通过给链接元素a设置CSS样式应用背景图片，将LOGO图片显示出来，然后再合理地隐藏掉链接文字。有些做法是将LOGO图片通过img标签直接引用进来，然后给图片增加超链接。毛这里不否定这样的方法，但当用户禁用图片与CSS样式时，可能无法确定所在站点的名称。而以为链接文字的方法，但当用户禁用图片与CSS样式时，可能无法确定所在站点的名称。而以为链接文字：设置背景图片的方式引入LOGO，能够适应更多的浏览环境，即使图片不显示、CSS样式被禁用，站点名称都不会丢失，具有更强的适应性。网站标语的XHTML编码如下。
...

准备好图片，已进行详细的规划，下面开始编写XHTML代码。让代码具有语义是每一位Web开发人员的追求，应该特别注意恰当地使用XHTML标签。编写代码时注意运用一些小技巧以提高天津网站建设的开发效率；当多人团队协作开发时，应注意协同一致，要有标准的命名规范与文件结构，这样可以让团队成员清晰明了地查看XHTML代码。页面具有良好的XHTML结构是CSS布局的重点，以准确的XHTML标签来组织页面是必须重视的环节。天津网站制作在实际编码中不断地总结经验，对照相关资料权衡、斟酌，以最恰当的标签来组织页面。这样的环节往往容易被网页制作人员所忽视，总是认为将页面组织起来就行，是不是具有良好的结构、语义，也不管嵌套是否合理，这会给将来的重构工作带来灾也没有准确、有效地理解内容与表现分离的思想。首先写出页面主体元素的结构，再进一步深人对各个区域内的元素进行细化。也就是先描出大体框架，再向框架内填相应的内容，最终完成全部XHTML代码的编写。页面总体布局需要建立5个div层，分别是header、main、container、sider和footer。其中main层作为“包围层”以实现内容区与侧边栏的居中。页面主体元素XHTML编码如下:
...

目前的社会分工越来越细，天津网站制作人员的工作不再贯穿于天津网站建设的全部流程，页面设计人员（美工）可以从美学的角度进行更加规范化、更具专业的设计。而网页制作人员的工作则是对页面效果图进行分块、切割，编写XHTML与CSS代码，最终形成网页。首先要细致地分析效果图，做到胸有成竹，然后再根据页面的特点及版式需要进行详细的规划。
...