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 class=page1> <p align="center" class="pageLink"></p> </div> <div 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 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">

学习交流