韩顺平_php从入门到精通_视频教程_第10讲_div-css开山篇_学习笔记_源代码图解_PPT文档整理

来源：互联网发布：java 项目目录结构编辑：程序博客网时间：2024/04/29 14:10

文西马龙：http://blog.csdn.net/wenximalong/

前面讲的table布局，理论上可以做出任何复杂的界面，但是

table表格布局

缺点：

1.显示样式和数据绑定在一起的
2.布局的时候，灵活度不高
3.一个页面可能会有大量的<table>元素，代码就会冗余
4.增加带宽
5.搜索引擎不喜欢这样的布局
优点
1.理解比较简单
2.不同的浏览器看到的效果一般是相同的
3.显示数据还是很好的

div+css 的基本思想：数据和样式要分离
如很多网站用到的换肤功能

div+css是一种目前比较流行的网页布局技术
DIV来存放需要显示的数据（文字，图表），css就是用来指定怎样显示，从而做到数据和显示相互分离的效果

1.div+css简介
2.为什么需要div+css

div+css是什么
div元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。
css是英语 Cascading Style Sheets(层叠样式表单)的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。
div+css是网站标准(或称"WEB标准")中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

我们可以简单的这样理解div+css
div是用于存放内容（文字，图片，元素）的容器
css是用于指定放在div中的内容如何显示，包括这些内容的位置和外观

面试技巧：比如session是什么
你可以这样回答：通过我的学习，我是这么理解的（这样给人的感觉不是被动在接受，我有自己的一些思考）我认为session有这么几个特点1.2.3.。不要这么回答：我认为session有三个特点1.2.（还想不起来）……或者说我在做项目的过程中，是这样加深理解的，我认为它有这么几个特点1.2.3……不要说书上是这么说的或者别人是这么告诉我的

CSS 2.0中文手册(含索引).chm

http://ishare.iask.sina.com.cn/f/21028665.html

体验案例：（如果用表格就麻烦很多）

demo.html

<html><head><title>css入门小案例</title><!--引入css--><link rel="stylesheet" type="text/css" href="my.css" /></head><body><div class="style1"><img src="2.jpg" /></div></body></html>

my.css

.style1{/*这里是注释*/width: 400px;height: 300px; /*一定要写一个分号*/background-color: silver;border: 1px solid red;margin-left: 300px;margin-top: 300px;padding-top: 20px;padding-left: 40px;}

要深刻理解div+css的优越性，我们不得不提到网页设计的三个历史时期table，table+css，div+css
①table网页设计：内容和样式（外观和布局）混合
②table+css网页设计：table布局，css指定外观
③div+css网页设计：div放内容，css指定样式（外观和布局）
内容和样式彻底分离

如果没有练习table布局，比如前面讲的那个企业邮局的登录界面，就体会不到div+css带来的便捷。要是上来就讲div+css这个技术很好啊，你则根本无法感觉好在哪里。

注意：div+css并不是要我们抛弃table，因为table在显示数据时，特别方便，因此在使用div+css时，该使用table时，就得使用。

div+css的优势
1.符合W3C标准，微软等公司均为W3C支持者。
2.搜索引擎更加友好，更利于搜索引擎的抓取，搜索引擎他不关心你的样式，而是关心你的结构和内容。
3.样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。现在YAHOO，MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。
4.CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码

5.表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录