CSS網頁實例利用box-sizing實現div仿框架結構實現代碼

2024-07-11 08:38:31

字體：大中小

來源：轉載

供稿：網友

[參與測試的瀏覽器：IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[操作系統：Windows]
先看代碼：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <meta name=”author” content=”Chomo” /> <link rel=”start” href=”http://www.14px.com” title=”Home” /> <title>利用box-sizing實現div仿框架</title> <style type=”text/css”> * { margin:0; padding:0;} html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:100px 0; overflow:hidden;} html,body { height:100%;} .top { position:relative; margin-top:-100px; height:100px; background:#f60;} .side { position:relative; height:100%; background:#fc0; overflow:auto; width:200px; float:left; margin-right:0 !important; margin-right:-3px; overflow:auto;} .main { position:relative; overflow:auto; height:100%; background:#f30;} .bottom { position:relative; height:100px; background:#f60; clear:both;} </style> </head> <body> <div class=”top”> top </div> <div class=”side”> side </div> <div class=”main”> main </div> </div> <div id="iwvjtn8m0" class=page1> </div> <div id="iwvjtn8m0" class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1342901.html'>純CSS實現背景半透明文字不透明效果兼容IE6</a></div> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1342903.html'>必須知道的10個不常用HTML標簽</a></div> <script src=/d/js/acmsd/gao21.js></script>  </div> <div id="iwvjtn8m0" class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您沒什么話要說嗎？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td>發表評論</td> <td align="right"><a href="/e/pl/?classid=215&id=1342902">共有<script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1342902&down=2"></script>條評論</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用戶名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密碼: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">驗證碼: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名發表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">

學習交流