css
大龄小白奋斗每一天
这个作者很懒,什么都没留下…
展开
-
列表样式
我们常见的列表样式有无序列表的小圆点和有序列表的数字标识,但其实列表还有很多其他样式。可以通过列表类型和列表项图像改变。1、list-style-type 列表类型的属性值有很多,通过它可以设置不同的列表项目符号,如下图 2、list-style-image 当列表类型的项目符号不能满足需求时,还可以通过list-style-image属性定义图像...原创 2020-01-04 13:19:39 · 3046 阅读 · 0 评论 -
使用border做圆和三角
1、圆:宽高相等,border-radius大于宽的二分之一。2、三角:宽高为0,border足够大,保留需要方向的颜色,其他三面均为透明色。原创 2018-03-27 20:14:00 · 1021 阅读 · 0 评论 -
多行文本两端对齐
在页面中我们常常会遇到需要文字两边对齐的情况,例如“姓名”“联系电话”。最开始的时候,我会使用 来找齐,但其实对于不同的字体,一个 所占用的空间是不同的,这样我们就会发现,当字体改变时,很可能文字不再是对齐的。下面介绍一种使文字两边对齐的方法:text-align:justify; /*多行文本两边对齐*/它只适用于多行文本,而且单独使用也不起作用,具...原创 2018-04-19 22:29:48 · 1061 阅读 · 0 评论 -
单词中断换行
当一个单词过长,或者很多字母组合中间没有空格时,浏览器无法判断如何换行,就会造成文本溢出父元素的情况,这时可以使用word-break属性来解决。word-break:break-all; /*允许单词中断换行*/word-break:keep-all; /*允许在半角空格或者连字符处中断换行*/...原创 2018-04-19 22:46:55 · 629 阅读 · 0 评论 -
css单行文本与多行文本省略
单行文本省略.div1{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}多行文本省略.div2{ display:-webkit-box; -webkit-line-clamp:3; /*保留的行数*/ -webkit-box-orient:vertical; overflow: hidden;}...原创 2018-05-03 20:26:30 · 149 阅读 · 0 评论