传统网站与Web标准——表格布局实例
生活随笔
收集整理的這篇文章主要介紹了
传统网站与Web标准——表格布局实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
步驟1：
一、效果
二、HTML
<table border="0" cellspacing="0" cellpadding="0"><tr bgcolor="#220103"><td width="215" rowspan="2" colspan="2"><img src="mm_spa_photo1.jpg" alt="Header image" width="215" height="108" border="0" /></td><td width="355" colspan="2" height="54" nowrap="nowrap" id="logo" valign="bottom">INSERT WEBSITE NAME</td><td width="176" rowspan="2"><img src="mm_spa_photo2.jpg" alt="header image 2" width="176" height="108" border="0" /></td><td width="100%" rowspan="2">?</td></tr><tr bgcolor="#220103"><td height="54" colspan="2" nowrap="nowrap" id="tagline" valign="top">optional tagline here</td></tr> </table>
三、CSS
四、知識點：
（一）<td> 標簽的 nowrap 屬性 :
規定表格單元格中的內容不換行，屬性行為與很多參考資料提的table、td的width屬性無關。
（二）em:
em指字體高，任意瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。em有如下特點：
1. em的值并不是固定的；
2. em會繼承父級元素的字體大小。
?
五、技術要點：
?1、表格總寬度不固定，具體寬度由第4個單元格100%的設置補充，整個寬度充滿屏幕；
2、頁邊距在樣式表中由標簽body設置；
3、字體在樣式表中由標簽#logo、#tagline設置；
4、布局表格屬性在網頁中設置<table border="0" cellspacing="0" cellpadding="0">；
5、單元格中插入圖片時，單元格的寬度應該由圖片寬度決定，兩個圖片高度應該一致。
步驟2：
一、效果：
二、HTML
<tr bgcolor="#FF9900"><td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td></tr><tr bgcolor="#FF080E"><td colspan="6" style="height: 2px"><img src="mm_spacer.gif" alt="" width="1" height="2" border="0" /></td></tr><tr bgcolor="#FF9900"><td colspan="6" style="height: 1px"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td></tr><tr bgcolor="#FF080E"><td colspan="6" style="height: 18px"><img src="mm_spacer.gif" alt="" width="1" height="18" border="0" /></td></tr><tr bgcolor="#FF9900"><td colspan="6" style="height: 1px"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td></tr><tr bgcolor="#FF080E"><td colspan="6" style="height: 2px"><img src="mm_spacer.gif" alt="" width="1" height="2" border="0" /></td></tr><tr bgcolor="#FF9900"><td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td></tr>
三、CSS
無對應的樣式
四、要點
七條紅黃相間的線而已，每行中插入的是一個像素寬高，顏色透明的圖片mm_spacer.gif
?
步驟3：
一、效果
二、HTML
<tr><td width="165" valign="top" id="navborder"><br /><table border="0" cellspacing="0" cellpadding="0" width="160" id="navigation"><tr><td width="160"><a href="javascript:;" class="navText">ABOUT US</a></td></tr><tr><td width="160"><a href="javascript:;" class="navText">THE SPA</a></td></tr><tr><td width="160"><a href="javascript:;" class="navText">TREATMENTS</a></td></tr><tr><td width="160"><a href="javascript:;" class="navText">CLASSES</a></td></tr><tr><td width="160"><a href="javascript:;" class="navText">CONTACT</a></td></tr></table> </td></tr>
三、CSS
四、要點：
?1、背景在<body>標簽中設置<body bgcolor="#990000" background="mm_bg_red.gif">，背景線圖片mm_bg_red.gif；
2、navborder、#navheader？？
?
步驟4：
一、效果
二、HTML
<td width="50"><img src="images/mm_spacer.gif" alt="" width="50" height="1" border="0" /></td><td width="305" valign="top"><img src="images/mm_spacer.gif" alt="" width="305" height="1" border="0" /><br /><br /><br /><table border="0" cellspacing="0" cellpadding="0" width="305"><tr><td class="pageName">WELCOME MESSAGE</td></tr><tr><td class="bodyText"><p>This Home Page layout makes a great starting point for your website. Virtually all of the content is customizable, including the images, the text, and the links. You can decide whether to keep the existing graphics or swap them out for pictures of your own.</p><p>The text on this page is intended to help you jumpstart your design by suggesting the sort of content you may want to include, but don't let it limit you. The same is also true for the link text - feel free to change the names of the links to better suit your particular needs. If you have any questions about using Contribute to edit these pages, refer to the Read Me file included with the download or to the Contribute Help System. Have fun and make a great website!</p></td></tr></table><br /><br /></td><td width="50"><img src="images/mm_spacer.gif" alt="" width="50" height="1" border="0" /></td><!--右側單元格--></tr><tr><td width="165">?</td><td width="50">?</td><td width="305">?</td><td width="50">?</td><td width="190">?</td><td width="100%">?</td></tr> </table>
三、CSS
?
步驟5：
一、效果
?二、HTML
<td width="190" valign="top"><br /><table border="0" cellspacing="0" cellpadding="0" width="190" bgcolor="#FFFFCC"><tr><td colspan="3" class="columnHeader" align="center"><br />FEATURED PRODUCTS<br /><br /></td></tr><tr><td width="40"><img src="images/mm_spacer.gif" alt="" width="20" height="1" border="0" /></td><td width="110" class="smallText"><br /><p><img src="images/mm_product_sm.gif" alt="product image 1" width="110" height="110" vspace="6" border="0" /><br />Lorem ipsum dolor sit amet consetetur.<br /><a href="javascript:;">read more ></a></p><p><img src="images/mm_product_sm.gif" alt="product image 2" width="110" height="110" vspace="6" border="0" /><br />Lorem ipsum dolor sit amet consetetur.<br /><a href="javascript:;">read more ></a><br /></p><br /></td><td width="40">?</td></tr></table></td><td width="100%">?</td>
三、CSS
?
?
轉載于:https://www.cnblogs.com/WestGarden/archive/2012/08/31/3138336.html
總結
以上是生活随笔為你收集整理的传统网站与Web标准——表格布局实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C++Builder函数集（文件操作、获
- 下一篇： EBS默认的登录账户和密码