文本行的斑马条纹

周知,表格的斑马条纹只需简单的运用伪类 :nth-child()/:nth-of-type()来处理就好了:

tr:nth-child(even){

  background-color: rgba(0,0,0,.2);

}

但是把这种效果运用在文本行的时候就有点力不从心了,尽管js可以实现这种功能,但是这在理论上有违纯粹原则(javascript不应该掺合到样式层面来),

而且过多的DOM元素还会拖累整个页面的性能。

解决方案:

<div class="content">
  原来你是这样的毛玻璃 <br>
  原来你是这样的毛玻璃 <br>
  原来你是这样的毛玻璃 <br>
  原来你是这样的毛玻璃
</div>
.content{
  text-align: center;
  font-weight: 100;
  padding:.5em;
  line-height: 1.5;
  background: beige;
  background-size: auto 3em;
  background-origin: content-box;
  background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}

效果:

注意:改变 line-height 时要相应的调整 background-size 。

原文地址:https://www.cnblogs.com/Zmmy/p/8526775.html

时间: 2024-10-04 13:25:06

文本行的斑马条纹的相关文章

scala学习三---文件里读取文本行

学习了scala的基本知识后,发现了scala是集函数式和指令式结合为一体的一种语言,代码更加简洁,但是对于用习惯了java的人来说,还真的不是一件易事~~ 今天学习scala脚本读取文本文件 列子如下: import scala.io.Source if(args.length>0){ for(line <- Source.fromFile(args(0)).getLines) print(line.length+" "+line) }else{ Console.err.

用CSS完成斑马条纹表单

今天学习了<table> <th> <tr> <td> 标签的用法,下面用HTML和CSS来画一个简单的斑马条纹表单,让表单更好看 示例代码:zebra.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML CSS Exercise CSS3 Zebra Striping a Table<

【table】给table表格设置一个通用的css3样式(默认有斑马条纹)

/* = 表格(默认有斑马条纹) ------------------------------------------ */ .data-table { margin: 10px 0; } .data-table table { width: 100%; border-collapse: collapse; //设置表格边框合并为单一边框 } .data-table caption { height: 30px; line-height: 30px; font-weight: 700; } .d

vim 文本行逆序化

要求 示例:将文本 1234 123 12 1 转换成 1 12 123 1234 命令 :g/.*/mo0 或者 :g/^/mo0 补充说明 原理是从第一行开始,匹配每一行,然后执行mo(move)操作移动到第0行.如此处理每一行,直到文本末行.执行完毕文本逆序化成功!

多线程读文本行

具体要求: 我的代码: var strlist:tstringlist; begin strlist := tstringlist.Create; //创建 strlist.LoadFromFile(txtlj); //读取文档 i := strlist.Count; for i := 1 to strlist.Count do begin hang:= strlist.Strings[i-1]; if hang = \'\' then Continue else begin tianjia;/

限制文本行数

1行: white-space:nowrap;overflow:hidden;text-overflow:ellipsis; ps*:一定要指定容器的宽度,不然的话是没有用的. 多行: 方法一:只支持-webkit内核 <p style=" overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; "&

css 的包含块 、负外边距,字体,文本行高

一.包含块 目的:确定元素的位置和相对大小(%) 1.正常文档流元素和浮动元素 ---- 父元素的 content-box 2.绝对定位元素 ---- 父元素的 padding-box 3.固定定位元素 ---- 视口 二.负外边距 document.documentElement.clientWidth; 视口宽度 window.onresize 监控视口改变 三.字体 字体简写: 当 line-height 书写在 font 属性上 ,会覆盖 line-height 的值 字体大小: 默认是

Scala学习笔记(四):从文件里读取文本行

第一个版本: import scala.io.Source if(args.length>0){ for(line<-Source.fromFile(args(0)).getLines) print(line.length+" "+line) }else{ Console.err.println("Please enter FileName") } 运行该程序时抛出了异常:java.lang.OutOfMemoryError:Java heap spac

文本行编辑器-----sed解密

sed命令 文本处理三剑客: grep, egrep, fgrep:文本过滤器 sed:Stream EDitor,流编辑器,行 awk:文本格式化工具,报告生成器 sed需要理解模式空间和holdspace,下面看看这个图就明白了 sed [OPTION]...  'script'  [input-file] ... 常用选项:-n:不输出模式空间中的内容至屏幕: -e script, --expression=script:多点编辑: -f  /PATH/TO/SED_SCRIPT_FILE