学习下视频：第8课 - CSS排版 - CSS/DIV结构专题解说

然后你要知道，DIV+CSS是高成本开发，速度当然是没有你画TABLE来的快，但是好处更多，相信如果你能看到这里，你一定对DIV+CSS的好处也有一定的了解了。

• 
  
• 
  

点击在线寓目
下载该节视频教程　动力软件园分流下载　FLV播放器下载大概利用QQ影音播放
上一课中次要解说了CSS对页面中各个元素的定位，本课在此基本上，从页面的全体排版动身，先容CSS排版的看法和详细办法，包含CSS排版的全体思绪、两种详细的排版布局、电子相册的几种版式制造，和与传统表格排版办法的对照。
1．CSS排版看法
CSS的排版是一种很新的排版理念，完整有别于传统的排版习气。它将页面起首在全体长进行div标志的分块，然后对各个块举行CSS定位，最初再在各个块中增加响应的内容。经由过程CSS排版的页面，更新非常的简单，乃至是页面的拓扑布局，都能够经由过程修正CSS属性来从头定位。我们在这里次要先容CSS排版的全体思绪，为后续课程的进一步先容打下基本。但愿人人可以把握以下几个方面的内容：

• 将页面用div分块
  
• 计划各块的地位
  
• 用CSS定位
  

2．流动宽度且居中的版式
宽度流动并且居中的版式是收集中最多见的排版体例之一，我们在这里使用CSS排版的体例制造这类通用的布局，并接纳两种办法分离予以完成。
起首像上一节形貌的一样，将一切页面内容用一个的年夜div包裹起来，指定该div的id为container，这个id在全部页面中是独一的。固然年夜部分扫瞄器其实不限定反复id的利用，但十分不倡议统一个页面中呈现反复id，由于反复id会使得javascript等剧本言语在寻觅工具时产生凌乱。
3．左中右版式
将页面支解为左中右三块也是网上罕见的一种排版形式，我们在这里以此布局为例牢固CSS排版的办法，页面布局如图所示。

登录/注册后可看大图

4．块的背景致成绩
在后面提到的页面左中右的布局，固然在全体大将页面举行了排版，但细节处置仍旧有不敷的地方。假如给#left、#middle、#right都设置背景色彩就会发明，仅仅依照上例中的设置，#left、#right的背景都没有延长到页面的底端，而是仅仅掩盖了内容的部分。
这类背景色彩的成绩在CSS排版中常常会碰到，我们在这里给出通用的办理举措，起首依照上节中最初一段代码的体例将两头三块放进一个父块#mainbox中，然后一样把页面中一切的块放进到一个年夜的父块#container中。
5．排版实例：电子相册
当你进来旅游时拍的良多照片，但愿放在网上与伴侣分享时；当旧事事情者、拍照家拍了良多相片但愿放到网上出卖时，电子相册都必不成少。我们在这里经由过程CSS对电子相册的排版，而且分幻灯片、具体信息两种形式，进一步先容CSS排版的办法。个中幻灯片形式的最后的效果如左图所示，具体信息形式的最后的效果如右图所示。

登录/注册后可看大图

登录/注册后可看大图

6．DIV排版与传统的表格体例排版的剖析
现实上，如今仍存在大批的利用表格举行结构的页面，我们在书中和视频课程中，也会剖析到两者各自的长处和弱点，如许人人就能够依据必要来选择利用那种手艺更得当了。
ie中母div被设置成特定高度之后，假如里面的子div高度（有float的话就以清除float的div的最底为总高度）超过了母div设置的高度,ie会自动把母div撑大，但是ff却不能，ff中母div的高度会依然，里面的子层会溢出到外面来。兼容方法：不要设置母层高度

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。