google、netvibes、wordpress对边框边缘的处理
Monday, October 9th, 2006google的：
<style>
body, td {
font-family: arial,sans-serif;
font-size:83%;
line-height:126%;
}
</style>
<table cellspacing=0 cellpadding=3 border=0 width=700px>
<tr>
<td width=55% valign=top>
</td>
<td>
<div style="padding:3px; border:1px solid #C3D9FF; width:100%;">
<div style="background-color:#E8EEFA; padding:1ex .5em; text-align:center">
<font size="+0"><b>帐户</b></font>
<table cellspacing=0 cellpadding=2 border=0>
<tr>
<td align=right>用户名：</td>
<td><input name="ACCT_NAME" type="text" size=24 value=""></td>
</tr>
<tr>
<td align=right>密码：</td>
<td><input name="ACCT_PSSW" type="password" size=24 ></td>
</tr>
<tr height=12><td></td><td></td></tr>
</table>
是否具有 Google 帐户？<br><a target="_blank" href="https://www.google.com/accounts/NewAccount?hl=zh_CN">立即创建帐户</a>
</div>
</div>
</td>
</tr>
</table>
body, td {
font-family: arial,sans-serif;
font-size:83%;
line-height:126%;
}
</style>
<table cellspacing=0 cellpadding=3 border=0 width=700px>
<tr>
<td width=55% valign=top>
</td>
<td>
<div style="padding:3px; border:1px solid #C3D9FF; width:100%;">
<div style="background-color:#E8EEFA; padding:1ex .5em; text-align:center">
<font size="+0"><b>帐户</b></font>
<table cellspacing=0 cellpadding=2 border=0>
<tr>
<td align=right>用户名：</td>
<td><input name="ACCT_NAME" type="text" size=24 value=""></td>
</tr>
<tr>
<td align=right>密码：</td>
<td><input name="ACCT_PSSW" type="password" size=24 ></td>
</tr>
<tr height=12><td></td><td></td></tr>
</table>
是否具有 Google 帐户？<br><a target="_blank" href="https://www.google.com/accounts/NewAccount?hl=zh_CN">立即创建帐户</a>
</div>
</div>
</td>
</tr>
</table>
netvibes的：
<style>
.moduleHeader{
background: #EFF5FF url(img/blue.png) repeat-x left bottom;
}
.moduleGroup{
background-image: url(img/sidebar.png);
background-repeat: repeat-x;
}
.divColonne{
float:left;
}
.module{
border: 3px solid #ECECEC;
background: #FFF;
margin: 5px;
}
.moduleFrame{
border: 1px solid #889DFF;
overflow: hidden;
background: #FFF;
}
.moduleHeader{
cursor: move;
background: #EFF5FF;
height: 1.8em;
min-height: 20px;
overflow: hidden;
}
.moduleHeader .showHide{
width: 0;
height: 16px;
cursor: pointer;
float: left;
padding: 2px 2px 0 2px;
}
.moduleHeader .title{
font-weight: bold;
padding-left: 4px;
line-height: 1.8em;
color: #00368F;
overflow: hidden;
display: inline;
}
.moduleContent{
clear: both;
padding: 7px;
background: #FFF;
}
ul {
padding-left: 5px;
}
li {
list-style-type: none;
background: transparent url(img/arrowList.gif) no-repeat left 0.5ex;
margin-bottom: 2px;
padding-left: 10px;
}
</style>
<div colnum="2" class="divColonne" style="min-height: 1px; width: 33%; display: block;">
<div style="display: block; left: 0px; top: 0px; visibility: visible;" class="module">
<div class="moduleFrame moduleunHighlight">
<div class="moduleHeader">
<div style="background-repeat: no-repeat; background-position: 3px 2px;" class="title"><a href="http://blog.netvibes.com/" target="_blank">Netvibes.com News</a> <a href="" title="Read All"><span class="unread">(4)</span></a>
</div>
</div>
<div style="display: block;" class="moduleContent">
<div>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><ul class="nv-feedList"><li class="read" url="http://blog.netvibes.com/" itemnum="6"><a href="http://blog.netvibes.com/" target="_blank">Netvibes updates the digg module</a></li></ul>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
.moduleHeader{
background: #EFF5FF url(img/blue.png) repeat-x left bottom;
}
.moduleGroup{
background-image: url(img/sidebar.png);
background-repeat: repeat-x;
}
.divColonne{
float:left;
}
.module{
border: 3px solid #ECECEC;
background: #FFF;
margin: 5px;
}
.moduleFrame{
border: 1px solid #889DFF;
overflow: hidden;
background: #FFF;
}
.moduleHeader{
cursor: move;
background: #EFF5FF;
height: 1.8em;
min-height: 20px;
overflow: hidden;
}
.moduleHeader .showHide{
width: 0;
height: 16px;
cursor: pointer;
float: left;
padding: 2px 2px 0 2px;
}
.moduleHeader .title{
font-weight: bold;
padding-left: 4px;
line-height: 1.8em;
color: #00368F;
overflow: hidden;
display: inline;
}
.moduleContent{
clear: both;
padding: 7px;
background: #FFF;
}
ul {
padding-left: 5px;
}
li {
list-style-type: none;
background: transparent url(img/arrowList.gif) no-repeat left 0.5ex;
margin-bottom: 2px;
padding-left: 10px;
}
</style>
<div colnum="2" class="divColonne" style="min-height: 1px; width: 33%; display: block;">
<div style="display: block; left: 0px; top: 0px; visibility: visible;" class="module">
<div class="moduleFrame moduleunHighlight">
<div class="moduleHeader">
<div style="background-repeat: no-repeat; background-position: 3px 2px;" class="title"><a href="http://blog.netvibes.com/" target="_blank">Netvibes.com News</a> <a href="" title="Read All"><span class="unread">(4)</span></a>
</div>
</div>
<div style="display: block;" class="moduleContent">
<div>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><ul class="nv-feedList"><li class="read" url="http://blog.netvibes.com/" itemnum="6"><a href="http://blog.netvibes.com/" target="_blank">Netvibes updates the digg module</a></li></ul>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
wordpress的：
<style type="text/css" media="screen">
body {
background: url("http://www.cswiki.com/blog/wp-content/themes/default/images/kubrickbgcolor.jpg");
}
#header {
background: url("http://www.cswiki.com/blog/wp-content/themes/default/images/kubrickheader.jpg") no-repeat bottom center;
margin: 0 !important;
margin: 0 0 0 1px;
padding: 1px;
height: 198px;
width: 758px;
}
</style>
<div id="header">
</div>
body {
background: url("http://www.cswiki.com/blog/wp-content/themes/default/images/kubrickbgcolor.jpg");
}
#header {
background: url("http://www.cswiki.com/blog/wp-content/themes/default/images/kubrickheader.jpg") no-repeat bottom center;
margin: 0 !important;
margin: 0 0 0 1px;
padding: 1px;
height: 198px;
width: 758px;
}
</style>
<div id="header">
</div>
wordpress居然是用图片处理的效果，google和netvibes使用的是多个DIV的嵌套关系产生的效果。