仓酷云

标题: 给大家带来用CSS制造具有亲和力的表格 [打印本页]

作者: 活着的死人 时间: 2015-1-16 00:21
标题: 给大家带来用CSS制造具有亲和力的表格
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>
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。

作者: 莫相离 时间: 2015-1-17 23:14
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 海妖 时间: 2015-1-30 17:29
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

作者: 小魔女 时间: 2015-2-6 14:33
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 仓酷云 时间: 2015-2-16 15:07
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 小妖女 时间: 2015-3-5 07:18
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 不帅 时间: 2015-3-12 00:56
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: admin 时间: 2015-3-19 17:29
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

欢迎光临仓酷云 (http://ckuyun.com/)