《div+css布局》由会员分享，可在线阅读，更多相关《div+css布局（23页珍藏版）》请在金锄头文库上搜索。
1、DIV+CSS布局 div+css这是国内流行的叫法,其实准确点应 该叫xhtml+css.,也就是web标准化布局。 Div : division 意为“区分” 。 Very excellent webmaster club CSS:Cascading style Sheets，采用CSS技术， 可以有效地对页面的布局、字体、颜色、 背景和其它效果实现更加精确的控制。 Div+CSS标准的优点1.大大缩减页面代码，提高页面浏览速度,缩减带 宽成本; 2.结构清晰，容易被搜索引擎搜索到，天生优化 了seo 3.缩短改版时间。只要简单的修改几个CSS文件 就可以重新设计一个有成百上千页面的站点
2、。 4.强大的字体控制和排版能力。CSS控制字体的 能力优于糟糕的FONT标签。 。Div+CSS标准的优点5.表现和内容相分离。将设计部分剥离出来放在 一个独立样式文件中，你可以减少未来网页无 效的可能。 6.更方便搜索引擎的搜索。用只包含结构化内容 的HTML代替嵌套的标签，搜索引擎将更有效 地搜索到你的内容，并可能给你一个较高的评价(ranking)。 7.Table 布局灵活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可 以 ul li 但标准语法最好有序的写。XHTML 可扩展超文本标签语言（EXtensible H
3、yperText Markup Language）,目标是取代 HTML。为什么要使用XHTML？ XHTML 使我们有能力编写出拥有良好结构 的文档，这些文档可以很好地工作于所有 的浏览器，并且可以向后兼容。许多页面都包含着糟糕的 HTML 代码。下面的 HTML 代码仍然可以工作得很好，即使 它没有遵守 HTML 规则.XHTML 要求 XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。更多的 XHTML 语法规则 属性名称必须小写 属性值必须加引号 属性不能简写 用 Id 属性代替 name 属性XHTML 文档有三个主要的部分 DOCTYPE He
4、ad BodyDIV+CSS布局前思考层布局定义原则从上到下 从外到内布局块定义 标签用class 和id定义并选择CSS样式属性 Class ：“类”，同一个html网页页面可以无数次的调用相同 的class类。 ID：标签的身份，同样ID在页面里也只能出现一次，并且 是唯一 重点在布局时用ID来定义时容易将分层布局和控 件搞混，故改用Class,控件定义时采用IDID和class是对大小写非常敏感的，最好以英文开头 ，不要用中文命名CSS类名。DIV CSS中CLASS与ID实例 .css5 width:100px; height:100px; border:1px solid #000;
5、 float:left; .css5_class background:#FFF; /背景白色 #css5_id background:#FF0000; /背景红色我在浏览器下浏览，内容背景将是白色 我在浏览器下浏览，内容背景将是红色 CSS盒子模型布局相关CSS-margin 控制块级元素之间的距离(就是两个层的距 离) margin属性的参数： margin left ：距左元素块距离（设置距左内边距） ； margin top：距头顶(上)元素块距离（设置距顶部元素 块距离）； margin right ：距右元素块距离（设置距右元素块距） ； margin bottom ：底元素块距离
6、（设置距低（下）元素 块距）。 margin:5px 6px 7px 8px;各参数分别指代Top、Right、 Bottom和Left布局相关CSS-padding 间隙属性,用来设置元素内容到元素边界的 距离。 注意： padding用在容器内部，margin指容 器外部，就像墙上挂着的两个相框，margin 指的是相框与相框的距离，padding指的是 每个相框里照片与相框边框的距离。 布局相关CSS-float 该属性的值指出了对象是否及如何浮动。 float属性的参数： none：对象不浮动left：对象浮在左边right：对象浮在右边布局相关CSS-position 规定元素的定位类型用途：浮动叠加层效果效果布局相关CSS- overflow 规定当内容溢出元素框时发生的事情。实例分析
