一列固定寬度布局和背景圖片絕對定位

2024-07-11 08:44:11

字體：大中小

供稿：網(wǎng)友

一列固定寬度網(wǎng)頁用于我的學(xué)習(xí)筆記，很不錯(cuò)吧。這張網(wǎng)頁，我只是嘗試了一下背景圖片的絕對定位設(shè)置。一列固定寬度網(wǎng)頁用于我的學(xué)習(xí)筆記，很不錯(cuò)吧。這張網(wǎng)頁，我只是嘗試了一下背景圖片的絕對定位設(shè)置。
1.HTML部分只需在<body ></body >之間編寫一個(gè)DIV標(biāo)簽，給DIV標(biāo)簽使用layout作為ID名稱即可：<div id="layout">這里寫入文章內(nèi)容</div>；
2.接下來先為body編寫CSS代碼：（方法還是和“我的第一張css div布局網(wǎng)頁”一樣，用鼠標(biāo)編代碼，呵呵！）
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代碼，確定寬高度外，我進(jìn)行了絕對定位，設(shè)定了上下左右邊框距離，為縮小右上角的背景圖片，進(jìn)行了負(fù)數(shù)設(shè)置。
#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%;
}
如果需要一列固定寬度居中設(shè)置，只需把上面四個(gè)margin值改為："margin: 0px auto;"即可。

上一篇：WEB2.0的五個(gè)技術(shù)點(diǎn):單手定則

下一篇：CSS也要語義化