昨天有網友提問“如何在html頁面四角放置圖片”，下面就是答案，供這位網友參考。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>瀏覽器視窗四角固定背景代碼</title>
6 <style type="text/css">
7 html{
8 _overflow:hidden;/*for ie6*/
9 }
10 body {
11 margin:0;
12 padding:0;
13 _height:100%;/*for ie6*/
14 _overflow:auto;/*for ie6*/
15 }
16 .mainbox {
17 position:relative;
18 _position:inherit;/*for ie6*/
19 margin:20px;
20 display:block;
21 height:2000px;
22 background:#e2e2e2;
23 }
24 .topleft, .topright, .bottomleft, .bottomright {
25 position:fixed;
26 width:100px;
27 height:100px;
28 background-color:#990;
29 _position:absolute;/*for ie6*/
30 _z-index:-1;/*for ie6*/
31 }
32 .topleft {
33 left:0;
34 top:0;
35 }
36 .topright {
37 right:0;
38 top:0;
39 }
40 .bottomleft {
41 left:0;
42 bottom:0;
43 }
44 .bottomright {
45 right:0;
46 bottom:0;
47 }
48 </style>
49 </head>
50 <body>
51 <div class="topleft"></div>
52 <div class="topright"></div>
53 <div class="bottomleft"></div>
54 <div class="bottomright"></div>
55 <div class="mainbox">這裡是內容地區填充文字</div>
56 </body>
57 </html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
