您现在的位置是：网站首页> 编程资料编程资料

css3 条纹化和透明化表格Firefox下测试成功css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2023-10-25 192人已围观

简介按照css3格式来写，在浏览器中却显示不出相应的效果，这时就需要考虑浏览器的兼容问题，本例先用IE没有成功，后用Firefox成功

使用class来条纹化表格，需要在html中将表格中每一行都按写出，非常麻烦。

CSS3中的伪类渲染更能很好地定位页面元素。

然而有时即使你按照css3格式来写，在浏览器中却显示不出相应的效果，这时就需要考虑浏览器的兼容问题。

目前，全盘支持 CSS3 属性的浏览器有 Chrome 和 Safari，而且不管是 Mac 平台还是 Windows 平台全支持。

博主先用IE没有成功，后用Firefox成功。

现附上条纹化表格的代码：

html:

复制代码

代码如下:

{% for w in words %}

{% endfor %}

Synonym	Cosine
{{ w.0}}	{{ w.1}}

css:rbga(,,,)最后一个参数是调整透明度

复制代码

代码如下:

table{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:70%;
border-collapse:collapse;
position:relative;
left:50px;
}
thead th{
font-size:1.2em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#663366;
color:#ffffff;
border:1px solid #990099;
padding:3px 7px 2px 7px;
}
tbody tr,td{
font-size:1em;
border:1px solid #990099;
padding:3px 7px 2px 7px;
}
tbody tr:nth-of-type(even){
background-color:rgba(138,43,226,0.2);
}
tbody tr:nth-of-type(odd){
background-color:rgba(169,169,169,0.2);
}

最后的效果图：

上一篇：css控制背景示例(css设置背景图片、设置背景颜色)

下一篇：CSS如何对齐文本框和其旁边的图像按钮比如搜索框等等解决搜索框和搜索按钮button边框不能重合的问题

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