脑动力：HTML+CSS标签速查效率手册书连载

主题：脑动力：HTML+CSS标签速查效率手册书连载

lili456 [专家分：0] 发布于 2012-06-07 10:39:00

内容提要
HTML是所有网页制作技术的核心和基础，是每个网页制作者必须掌握的基本知识。CSS是用于控制网页内容显示效果的一种标记语言，用它可以制作更美观的页面。两者在网页设计中不可或缺。
本书共分为18章，前10章主要介绍了HTML标签和相关属性、包括文字、排版、列表、超链接、多媒体、表格、表单、框架等知识点。后8章介绍了CSS属性的详细用法和示例代码，包括文本显示、列表显示、链接显示、文字背景、元素定位滤镜等知识点。
本书语言简洁，内容丰富，适合网页设计与制作人员、网站建设开发人员、大中专院校相关专业学生、个人网站爱好者阅读。

当当地址：http://product.dangdang.com/product.aspx?product_id=22766678

本帖地址： http://bbs.pfan.cn/post/386455.html

回复列表（共35个回复）

21 楼

lili456 [专家分：0] 发布于 2012-06-07 11:08:00

7.3  网页背景音乐
在网页中，除了可以嵌入普通的声音文件之外，还可以为某个网页设置背景音乐。作为背景音乐的可以是音乐文件，也可以是声音文件。
7.3.1  背景音乐——bgsound
设置背景音乐使用bgsound标签实现。
【标签说明】
<bgsound src=背景音乐的地址>
说明：作为背景音乐的文件还可以是avi文件、mp3文件等音乐文件，也可以是midi声音文件。
【上机实战】
<html>
<head>
<title>设置网页背景音乐</title>
</head>
<body>
<marquee behavior="scroll"  bgcolor="#99FF99" hspace="10" vspace="40">
<font size="+2" color="#FF3300">欢迎光临我的网站！</font>
</marquee>
<bgsound src="Clown-放手也是幸福.mp3">
</body>
</html>
【运行效果】
运行这段代码，打开如图7-17所示的界面，在打开界面之后就可以听到背景音乐。

[img]http://www.tu265.com/di-46cc8cf526945c59429c5e607eece9eb.png[/img]

22 楼

lili456 [专家分：0] 发布于 2012-06-07 11:08:00

7.3.2  背景音乐的循环播放次数——loop
通常情况下，背景音乐是不断循环播放的，但有时也需要指定播放的次数，这一功能通过设置相应的loop参数即可。
【标签说明】
<bgsound src=背景音乐的地址 loop=循环次数>
说明：如果希望无限次循环播放背景音乐，可用将循环次数设置为True。
【上机实战】
<html>
<head>
<title>设置网页背景音乐</title>
</head>
<body>
<marquee behavior="scroll"  bgcolor="#99FF99" hspace="10" vspace="40">
<font size="+2" color="#FF3300">欢迎光临我的网站！</font>
</marquee>
<bgsound src="Clown-放手也是幸福.mp3" loop="true">
</body>
</html>
【运行效果】
运行这段代码，背景音乐一直循环播放。
7.4  图像格式
网页中的图像格式通常有三种： GIF、JPEG、PNG。目前，大多数浏览器都支持GIF和JPEG图像，由于PNG图像文件较小，而且使用灵活，也越来越多地被应用在网络中。以下分别对这3种图像格式的特点进行介绍。
GIF格式
GIF格式采用LZW压缩，是以压缩相同颜色的色块来减少图像的大小。文件最多可使用256种颜色，适合显示色调不连续或具有大面积单一颜色的图像。GIF格式常用于商标、新闻式的标题或导航条、按钮等。
JPEG的格式
JPEG格式是一种压缩的非常紧凑的格式，具有一定的失真度，通常用来保存超过256色的图像。JPEG对于图标之类含大色块的图像不是很有效，不支持透明图和动态图。需要全彩模式保存图像时，使用JPEG格式是最好的选择。照片通常使用JPEG格式来进行压缩。
PNG格式
PNG图像格式采用和GIF图像格式类似的压缩算法，它提供了将图像文件以最小的方式在缩却又不造成图像失真的技术。它不仅具备了GIF图像格式的大部分优点如具有透明背景等，而且还支持48-bit的色彩，更快的交错显示，还可以控制图像的压缩比率，使用无损或有损压缩算法，进一步减少文件大小。
7.5  插入图像----<img>
在网站页面中，基本上都可以看到图像文件。页面中插入图像使用img标记实现，从而达到美化页面的效果。
【标签说明】
<img src="图像文件的地址">
说明：在该语法中，src参数用来设置图像文件所在的路径，这一路径可以是相对路径也可以是绝对路径。
【上机实战】
<html >
<head>
<title>插入图像</title>
</head>
<body>
<h3>瞧瞧，魅力无穷的企鹅</h3>
<img src="8-2.jpg">
</body>
</html>
【运行效果】
运行这段代码，可以看到页面中插入了图片，如图7-18所示。

