刷脸支付系统代理：商务网站设计与制作
CSS设置背景色的显示效果
包子商务网站设计与制作
2．背景图
在HTML语言中，<body>标记的background属性可以设置网页的背景图。在CSS
中，背景图的设置更加灵活，除了可以为整个网页设置背景外，还可以为段落、行内元素等设
置背景图像。而且，在设置的内容是背景图时，还可以设置背景的重复效果、背景图出现的
位置，以及是否随网页滚动等多项内容。
格式：
其中，“图像文件”是指图像的URL，即图像所在的位置及文件名信息，形如URL( ima-
ges\bg.jpg)。“图像重复效果”的取值为repeat -x（水平方向上重复）、repeat -y（垂直方向
上重复）和no - repeat（不重复），默认情况下水平和垂直方向上均重复。“图像位置”具有多
种表示方法，可以是关键字、百分比、长度值等，常见的关键字有center、top、bottom、right、
left。background - attachment属性用来说明背景图是否随网页的滚动而滚动，默认值scroll
表示滚动，当设置为fixed时会禁止滚动。
用“记事本”编写如下代码并保存为3_3_15. htm文件。
通过浏览器查看，上面这段代码在IE 9中的显示结果如图3-31所示。
图3 -31 CSS设置背景图的显示效果
使用CSS实现网页的页面布局
早期的网页制作通常使用表格（< table>标记）来实现网页的页面布局，而当前则提倡
使用层和样式表实现网页的页面布局。
层是网页内容的一个容器，使用< div>标记实现，只要是能放置在网页中的内容，都可
以放置在层当中。层最主要的特性是它可以在网页上自由浮动，从而实现对网页元素的精
确定位。而且，层的位置可以重叠，可以任意地控制层的前后位置，显示或隐藏，这大大增强
了网页设计的灵活性。
格式：
<d土V>…<／div>
1．< table>布局页面和<div>布局页面对比
下面对比一下< table>布局页面和CSS布局页面的优缺点。
(1)使用表格进行页面布局会带来很多问题。比如，使用表格进行页面布局会把格式数
据混入网页的内容中，这会使得文件无谓地变大，而用户访问每个页面时都必须下载一次这
样的格式信息；也使得重新设计现有的站点和内容时会消耗更多的劳动力（且昂贵）；还极难
使整个站点保持视觉的一致性，花费也极高。基于表格的页面还大大降低了它对残疾人士
和用手机或PDA浏览信息的人群的亲和力。
(2)使用CSS进行网页布局有一些显著的优势：
①内容和显示分离，网页前台只需要显示内容就可以了，显示上的美术工作交给CSS
来处理。生成的HTML文件代码精简，打开更快。
②改版网站更简单容易。不用重新设计排版网页，甚至不用动原网站的任何HTML语
言和程序页面，只需要改动CSS文件就可以完成所有改版。对于门户网站来说，改版就像换
件衣服一样简单容易。
③搜索引擎更友好，排名更容易靠前。
盒模型是关系设计中排版定位的关键，网页中的容器都需遵循盒模型规范，如< div>、
<p>、<a>等。盒模型包含margm（外边距）、padding（内边距）、content（内容）、border（边
框）。盒模型的工作方式如图3 -32所示。
一一一
为了方便理解，盒模型可以转化为我们日常生活中的盒子（箱子）来理解。正是因为日
常生活中所见的盒子所具有的一些属性，盒模型也有，所以称为盒模型。盒模型中的内容是
盒子里装的东西，而内边距是怕盒子里装的东西损坏而添加的塑料泡沫或者其他抗震的辅
料，边框就是盒子本身，边界则是用来注释盒子的。比如，摆放的时候不能全部堆在一起，要
留一定空隙保持通风，同时也为了方便取出。
在网页设计上，内容常指文字、图片等元素，但也有可能是小盒子（div嵌套）。与现实生
活中的盒子不同的是，现实生活中盒内的东西一般不能大于盒子，否则盒子会被撑坏，而
CSS盒子具有弹性，里面的东西大过盒子本身时，盒子最多会被撑大，但是不会被损坏。
传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，
用什么字体、颜色，等等，然后再用Photoshop这类软件画出来，之后切成小图，最后通过设计
HTML语言生成页面，并用CSS排版。排版后主要考虑的是页面内容的语义和结构，因为
一个强CSS控制的网页做好后，可以轻松地调整想要的网页风格，况且CSS排版的另外一
个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。
2．块元素和内联元素
(1)块元素(block element)。块元素一般是其他元素的容器元素，通常从新的一行开
始，可以容纳内联元素和其他块元素。常见的块元素是段落标签<p>。<form>这个块元
素比较特殊，它只能用来容纳其他块元素。如果没有CSS的作用，块元素会顺序以每次另起
一行的方式一直往下排。而有了CSS就可以改变这种HTML语言的默认布局模式，把块元
素摆放到想要放置的位置上去，而不是每次都另起一行。需要指出的是，< table>标记也是
块元素的一种。若是基于良好的重构理念设计出的CSS布局页面源码，即使没有Web开发
400-611-0508
