下载掌阅APP，畅读海量书库
立即打开
上一节我们学习了头部信息的各种设置，本节学习主体的设置。主体，即HTML结构中的<body></body>部分，这部分的内容是直接显示在页面中的。本节讲述的是<body>标签的部分属性设置，正因为body对设置可以马上显示，读者可以边学习边动手尝试。
设置<body>的bgcolor属性中可网页的整体背景色，创建一个网页文件，命名为body.htm，编写代码如代码3.5所示。
代码3.5 主体背景设置：body.htm
代码3.5的页面背景色采用的＃cf0000，这是一种比较亮的红色，读者可以根据需要调配适当的背景色。
除了设置<body>的背景色以外，通过background属性还可以设置<body>的背景图片。根据不同应用的需要，可以设置各种重复方式的图片背景。创建一个网页文件，命名为body_bg.htm，编写代码如代码3.6所示。
代码3.6 主体背景图片设置：body_bg.htm
代码3.5的页面背景图片路径采用相对文档路径，test.jpg位于body_bg.htm同一级目录下，默认情况下为水平方向和垂直方向重复。测试效果如图3.3所示。
如果要对背景图像有更多的设置，可以使用style属性创建一个网页文件，命名为body_bg2.htm，编写代码如代码3.7所示。
图3.3 主体背景图片设置
代码3.7 主体背景图片位置设置：body_bg2.htm
Style，中文意思为“风格、样式”。<body>用style设置背景可以更加灵活，测试body_bg.htm，可以发现背景图片水平方向为页面中央，垂直方向为页面底部。测试效果如图3.4所示。
通过left（左）、right（右）、top（顶部）、bottom（底部）、center（中央）分别组合，可以灵活地设置页面背景图片的位置。
注意 ：设置背景位置要加上no-repeat，以代表不产生任何重复。
如果读者希望背景图片单向重复，那么使用style属性的background更加方便，修改body_bg2.htm如代码3.8所示。
代码3.8 主体背景图片重复设置：body_bg2.htm
测试效果如图3.5所示。
图3.4 主体背景图片位置设置
图3.5 主体背景图片重复设置
代码3.5的页面背景图片在水平方向发生了重复，可见repeat-x用于设置水平方向的图片重复。以此类推，repeat-y将使背景图片在垂直方向重复。
在某些网站应用中，背景图片为浮动位置，即不随滚动条位置的变化而变化。读者可以在<body>中使用bgproperties属性。接下来笔者将修改body_bg.htm如代码3.9所示。
代码3.9 主体背景图片浮动设置：body_bg.htm
测试效果如图3.6所示。
图3.6 主体背景图片浮动设置
读者可以拉动滚动条，图片不会发生相对位置变化。
注意 ：标签之间的多个属性用空格分隔。