[img]http://www.tu265.com/di-89865fbe545dc7e1565a1e007de0dcce.png[/img]

23 楼

lili456 [专家分：0] 发布于 2012-06-07 11:09:00

7.6 图像属性设置
网页中的图像，默认情况下图像的大小和原图是相同的，而在实际应用中可以通过各种图像属性的设置调整图像的大小、分辨率、图像间距等内容。
7.6.1 图像描述文字——alt
通过设置alt属性，可以对图像进行简单的描述，当图像没有加载到浏览器上时，就会显示添加的描述文字，而下载图像之后，当鼠标停留在图像上方的时候也会显示出描述文字。
【标签说明】
<img src="图像文字的地址" alt="描述文字的内容">
说明：描述文字的内容可以是中文，也可以是英文。
【上机实战】
<html >
<head>
<title>插入图像</title>
</head>
<body>
<h3>瞧瞧，魅力无穷的企鹅</h3>
<img src="8-2.jpg" alt="主要生活在地球的南半球，目前已知全世界的企鹅共有十八种。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；">
</body>
</html>
【运行效果】
运行这段代码，当鼠标位于图像上面的时候可以看到添加的说明文字，如图7-19所示。

[img]http://www.tu265.com/di-ebef2eaec8648107f8228a606a82635d.png[/img]

24 楼

lili456 [专家分：0] 发布于 2012-06-07 11:10:00

7.6.2 图像的边框——border
在默认情况下，页面中插入的图像是没有边框的，可以通过border属性为图像添加边框。
【标签说明】
<img src="图像文件的地址" border="图像边框的宽度">
说明：在该语法中， border的单位是像素。
【上机实战】
<html >
<head>
<title>设置图像边框</title>
</head>
<body>
<h3>分别为带边框的图像、不带边框的图像</h3>
<img src="8-1.jpg" border="2">
<img src="8-1.jpg">
</body>
</html>
【运行效果】
运行这段代码，如图7-20所示，可以看到在左侧图像的周围添加了边框的效果，边框的宽度为2像素。

[img]http://www.tu265.com/di-444a9cc93b70aacd696047d592cba227.png[/img]

25 楼

lili456 [专家分：0] 发布于 2012-06-07 11:11:00

7.6.3 图像的大小——width、height
通过width、height属性可以设置图片显示的宽度和高度，默认情况下，改变高度的同时，其宽度也会等比例进行调整。
【标签说明】
<img src="图像文件的地址" height=图像的高度 width=图像的宽度>
说明：在该语法中，图像的高度、宽度单位是像素。
【上机实战】
<html >
<head>
<title>设置图像大小</title>
</head>
<body>
<h3>分别为修改大小后的图像、原始图像</h3>
<img src="8-1.jpg" border="2" height="200" width="200" >
<img src="8-1.jpg">
</body>
</html>
【运行效果】
运行这段代码，可以看到设置了高度的图片大小改变的效果，如图7-21所示。

[img]http://www.tu265.com/di-c83df40fa1a12d52a02a23a6ff5033de.png[/img]

26 楼

lili456 [专家分：0] 发布于 2012-06-07 11:12:00

7.6.4  图像的间距——hspace、vspace
使用hspace、vspace属性可以设置图像与文字之间的水平距离和垂直距离，通过调整间距，可以改变文字和图像的排版，看上去更加协调和合理。
【标签说明】
<img src="图像文件的地址" hspace="水平间距" vspace=“垂直距离”>
说明： src是图像文件的地址，水平间距hspace属性和垂直间距vspace的单位是像素。
【上机实战】
<html >
<head>
<title>设置图像间距</title>
</head>
<body>
默认间距
<img src="8-1.jpg"  border="2"height="120" width="150" >
图像间距调整
<img src="8-1.jpg"  border="2" hspace="30" vspace="20" height="120" width="150" >
</body>
</html>
【运行效果】
运行代码的效果如图7-22所示，其中左边图像没有设置间距，图片和文字之间紧紧连在一起；在右边图像设置了水平间距30像素的，垂直间距20像素，图像与文字就明显有了间距。

