yueqiumao
  • 注册日期2011-10-18
  • 发帖数47
  • QQ
  • 火币65枚
  • 粉丝0
  • 关注0
阅读:3424回复:0

HTML教程……地十一课

楼主#
更多 发布于:2011-10-22 00:38
第 11 课:表格的高级特性
“表格的高级特性”这一标题听起来可能感觉挺枯燥的。但从积极的一面看,当 你精通表格后,就再也没有其他有关 HTML 的内容能难住你了。
表格还有哪些相关属性? 表格还有哪些相关属性?
colspan 和 rowspan 这两个属性用于创建特殊的表格。 colspan 是“column span(跨列)”的缩写。colspan 属性用在标签中,用 标签中 colspan 属性用在标签中, 来指定单元格横向跨越的列数: 来指定单元格横向跨越的列数
例 1:
  单元格 1   单元格 2 单元格 3 单元格 4  
该例在浏览器中将显示如下:
单元格 1 单元格 2 单元格 3 单元格 4
该例通过把 colspan 设为“3”, 令所在单元格横跨了三列 如果我们将 colspan 。 设为“2”,则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元 格,以确保两行占据相同的列数。 例 2:
  单元格 1 单元格 2   单元格 3 单元格 4 单元格 5  
该例在浏览器中将显示如下:
单元格 1 单元格 2
单元格 3 单元格 4 单元格 5
rowspan 是什么? 是什么?
可能你已经猜到,rowspan 的作用是指定单元格纵向跨越的行数 rowspan 的作用是指定单元格纵向跨越的行数。 例 3:
  单元格 1 单元格 2   单元格 3   单元格 4  
该例在浏览器中将显示如下:
单元格 2 单元格 1 单元格 3 单元格 4
上例中的单元格 1,其 rowspan 被设为“3”,这表示该单元格必须跨越三行 (本 身一行,加上另外两行)。因此,单元格 1 和单元格 2 在同一行,而单元格 3 和单元格 4 形成独立的两行。 感觉有些迷糊?这确实比较复杂,而且容易出错。因此,在进行 HTML 编码之前, 你最好先在纸上把表格设计好。 明白了?那么你就自己试着用 colspan 和 rowspan 来创建几个表格吧。
页面布局(CSS) 第 12 课:页面布局(CSS)
如果能为页面实现理想的布局,岂不妙哉?
是啊,但如何实现呢? 是啊,但如何实现呢?
你可以使用级联样式表( Sheets, CSS) 你可以使用级联样式表(Cascading Style Sheets,简称 CSS)为网站设计页面 布局。本课将对 CSS 作简单介绍。如需从头开始全面学习 CSS 知识,可以使用我 布局 们提供的 CSS 教程。因此,请将本课当作 CSS 的预备课。 CSS 是 HTML 的搭档。在编码过程中,它们发挥不同的作用:HTML 负责网页的具 HTML 体内容(结构), ),而 则修饰网页的表现形式(布局) 体内容(结构),而 CSS 则修饰网页的表现形式(布局)。 正如第 7 课所讲, 可以用 style 属性将 CSS 内联到网页中 内联到网页中。例如,你可以采用 下面的方法来设置文字的字体类型和大小: 例 1:
<p style="font-size:20px;" style="font-size:20px;">这里的文字大小为 20</p> <p style="font-family:黑体;" style="font-family:黑体;">这里的文字字体为黑体</p> 黑体;" <p style="font-size:20px; font-family:黑体;" style="fontfont-family:黑体;">这里是文字大小为 20、采用黑体;" 黑体的文字</p>
该例在浏览器中将显示如下:
这里的文字大小为 20
这里的文字字体为黑体
这里是文字大小为 20、采用黑体的文字
在上例中,我们使用了 style 属性来指定字体类型(font-family)和字体大小 (font-size)。在最后一段中,我们同时进行了字体类型与字体大小的设置, 请注意用分号将它们隔开。
页面布局似乎挺繁琐的? 页面布局似乎挺繁琐的?
有一个优越的特性,即它可以对页面布局进行集中管理。也就是说,你不必 CSS 有一个优越的特性,即它可以对页面布局进行集中管理 在每个标签里都使用 style 属性;相反,你可以只声明一次,浏览器便会按相应 的页面布局效果来显示文本: 例2:
  我的第一个 CSS 页面  {fontfont-family:宋体 宋体;} h1 {font-size:30px; font-family:宋体;} {fontfont-family:黑体 黑体;} h2 {font-size:15px; font-family:黑体;} {font-size:8px; font-family:"隶书 隶书";} p {font-size:8px; font-family:"隶书";}    我的第一个 CSS 页面 欢迎参观我的第一个 CSS 页面 <p>你可以在这里了解 CSS 的原理</p>  
