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