當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

传统网站与Web标准——表格布局实例

發(fā)布時(shí)間：2025/3/20 编程问答 60 豆豆

生活随笔收集整理的這篇文章主要介紹了传统网站与Web标准——表格布局实例小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

步驟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

/* Global Styles */body {margin:0px;}#logo {font:14px Arial, Helvetica, sans-serif;color: #FF9900;letter-spacing:.5em;line-height:30px;}#tagline { font:11px Arial, Helvetica, sans-serif;color: #FF9900;letter-spacing:.2em;line-height:14px;}

四、知識(shí)點(diǎn)：

（一）<td> 標(biāo)簽的 nowrap 屬性 :

規(guī)定表格單元格中的內(nèi)容不換行，屬性行為與很多參考資料提的table、td的width屬性無(wú)關(guān)。

（二）em:

em指字體高，任意瀏覽器的默認(rèn)字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。為了簡(jiǎn)化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說(shuō)只需要將你的原來(lái)的px數(shù)值除以10，然后換上em作為單位就行了。em有如下特點(diǎn)：
1. em的值并不是固定的；
2. em會(huì)繼承父級(jí)元素的字體大小。

五、技術(shù)要點(diǎn)：

?1、表格總寬度不固定，具體寬度由第4個(gè)單元格100%的設(shè)置補(bǔ)充，整個(gè)寬度充滿屏幕；

2、頁(yè)邊距在樣式表中由標(biāo)簽body設(shè)置；

3、字體在樣式表中由標(biāo)簽#logo、#tagline設(shè)置；

4、布局表格屬性在網(wǎng)頁(yè)中設(shè)置<table border="0" cellspacing="0" cellpadding="0">；

5、單元格中插入圖片時(shí)，單元格的寬度應(yīng)該由圖片寬度決定，兩個(gè)圖片高度應(yīng)該一致。

步驟2：

一、效果：

二、HTML

三、CSS

無(wú)對(duì)應(yīng)的樣式

四、要點(diǎn)

七條紅黃相間的線而已，每行中插入的是一個(gè)像素寬高，顏色透明的圖片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

#navigation td {border-bottom: 1px solid #FF9900}#navigation a {font:11px Arial, Helvetica, sans-serif;color: #FF9900;line-height:16px;letter-spacing:.1em;text-decoration: none;display:block;padding:8px 6px 8px 22px;} #navigation a:hover {color:#FFFFCC;font-weight:bold;background: url("mm_bullet_yellow.gif") 10px 50% no-repeat;} .navText {font:11px Georgia, Times New Roman, Times, serif;color: #1F2669;line-height:16px;letter-spacing:.1em;text-decoration: none;}

四、要點(diǎn)：

?1、背景在<body>標(biāo)簽中設(shè)置<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

.pageName{font:18px Arial, Helvetica, sans-serif;color: #FFFF00;line-height:24px;letter-spacing:.3em;} .bodyText {font:11px Arial, Helvetica, sans-serif;color:#FFFF00;line-height:22px;margin-top:0px;letter-spacing:.1em;}

步驟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

.columnHeader {font: 11px Arial, Helvetica, sans-serif;color: #FF080E;line-height:18px;letter-spacing:.05em;} .smallText {font:10px Arial, Helvetica, sans-serif;color:#333333;}

轉(zhuǎn)載于:https://www.cnblogs.com/WestGarden/archive/2012/08/31/3138336.html

總結(jié)

以上是生活随笔為你收集整理的传统网站与Web标准——表格布局实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： C++Builder函数集（文件操作、获
下一篇： EBS默认的登录账户和密码