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

创建一列固定宽度的网页用于学习笔记是一个很棒的想法。这种设计不仅实用，而且充满个性化。在这张网页的制作过程中，我尝试了对背景图片进行绝对定位设置，效果令人惊喜。

一、HTML部分相当简单。你只需在和之间编写一个DIV标签，并为这个标签赋予ID名称“layout”。例如：

二、接下来，我们为body编写CSS代码。方法与之前的“我的第一张css+div布局网页”类似，当然是通过鼠标进行编码，非常便捷！首先设置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;"即可。这种简单的修改将使你的网页布局更加符合现代设计趋势，为用户带来更好的视觉体验。这次尝试背景图片的绝对定位设置让我收获颇丰，期待未来能创造出更多个性化的网页作品。