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

一列固定宽度网页用于我的学习笔记，很不错吧。这张网页，我只是尝试了一下背景图片的绝对定位设置。 1.HTML部分只需在<body ></body >之间编写一个DIV标签，给DIV标签使用layout作为ID名称即可：<div id="layout">这里写入文章内容</div>； 2.接下来先为body编写CSS代码：（方法还是和“我的第一张css+div布局网页”一样，用鼠标编代码，呵呵！） 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;"即可。

　　推荐阅读

　　CSS教程:创建性感的CSS样式表

原文名称:Creating Sexy Stylesheets原文地址:http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets 作为一个CSS方面的专家,所做的不只是记住选择符(Selectors)那么简单,提升样式表的效用和>>>详细阅读

本文标题：一列固定宽度布局和背景图片绝对定位的实现代码

地址：http://www.17bianji.com/kaifa2/CSS/17137.html

1/2 1