|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
Table布局灵活性不大,你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
在前一段工夫制造了CSScalendar,然后我就想用css制造一个table的模子,该模子遵守亲和力划定规矩,并且有优秀的视觉效果,
图:色彩的选择和搭配
如许做的优点是:使用表格来装载数据,不问可知是最好的,你能够很天真的为每一个单位格界说款式。上面是详细的做法
起首在Photoshop计划一个效果出来,经由过程对各类色彩,小图标等的知识,做出了一个效果使人中意的最终效果来。下一步呢,裁处上面三个图片来作为题目的背景图片,假如你对色彩的掌控不是很好的话,这里给你供应一些调色工具
www.snook.ca/technical/colour_contrast/colour.html</u/>
veerle.duoh.com/comments.php?id=108_0_2_20_C8
数据布局为
<tableid="mytable"cellspacing="0"summary="Thetechnical
specificationsoftheApplePowerMacG5series">
<caption>Table1:PowerMacG5techspecs</caption>
<tr>
<thscope="col"abbr="Configurations"class="nobg">Configurations</th>
<thscope="col"abbr="Dual1.8GHz">Dual1.8GHz</th>
<thscope="col"abbr="Dual2GHz">Dual2GHz</th>
<thscope="col"abbr="Dual2.5GHz">Dual2GHz</th>
</tr>
<tr>
<thscope="row"class="spec">Model</th>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
...能够看到我用了scope属性来确保这个表格在忽视觉效果的扫瞄器下展现出更好的效果,这个属性界说题目元素包括的题目内容是不是为行(scope="col")或列(scope="row")。上面是CSS的内容关于下面的题目,利用和背景来更好的辨别出他们
th{
font:bold11px"TrebuchetMS",Verdana,Arial,Helvetica,
sans-serif;
color:#6D929B;
border-right:1pxsolid#C1DAD7;
border-bottom:1pxsolid#C1DAD7;
border-top:1pxsolid#C1DAD7;
letter-spacing:2px;
text-transform:uppercase;
text-align:left;
padding:6px6px6px12px;
background:#CAE8EAurl(images/bg_header.jpg)no-repeat;
}
th.nobg{
border-top:0;
border-left:0;
border-right:1pxsolid#C1DAD7;
background:none;
}上面界说左边的题目款式
th.spec{
border-left:1pxsolid#C1DAD7;
border-top:0;
background:#fffurl(images/bullet1.gif)no-repeat;
font:bold10px"TrebuchetMS",Verdana,Arial,Helvetica,
sans-serif;
}
th.specalt{
border-left:1pxsolid#C1DAD7;
border-top:0;
background:#f5fafaurl(images/bullet2.gif)no-repeat;
font:bold10px"TrebuchetMS",Verdana,Arial,Helvetica,
sans-serif;
color:#B4AA9D;
}这里的数据来自于MAC的technicalspecificationsofeachPowerMacG5|http://www.apple.com/powermac/specs.html上去界说一般的和主要的数据内容
td{
border-right:1pxsolid#C1DAD7;
border-bottom:1pxsolid#C1DAD7;
background:#fff;
padding:6px6px6px12px;
color:#6D929B;
}
td.alt{
background:#F5FAFA;
color:#B4AA9D;
}至此,全部制造历程停止了
检察表格效果
译者的话:这个页面经我测试经由过程W3C尺度严厉型考证,并且兼容IE,Firefox,Opera等支流扫瞄器,关于大批数据,能够使用js完成行两种背景瓜代显现。
</p>
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。 |
|