[img]http://www.tu265.com/di-9b71f80e68a211c398ce0183487bb502.png[/img]

27 楼

lili456 [专家分：0] 发布于 2012-06-07 11:13:00

7.6.5  图像的相对对齐方式——align
图像在文件中的对齐方式包括绝对对齐方式和相对对齐方式，align属性用来设置图像和文字之间的对齐方式。
【标签说明】
<img src="图像文件的地址" align="相对文字的对齐方式">
说明：在该语法中，align的取值见表7-2所示。

[img]http://www.tu265.com/di-1cbe22f2c5f9785027007296e5b5af72.png[/img]
在表中，Netscape支持texttop、baseline、absmiddle、absbottom的取值。
【上机实战】
<html >
<head>
<title>设置图像对齐方式</title>
</head>
<body>
居中对齐
<img src="8-1.jpg"  border="2"height="120" width="150" align="absmiddle" >
<p>文字顶端对齐
<img src="8-1.jpg"  border="2"  height="120" width="150"  align="texttop">
</body>
</html>

28 楼

lili456 [专家分：0] 发布于 2012-06-07 11:14:00

【运行效果】
运行这段代码，可以看到在文字与图像的相对位置的变化效果，如图7-23所示。

[img]http://www.tu265.com/di-714b4555b167f711c1063ba3ceb36451.png[/img]

29 楼

lili456 [专家分：0] 发布于 2012-06-07 11:15:00

第14章 CSS控制元素的背景
网页中元素的背景通常包括背景颜色和背景图像，在前面的章节中介绍了使用HTML标签相关属性设置元素背景颜色和背景图像的方法，这种方式只能针对单个元素实现，如果希望对于同一类元素使用相同的背景颜色或者背景图像，使用CSS实现效果更好，代码更加简洁和易于维护。本章详细介绍使用CSS样式控制背景属性，包括背景颜色的设置和背景图片的应用。
14.1 设置背景颜色——background-color
在CSS中设置背景颜色的属性是background-color，该属性可以用来设置页面的背景，也可以用来设置其他元素的背景，如表格和层等。
【标签说明】
background-color:颜色代码|颜色名称
说明：颜色代码十六进制代码来表示颜色，也可直接使用英文颜色名称。
【上机实战】
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS控制背景</title>
<style type="text/css">
.bg1{ background-color:#FFCCFF}
.bg2{ background-color:#99CCCC}
</style>
</head>
<body class="bg2">
<div class="bg1">背景颜色设置</div>
</body>
</html>
【运行效果】
在上述代码中，为页面设置了蓝绿色背景，为层表格设置了粉色的背景，运行效果如图14-1所示。

[img]http://www.tu265.com/di-cf0676de57fb53f246d8bbb1bcff9b29.png[/img]

30 楼

lili456 [专家分：0] 发布于 2012-06-07 11:16:00

14.2 设置背景图像
页面中的元素背景可以使用颜色，也可以使用图像进行设置。使用图像作为元素背景，需要设置图像的源文件和其他一些属性。
14.2.1 背景图像——background-image
使用图像作为元素背景，最基本的一个要求就是要有图像的源文件，设置背景图像的源文件地址需要使用background-image属性。
【标签说明】
background-image:url(源文件地址)
说明：源文件地址可以是相对地址，也可以是绝对地址，甚至可以使用http网络地址。
【上机实战】
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS控制背景</title>
<style type="text/css">
.bg1{ background-color:#FFCCFF}
.bg2{ background-image:url(userbg.jpg)}
</style>
</head>
<body class="bg2">
<div class="bg1">背景颜色设置</div>
</body>
</html>
【运行效果】
运行上述代码，其效果如图14-2所示。

[img]http://www.tu265.com/di-f6a092a4243971ef4d4189d677f326cc.png[/img]

我来回复

您尚未登录，请登录后再回复。点此登录或注册

主题：脑动力：HTML+CSS标签速查效率手册书连载

回复列表（共35个回复）

我来回复

程序员工具箱 new

代码片段

本版新帖

主题：脑动力：HTML+CSS标签速查效率手册 书连载

回复列表 （共35个回复）

我来回复

程序员工具箱 new

代码片段

本版新帖

主题：脑动力：HTML+CSS标签速查效率手册书连载

回复列表（共35个回复）