DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 一列固定寬度布局和背景圖片絕對定位
一列固定寬度布局和背景圖片絕對定位
編輯:CSS進階教程     
   一列固定寬度網頁用於我的學習筆記,很不錯吧。這張網頁,我只是嘗試了一下背景圖片的絕對定位設置。

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;"即可。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved