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

2024-07-11 08:24:22

字體：大中小

來源：轉載

供稿：網友

一列固定寬度網頁用于我的學習筆記，很不錯吧。這張網頁，我只是嘗試了一下背景圖片的絕對定位設置。一列固定寬度網頁用于我的學習筆記，很不錯吧。這張網頁，我只是嘗試了一下背景圖片的絕對定位設置。
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教程:position屬性

下一篇：IE和Firefox瀏覽器CSS網頁布局不同點