源于 how2j教程，这是个特别好的java网站。

斑马线表格

实现效果如下。

<style>
table{border-collapse:collapse; /*边框合并*/
width:90%;
}
tr.odd{     /*表格的奇数列的样式*/
background-color:#f8f8f8;
}
tr.head{    /*表头的下边框*/
border-bottom-width: 2px;
}
tr{border-bottom-style: solid;     /*底部为实线*/
border-bottom-width: 1px;       /*底部宽度为1px*/
border-bottom-color: lightgray; /*底部颜色*/
height:35px;    /*高度为35px*/
}td{width:25%;
text-align:center; /*文字居中*/
}</style>
<table><tr class="head"><td>id</td><td>名称</td><td>血量</td><td>伤害</td></tr><tr class="odd"><td>1</td><td>gareen</td><td>340</td><td>58</td></tr><tr class="even"><td>2</td><td>teemo</td><td>320</td><td>76</td></tr><tr class="odd"><td>3</td><td>annie</td><td>380</td><td>38</td></tr><tr class="even"><td>4</td><td>deadbrother</td><td>400</td><td>90</td></tr>
</table>

美人尖

实现效果如下。

<style>
div{width:0px;height:0px;/*上边界样式*/border-top-style:solid;border-top-color:red;border-top-width:10px;/*左边界样式*/border-left-style:solid;border-left-color:white;border-left-width: 10px;/*下边界样式*/border-bottom-style:solid;border-bottom-color:white;border-bottom-width: 10px;/*右边界样式*/border-right-style:solid;border-right-color:white;border-right-width: 10px;
}
</style><div></div>

断线下划线

<style>table{width:100%;}table td{text-align:center; /*文字居中*/}table tr.rowborder td{background-color:#b2d1ff;border-right: 2px solid white;height: 3px;}
</style><table><tr><td>商品</td><td>数量</td><td>价格</td><td>小记</td></tr><tr class="rowborder"><td></td><td></td><td></td><td></td></tr>
</table>

【css练习】斑马线表格，美人尖，断线下划线相关推荐

CSS动画：有活力的链接下划线
链接下划线是非常常见的一种样式,最近做了一个非常简单的视觉效果,非常不错,可以点下面链接查看. http://jsbin.com/zanewe/edit?html,css,output 创建这种效果是 ...
css导航栏选中是有移动下划线的效果
技术不行,拿百度前端学院题目练习,其中遇到一个导航栏,每当选中一个选项,下面出现一个下划线标注.我本来想直接省掉这个功能,后来觉得这样学习估计什么都学不到.后来思考和查阅,记录如下.大概是这么个效果: ...
html5 a标签去下划线,css中如何去掉a标签的下划线？
我们在HTML网页制作过程中,相信大家对css文本超链接这个概念并不陌生.我们都知道想要给某段文本或者指定元素添加一个锚点也就是超链接需要用到HTML中的a标签. 那么有的新手可能就会发现,在使用a标 ...
使用CSS实现鼠标悬浮标题出现动态下划线
今天来实现下面图片的效果要实现这种效果只需要使用到background这个属性了. 首先创建有个div 输入一段文字然后在设置background属性这时候页面就会出现这样子文字背景填充满了 ...
【CSS】下划线与文字间距，下划线粗细以及下划线颜色的设置
最开始的时候了解下划线的属性是: text-decoration:underline; 但是,很遗憾的是,对于设计做的下划线用浏览器默认属性样式很难调整,使用这个属性并不能调整下划线与文字的间距,而且 ...
全网页CSS 超链接无下划线
全网页CSS 超链接无下划线如何实现? 在一个网页中有若干对文字A超链接锚文本,但默认情况下带链接文字是有下划线效果的.如何使用CSS实现超链接无下划线样式呢? 通过CSS设置要想让带超链接锚文本字体 ...
php文字链接下划线怎么取消,css怎么去掉超链接下划线
在网页中难免有若干对文字A超链接锚文本,但是在默认情况下带链接的文字全部都是有下划线效果的,那么如何把这个超链接的下划线效果给去掉呢?那我们就要借助强大的CSS了. 通过CSS设置要想让带超链接锚文本 ...
CSS下划线与文字间距，下划线粗细以及下划线颜色的设置
最开始的时候了解下划线的属性是: text-decoration:underline; 1 但是,很遗憾的是,对于设计做的下划线用浏览器默认属性样式很难调整,使用这个属性并不能调整下划线与文字的间距, ...
div css 下划线text-decoration
CSS 下划线,div css下划线目录 html原始下划线标签u A伪类超链接下划线鼠标经过出现下划线对对象的下划线接下来,我们来介绍通过css样式对文字.区域设置下划线样式--css下划线 ...

【css练习】斑马线表格，美人尖，断线下划线

斑马线表格

美人尖

断线下划线

【css练习】斑马线表格，美人尖，断线下划线相关推荐

最新文章

热门文章