用内嵌样式创建出既定表格效果

云计算 waitig 553℃ 百度已收录 0评论

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>表格效果</title>
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
div{
border-color: #D3B18E;
border-style: solid;
border-width: 0;
}
.import{
border-width:7px;
width: 485px;
}
.a{
width: 153px;
height:282px;
float: left;
border-right-width:2px; 
}
.c{
width: 243px;
height: 282px;
float: left;

}
.b{
width: 85px;
height:282px;
float: left;
border-right-width:2px; 
}
.a1{
width: 153px;
height: 34px;
border-bottom-width:2px; 
line-height: 34px;
}
.a2{
width: 153px;
height: 140px;
background-color: #63F363;
border-bottom-width:2px; 
line-height: 138px;
}
.a3{
width: 153px;
height: 104px;
background-color:#ADD9E6;
line-height: 104px;
}
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.c1,.c2,.c3,.c4,.c5,.c6,.c7{
border-bottom-width:2px;
}
.b1,.b3,.b5,.b7,.c1,.c3,.c5,.c7{
height: 34px;
line-height: 34px;
}
.b2,.b4,.b6,.b8,.c2,.c4,.c6,.c8{
height: 33px;
line-height: 33px;
}
.a,.b,.c1{
text-align: center;
}
.a,.b1,.c1{
font-weight: bold;
color: #686200;
}
.a1,.b1,.c1{
background-color: yellow;
}
.b2,.b3,.b4,.b5,.b6,.b7,.b8,.c2,.c3,.c4,.c5,.c6,.c7,.c8{
color:#938E88
}
</style>
</head>
<body>
<div class="import">
<div class="a">
<div class="a1">类别</div>
<div class="a2">影视作品</div>
<div class="a3">音乐专辑</div>
</div>
<div class="b">
<div class="b1">年代</div>
<div class="b2">2009</div>
<div class="b3">2008</div>
<div class="b4">2007</div>
<div class="b5">2006</div>
<div class="b6">2003</div>
<div class="b7">2002</div>
<div class="b8">2001</div>
</div>
<div class="c">
<div class="c1">名称</div>
<div class="c2">游龙戏凤</div>
<div class="c3">三国之见龙卸甲</div>
<div class="c4">投名状</div>
<div class="c5">墨攻</div>
<div class="c6">如果有一天</div>
<div class="c7">美丽的一天</div>
<div class="c8">天马行空</div>
</div>
<div style="clear: left"></div>
</div>
</body>
</html>


本文由【waitig】发表在等英博客
本文固定链接:用内嵌样式创建出既定表格效果
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)