| 很多时候明明感觉应该自适应的效果, 可是在不同浏览器里却取得不同的结果, 这个时候最令人伤神。 有时利用“相对位置”和“绝对位置”方法来确定DIV的方位, 也是个很不错的想法, 至于如何使用,使用那种方法, 还是要看个人习惯以及网页整体要求。 来看看下面的方法,从中会把握自适应的一种好方法。
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="2columngray.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="mainheader"> <div class="blank2"></div> <!-- for decoration only --> </div> <div id="header"> <p>Header content goes here</p> <p><a href="2col_left.htm">Left </a>column Longest</p> <p><a href="2col_right.htm">Right</a> column Longest</p> <p><a href="2col_main.htm">No</a> column longest</p> <p><a href="http://www.pmob.co.uk/temp/3colfixedtest_4.htm">Back</a> to main 3 column demo</p> </div> <div id="mainnav"> <p>Navigation</p> </div> <div id="sidebar"> <p>Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : </p> </div> <div id="content"> <p>Footer stays at the bottom of the window unless the content is longer then it stays at the bottom of the document.</p> <p>Footer stays at the bottom of the window unless the content is longer then it stays at the bottom of the document.</p> </div> <div id="clearfooter"></div> <!-- to clear footer --> <div id="footer"> <div class="divider1"></div> <div class="blank"></div> <!-- for decoration only --> <p>Footer Content</p> </div> </div> </body> </html> CSS
/* commented backslash hack v2 \*/ html, body{height:100%;} /* end hack */ html,body { margin: 0; padding: 0; } body { font: x-small arial, hevetica, sans-serif; text-align: center; color: #505367; background-color: #e0e0e0; }
#container { margin-left:auto; margin-right:auto; width: 730px; min-height:100%; text-align: left; background: #CEE0E1 url(images/toddbg.gif) repeat-y right top;
|
| 共2页: 上一页 1 [2] 下一页 |
评论加载中…