脑动力：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个回复）

31 楼

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

14.2.2 背景图像的平铺——background-repeat
当作为背景的图像小于设置的元素时，这时候默认情况下图像会平铺显示在页面中，在水平和垂直方向上将重复出现，如上例中的页面背景的效果。使用background-repeat属性可以设置图像的平铺属性。
【标签说明】
background-repeat:repeat|repeat-x|repeat-y|no-repeat
说明：图像的平铺属性可以设置为完全平铺、仅仅在x轴方向平铺、仅仅在y轴方向平铺和不平铺4种效果。其中，完全平铺是默认的图像平铺效果，属性值是repeat。
【上机实战】
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS控制背景</title>
<style type="text/css">
.bg1{
background-image:url(other.GIF);
background-repeat:repeat-x}
.bg2{
background-image:url(userbg.jpg);
background-repeat:repeat}
</style>
</head>
<body class="bg2">
<div class="bg1" style="height:100px">背景颜色设置</div>
</body>
</html>
【运行效果】
在这里div中的背景图像设置仅在x轴方向平铺，即设置的background-repeat属性值为repeat-x，网页的背景图像在x、y方向平铺，运行效果如图14-3所示。如果将代码中的background-repeat属性设置为repeat-y，则图像仅在y轴方向，即在垂直方向上平铺，效果如图14-4所示。

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

32 楼

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

14.2.3 背景图像滚动——background-attachment
背景图像滚动指背景图像相对于浏览器窗口来说，是固定的还是滚动的，即图像是否随浏览器的滚动而滚动。它的功能相当于HTML中的bgproperties标记。
【标签说明】
background-attachment: scroll | fixed
说明：设置为scroll，则背景图像随对象滚动，设置为fixed，则背景图像对于窗口的顶端是固定不动的，即背景图像的顶部总是会显示在窗口的顶端。
【上机实战】
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS控制背景</title>
<style type="text/css">
.bg1{
background-image:url(other.GIF);
background-repeat:repeat-y;
background-attachment:scroll}
.bg2{
background-image:url(userbg.jpg);
background-repeat: no-repeat;
background-attachment:fixed}
</style>
</head>
<body class="bg2">
<div class="bg1" style="height:250px">背景颜色设置</div>
</body>
</html>
【运行效果】
上述代码中，设置层背景的background-attachment的属性值为scroll，表示图像会随页面移动，图像的顶部不一定显示在页面的顶端；网页的背景图像background-attachment的属性值为fixed，background-repeat属性值为norepeat，运行该程序的效果如图14-6所示。

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

33 楼

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

14.2.4 图像位置——background-position
默认情况下，背景图像都是从元素的左上角开始显示的，使用background-position属性可以更改背景图像的开始显示位置。
【标签说明】
background-position:位置的具体值
说明：设置图像位置的属性值可以有多种形式，可以是x、y轴方向的百分比或绝对值，也可以使用表示位置的英文名称。具体取值及含义如表14-1所示。

[img]http://www.tu265.com/di-da10678e10c219353fbce318f0b47cea.png[/img]
在这些设置方式中，百分比和绝对数值可以混用，即前面是百分比，后面可以是数值；同样前面是数值，后面也可以是百分比。
【上机实战】
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS控制背景</title>
<style type="text/css">
.bg1{
background-image:url(other.GIF);
background-repeat:repeat-y;
background-position:top}
.bg2{
background-image:url(userbg.jpg);
background-repeat: no-repeat;
background-attachment:fixed}
</style>
</head>
<body class="bg2">
<div class="bg1" style="height:250px">背景颜色设置</div>
</body>
</html>
【运行效果】
在上述代码中，层的背景图像的位置被设置为顶端对齐，运行效果如图14-7所示

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

34 楼

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

14.3 背景的复合属性——background
从上述的内容可以看出，设置与背景相关的属性都以background开始。与字体设置属性相同，在CSS中，背景也可以很简单地通过background复合属性一次性设置。
【标签说明】
background: 取值
说明：在这里可以直接设置各种背景属性值，之间用空格隔开。
【上机实战】
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS控制背景</title>
<style type="text/css">
.bg1{ background:url(userbg.jpg) center repeat }
.bg2{ background:url(other.GIF) top no-repeat}
</style>
</head>
<body class="bg1" >
<div class="bg2" style="height:250px">背景设置</div>
</body>
</html>
【运行效果】
在上述代码中，设置了两种背景，一个应用于页面，采用背景图像，居中平铺显示；另一种背景应用于层，设置了背景图像，位置从顶端开始，不重复显示。运行上述代码，其效果如图14-11所示。

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

35 楼

xiao-min [专家分：0] 发布于 2012-06-13 08:52:00

楼主说的真的很不错，对我有很大的帮助呢
我现在学[url=http://www.cpbdqn.com]网络工程师[/url]呢，我很喜欢
网站方面的东西，想深入学习呢，楼主要加油哦(*^__^*)

我来回复

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

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

回复列表（共35个回复）

我来回复

程序员工具箱 new

代码片段

本版新帖

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

回复列表 （共35个回复）

我来回复

程序员工具箱 new

代码片段

本版新帖

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

回复列表（共35个回复）