网页分栏样式
今天看msdn,上面的页面都做的很好,羡慕不已,所以自己也试着做了下.
效果图
第一个和第二个都用到了div的圆角,网上很多这种代码,第一个的标题的背景色是从上往下渐变的,然后第三个就把渐变用的多一点了标题和整个背景都是,只是他们的渐变方向不同,感觉还可以呵呵.
下面是这三个的代码:
Code<html>
<head>
<style type="text/css">
u.corner u
{
height: 1px;
font-size: 1px;
display: block;
overflow: hidden;
text-decoration: none;
background-color: #E3E3E6;
}
u.corner u.h1
{
margin: 0px 5px;
background-color: #B4B4BC;
}
u.corner u.h2
{
margin: 0 3px;
border-left: solid 2px #B4B4BC;
border-right: solid 2px #B4B4BC;
background-color: #E3E3E6;
}
u.corner u.h3
{
margin: 0 2px;
border-left: solid 1px #B4B4BC;
border-right: solid 1px #B4B4BC;
background-color: #E3E3E6;
}
u.corner u.h4
{
margin: 0 1px;
height: 2px;
border-left: solid 1px #B4B4BC;
border-right: solid 1px #B4B4BC;
background-color: #E3E3E6;
}
u.cornertitle u
{
height: 1px;
font-size: 1px;
display: block;
overflow: hidden;
text-decoration: none;
background-color: #3A3A3A;
}
u.cornertitle u.h1
{
margin: 0px 5px;
background-color: #B4B4BC;
}
u.cornertitle u.h2
{
margin: 0 3px;
border-left: solid 2px #B4B4BC;
border-right: solid 2px #B4B4BC;
background-color: #3A3A3A;
}
u.cornertitle u.h3
{
margin: 0 2px;
border-left: solid 1px #B4B4BC;
border-right: solid 1px #B4B4BC;
background-color: #3A3A3A;
}
u.cornertitle u.h4
{
margin: 0 1px;
height: 2px;
border-left: solid 1px #B4B4BC;
border-right: solid 1px #B4B4BC;
background-color: #3A3A3A;
}
.csstitle
{
height:20px;
padding:3 0 0 10;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr= 'lightblue' , endColorStr= '#FFFFFF' , gradientType= '1' );
border-bottom: lightblue 1px solid;
}
</style>
<head>
<body>
<hr />
<table width="100%">
<tr>
<td width="50%" valign="top">
<div>
<u class="corner"><u class="h1"></u><u class="h2"></u><u class="h3"></u><u class="h4">
</u></u>
<div style="border-bottom: solid 1px #B4B4BC; border-left: solid 1px #B4B4BC; border-right: solid 1px #B4B4BC;">
<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#E3E3E6', endColorStr='#F3F3F3', gradientType='0');">
<div style="margin: 0 10 0 10; font-weight: bold;">
分栏效果一
</div>
</div>
<div style="margin: 10 10;">
<a style="text-decoration: none;" href="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a><br />
<a style="text-decoration: none;" href="a">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a><br />
<a style="text-decoration: none;" href="a">cccccccccccccccccccccccccccc</a>
</div>
</div>
</div>
<br />
<div>
<div style="border-bottom: solid 1px #B4B4BC; border-left: solid 1px #B4B4BC; border-right: solid 1px #B4B4BC;
border-top: solid 1px #B4B4BC;">
<div class="csstitle">
分栏效果三
</div>
<div style="width: 100%; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#E8F7F5', endColorStr='#FFFFFF', gradientType='0');">
<div style="margin: 10 10 10 10">
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
</div>
</div>
</div>
</div>
</td>
<td width="50%" valign="top">
<div>
<u class="cornertitle"><u class="h1"></u><u class="h2"></u><u class="h3"></u><u class="h4">
</u></u>
<div style="border-bottom: solid 1px #B4B4BC; border-left: solid 1px #B4B4BC; border-right: solid 1px #B4B4BC;">
<div style="width: 100%; background-color: #3A3A3A;">
<div style="margin: 0 10 0 10; font-weight: bold; color: White;">
分栏效果二
</div>
</div>
<div style="margin: 10 10;">
<a style="text-decoration: none;" href="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a><br />
<a style="text-decoration: none;" href="a">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a><br />
<a style="text-decoration: none;" href="a">cccccccccccccccccccccccccccc</a><br />
<a style="text-decoration: none;" href="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a><br />
<a style="text-decoration: none;" href="a">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a><br />
<a style="text-decoration: none;" href="a">cccccccccccccccccccccccccccc</a><br />
<a style="text-decoration: none;" href="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a><br />
<a style="text-decoration: none;" href="a">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a><br />
<a style="text-decoration: none;" href="a">cccccccccccccccccccccccccccc</a><br />
<a style="text-decoration: none;" href="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a><br />
<a style="text-decoration: none;" href="a">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a><br />
<a style="text-decoration: none;" href="a">cccccccccccccccccccccccccccc</a>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
本站文章除做特殊声明则一律属于原创，转载请注明出处
--周瑞喜(rain.zhou)
开源分享使人进步，使技术进步，使社会进步
