一列固定宽度布局和背景图片绝对定位

重塑我的学习笔记网页：固定宽度与背景图片定位

你是否曾经想过拥有一款固定宽度、背景图片绝对定位的网页，用来记录你的学习笔记呢？这个想法非常棒！今天我就为你构建了一个这样的网页。

我们需要在HTML部分的body标签之间编写一个DIV标签，为其赋予一个独特的ID——layout。就像这样：

接下来，我们要为这个页面编写CSS代码。为body设置样式。我们设定背景图片，并让它固定不动，不论页面如何滚动，背景图片都会保持原位。我们选择了背景图片并禁止其重复，同时定位在页面的左下角：

body {

margin: 0px;

padding: 0px;

background-attachment: fixed;

background-image: url(images/tupian/a017.JPG);

background-repeat: no-repeat;

background-position: left bottom;

}

然后，我们为layout编写CSS代码。除了确定其宽度和高度外，我们还对其进行了绝对定位，并设定了上下左右的边框距离。为了缩小右上角的背景图片，我们甚至使用了负数设置。我们还为这个页面设定了字体、字号、颜色以及行高：

layout {

height: 480px;

width: 720px;

margin-top: 20px;

margin-right: 30px;

margin-bottom: 20px;

margin-left: 150px;

padding: 40px;

background-image: url(images/tupian/a017-2.jpg);

background-position: right -100px;

background-repeat: no-repeat;

border: thick double F79A94;

font-family: "宋体";

font-size: 9pt;

color: 993300;

line-height: 150%;

}

如果你想要让网页居中显示，只需将上述的四个margin值改为"margin: 0px auto;"即可。这样你就可以轻松拥有一款固定宽度、背景图片绝对定位的网页，用它来记录你的学习笔记吧！