第3讲 HTML布局.ppt

例子解释 上面这段 HTML 模拟了新闻网站的结构。其中的每个 div 把每条新闻的标题和摘要组合在一起，也就是说，div 为文档添加了额外的结构。同时，由于这些 div 属于同一类元素，所以可以使用 class=news 对这些 div 进行标识，这么做不仅为 div 添加了合适的语义，而且便于进一步使用样式对 div 进行格式化，可谓一举两得。 * 3.3.4 HTML span 元素 HTML span 元素是内联元素，可用作文本的容器。 span 元素也没有特定的含义。 当与 CSS 一同使用时，span 元素可用于为部分文本设置样式属性。 * span 标签的定义和用法 span 标签被用来组合文档中的行内元素。 提示和注释： 提示：请使用 span 来组合行内元素，以便通过样式来格式化它们。 注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。 * 例子解释 例：pspan一些文本。/span一些其他的文本。/p 例子解释: 如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会有任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。 可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。 可以对同一个 span 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。 * 案例分析 分析：上例的“提示”使用了粗体的橘红色。这里使用了span 元素，然后对这个 span 元素的父元素，即 p 元素应用 class，这样就可以对这个类的子元素 span 应用相应的样式了。 * html head link rel=stylesheet type=text/css href=html/csstest2.css /head body p class=tipspan提示：/span一些解释文本。……/p /body /html csstest2.css文件内容： p.tip span{ font-weight:bold; color:#ff9955; } 3.4 HTML 布局 * 3.4.1 HTML 布局 - 使用表格 3.4.2 HTML - 使用div元素 3.4.1 HTML 布局 - 使用表格 使用 HTML table 标签是创建布局的一种简单的方式。 可以使用 div 或者 table 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 提示：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！ 下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列： * 3.4.1 HTML 布局 - 使用表格 !DOCTYPE htmlhtmlbodytable width=500 border=0trtd colspan=2 style=background-color:#99bbbb;h1网页的主标题/h1/td/trtr valign=toptd style=background-color:#ffff99;width:100px;text-align:top;b菜单/bbr /HTMLbr /CSSbr /JavaScript/tdtd style=background-color:#EEEEEE;height:200px;width:400px;text-align:top;内容都在这里/td/trtrtd colspan=2 style=background-color:#99bbbb;text-align:center;Copyright /td/tr/table/body/html * HTML 布局 - 使用 div 元素 div 元素是用于分组 HTML 元素的块级元素。 下面的例子使用五个 div 元素来创建多列布局： * HTML 布局 - 使用 div 元素 !DOCTYPE html html head style type=text/css div#container{width:500px} div#header {background-color:#99bbbb;} div#menu {background-color:#ffff99;height:200px;width:150px;float:left;} div#content {bac