《DIV+CSS》由会员分享，可在线阅读，更多相关《DIV+CSS（52页珍藏版）》请在金锄头文库上搜索。
1、 Div + CSS 布局大全 博客园 Jesse Zhao 整理 http:/ MSN/Mail: 第 1 页 Div+CSS Div+CSS 布局大全布局大全 整理者：整理者：Jesse ZhaoJesse Zhao 网站：http:/JesseZ 送给我最爱的女朋友蜜蜜，希望她可以永远快乐幸福！ ！ ！送给我最爱的女朋友蜜蜜，希望她可以永远快乐幸福！ ！ ！ Div + CSS 布局大全 博客园 Jesse Zhao 整理 http:/ MSN/Mail: 第 2 页 目录目录 divcss 布局入门 . 4 XHTML 下 css+div 布局总结. 6 网页设计 DIV+CSS第 1
2、 天:选择什么样的DOCTYPE . 9 第一天 . 9 什么是 DOCTYPE. 10 我们选择什么样的DOCTYPE . 10 补充 . 10 网页设计 DIV+CSS第 2 天:什么是名字空间 . 10 网页设计 DIV+CSS第 3 天:定义语言编码 . 11 网页设计 DIV+CSS第 4 天:调用样式表. 11 外部调用样式表. 11 双表法调用样式表 . 12 网页设计 DIV+CSS第 5 天:head 区的其他设置 . 12 收藏夹小图标 . 12 为搜索引擎准备的内容. 12 网页设计 DIV+CSS第 6 天:XHTML 代码规范 . 12 1.所有的标记都必须要有一个相
3、应的结束标记 . 13 2.所有标签的元素和属性的名字都必须使用小写 . 13 3.所有的 XML 标记都必须合理嵌套 . 13 4.所有的属性必须用引号“括起来 . 13 5.把所有 这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的 ID 在 DIV 上。DIV 容器中可以包含任何内容块，也可以嵌套另一个 DIV。内容块可以包含任意的 HTML 元素-标题、段落、图片、表格、列表等等。 根据上面讲述的，你已经知道如何结构化 HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。
4、使用选择器是件美妙的事 id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header 写一个 CSS 规则，就可以完全不同于#content 里的图片规则。 Div + CSS 布局大全 博客园 Jesse Zhao 整理 http:/ MSN/Mail: 第 5 页 另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link 或者 #subnav a:link 或者#content a:link。你也可以定
5、义不同内容块中相同元素的样式不一样。例如，通过#content p 和#footer p 分别定义#content 和#footer 中 p 的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络设备中(PDA 还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。 一个仔细结构化的 HTML 页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用 blockquote标签，只要使用 p 标签，并对 p 加一个 CSS 的 margin 规则就可以实现缩进目的。p 是结构化标签，margin 是表现属性，前者属于 HTML，
6、后者属于 CSS。(这就是结构于表现的相分离.) 良好结构的 HTML 页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码，现在可以只在 HTML 中写，所有控制表现的东西都写到 CSS 中去，在结构化的 HTML 中，table 就是表格，而不是其他什么(比如被用来布局和定位)。 亲自实践一下结构化 上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现 DIV 嵌套的情况，你会看到“container“层中又有其它层，结构类似这样： a list another list 嵌套的 div 元素允许你定义更多的 CSS 规则来控制表现，例如：你可以给#na
7、vcontainer 一个规则让列表居右，再给#globalnav 一个规则让列表居左，而给#subnav 的 list 另一个完全不同的表现。 用 CSS 替换传统方法 下面的列表将帮助你用 CSS 替换传统方法： HTML 属性以及相对应的 CSS 方法 HTML 属性 CSS 方法 说明 align=“left“ align=“right“ float: left; float: right; 使用 CSS 可以浮动 任何元素:图片、段落、div、标题、表格、列表等等 当你使用 float 属性，必须给这个浮动元素定义一个宽度。 marginwidth=“0“ leftmargin=“0
8、“ marginheight=“0“ topmargin=“0“ margin: 0; 使用 CSS, margin 可以设置在任何元素上, 不仅仅是 body 元素.更重要的，你可以分别指定元素的 top, right, bottom 和 left 的 margin 值。 vlink=“#333399“ alink=“#000000“ link=“#3333FF“ a:link #3ff; a:visited: #339; a:hover: #999; a:active: #00f; 在 HTML 中，链接的颜色作为 body 的一个属性值定义。整个页面的链接风格都一样。使用 CSS 的选择器，页面不同部分的链接样式可以不一样。 bgcolor=“#FFFFFF“ background-color: #fff; 在 CSS 中，任何元素都可以定义背景颜色，不仅仅局限于 body 和 table元素。 bordercolor=“#FFFFFF“ border-color: #fff; 任何元素都可以设置边框(boeder)，你可以分别定义 top, right, bottom和 left border=“3“ Div + CSS 布局大全 博客园 Jesse Zhao 整理 http:/ MSN/Mail: 第 6 页 cellspacin
