CSS 網頁布局排版實例

2024-07-11 08:40:10

字體：大中小

來源：轉載

供稿：網友

代碼如下：

<br /><html><br /><head><br /><style type=”text/css”><br /><!–<br />body {<br />margin:0px;<br />font-size:13px;<br />font-family:Arial;<br />}<br />#container{<br />position:relative;<br />width:100%;<br />}<br />#banner{<br />height:80px;<br />border:1px solid #000000;<br />text-align:center;<br />background-color:#a2d9ff;<br />padding:10px;<br />margin-bottom:2px;<br />}<br />#content{<br />float:left;<br />text-align:center;<br />padding-right:200px; /* 內容往回擠200px */<br />}<br />#links{<br />float:right;<br />width:200px;<br />border:1px solid #000000;<br />margin-left:-200px; /* 強行往左拉回200px */<br />text-align:center;<br />}<br />#footer{<br />clear:both; /* 不受float影響 */<br />text-align:center;<br />height:30px;<br />border:1px solid #000000;<br />}<br />–><br /></style><br /><title>CSS排版</title><body><br /><div id=”container”><br /><div id=”banner”>banner</div><br /><div id=”content”><br /><div class=”blog”><br /><div class=”date”>date</div><br /><div class=”blogcontent”><br />content content content content content content content content content content<br><br />content content content content content content content content content content<br><br />content content content content content content content content content content<br><br />content content content content content content content content content content<br><br />content content content content content content content content content content<br><br />content content content content content content content content content content<br><br />content content content content content content content content content content<br><br />content content content content content content content content content content<br><br />content content content content content content content content content content<br><br />content content content content content content content content content content<br><br />content content content content content content content content content content<br><br />content content content content content content content content content content<br><br />content content content content content content content content content content<br><br />content content content content content content content content content content<br><br /></div><br /></div><br /><div class=”others”>others</div><br /></div><br /><div id=”links”><br /><div class=”calendarhead”>links<br>links<br>links<br>links</div><br /><div class=”calendartable”>links<br>links<br>links<br>links</div><br /><div class=”side”>links<br>links<br>links<br>links</div> </SPAN> </div> </div> <div id="iwvjtn8m0" class=page1> <p align="center" class="pageLink"></p> </div> <div id="iwvjtn8m0" class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1343362.html'>CSS對表格單元格強制換行和不換行</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1343364.html'>用CSS樣式描述表格Table邊框</a></div> <br> <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><strong>發表評論</strong></td> <td align="right"><a href="/e/pl/?classid=215&id=1343363">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1343363&down=2"></script></span>條評論</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">

學習交流