显示示例
在上例中,我们在文档的头部(head)插入了 CSS,它将应用于整个页面。要将 我们在文档的头部(head) CSS,它将应用于整个页面 我们在文档的头部 CSS 嵌入文档,你只需通过标签告诉浏览器该段为 CSS 即可。 在例 2 中,所有一级标题(h1)采用宋体,字体大小为 30(象素);所有二级 标题(h2)采用黑体,字体大小为 15(象素);普通段落文字(p)采用隶书, 字体大小为 8(象素)。 另一种使用 CSS 的方法,是将 CSS 代码单独作为一个文档保存。通过把 CSS 文档 通过把 独立出来,你就可以同时对多个页面的布局进行集中管理。如果你要对一个大型 独立出来,你就可以同时对多个页面的布局进行集中管理 网站上的大量网页作字体类型或大小的修改,那么这个方法绝对是最佳选择。在 此,我们不对 CSS 作更深的讨论,我们的 CSS 教程最就此作详细介绍。
CSS 具有哪些其他功能? 具有哪些其他功能?
CSS 的作用不仅仅是指定字体类型和大小,它还可以用于许多其它方面,比如设 置颜色和背景等。你可以试试下面的例子:
<p style="color:green;"
>绿色
的文字</p> 兰色背景的标题  style="background-image:url('http://www.html.net/logo.png');"
你可以试一下将这些示例代码插入自己的网页中,你可以采用两种方法:(1) 使用 style 属性;(2)把 CSS 放在文档的头部(head)。
CSS 仅仅用于设置颜色和字体吗? 仅仅用于设置颜色和字体吗?
CSS 除了用于设置颜色与字体等布局之外,还可以控制页面设置与表现形式 还可以控制页面设置与表现形式(边还可以控制页面设置与表现形式 距,漂浮,对齐,宽度,高度等)。通过为不同元素设置不同的 CSS,你可以令 页面布局精密而美观。例 3:
<p style="padding:25px;border:1px solid red;" red;">我爱 CSS</p>
该例在浏览器中将显示如下:
我爱 CSS
float 属性用以定义元素的漂浮方式:靠左还是靠右。下例展示了该属性的用法: 例4:
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nislut aliquip ex ea commodo consequat...</p>
该例在浏览器中将显示如下:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nislut aliquip ex ea commodo consequat... 在这个例子中,图像元素漂移到了左边,文本元素填补了剩下的空间。 你可以通过设置 position 属性,把元素暸置到页面中的任意位置。 例 5:
显示示例
在该例中 图像被放置在浏览器中位于距底端 50 象素 距右边界 10 象素的位置 , 、。 这里只是一个例子,实际上你可以把它放在你所期望的任何位置上。试一试吧! 挺容易,而且很酷,是吧?
确实很酷。 但不容易吧? 确实很酷。 但不容易吧?
当然, CSS。正如前面所提到的,这一课只对 CSS 作简 当然,你不可能在十分钟内学会 CSS 要的介绍。以后,你可以从我们提供的 CSS 教程中学到更多 CSS 知识。
现在, HTML, 现在,让我们先把精力集中于 HTML,继续学习下一课, 续学习下一课,在那里你将学到如何在 因特网上发布自己的网站, 因特网上发布自己的网站,让第

喜欢0 评分0
游客

返回顶部