随笔分类 -  CSS

<hr/>样式修改
摘要：<hr/>标签作用产生一个分界线，但是这个分界线比较丑,可以为该标签增加如下样式 border:0.5px solid #eeeeee div显示等同样式css如下 border-bottom: 1px solid #e7e7eb; width: 100%; text-align: left; pa 阅读全文
posted @ 2020-09-28 15:12 zhaogaojian 阅读(369) 评论(0) 推荐(0) 编辑
div 中文会换行 英文不换行
摘要：可以增加如下属性 word-break:brrak-all， word-wrap:break-word, 英文字母之间如果没有空格，系统认为是一个单词，就不会自动换行。汉字就没有这种情况。 阅读全文
posted @ 2020-02-28 18:41 zhaogaojian 阅读(664) 评论(0) 推荐(0) 编辑
给非input元素增加placeholder特性
摘要：如下图 有子控件时 想要实现如果明细中没有子控件时显示可添加多个子控件 .simplaceholder{ width:100px; height:30px; margin: 10px auto; } .simplaceholder:empty:after{ content: attr(placeho 阅读全文
posted @ 2020-02-12 10:47 zhaogaojian 阅读(298) 评论(0) 推荐(0) 编辑
css设置手型光标
摘要：因为现在主流浏览器是chrome，所以要尽量使用 cursor:pointer，不要使用 cursor:hand chrome下支持的鼠标样式 default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的 阅读全文
posted @ 2019-11-09 13:51 zhaogaojian 阅读(3523) 评论(0) 推荐(0) 编辑
文字溢出显示三个点
摘要：1、单行溢出 text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 90%; 2、多行溢出 overflow: hidden; text-overflow: ellipsis; display: -webkit- 阅读全文
posted @ 2019-05-28 16:19 zhaogaojian 阅读(6853) 评论(0) 推荐(0) 编辑
CSS样式选择
摘要：1：#a,b{…………｝一个id叫a和一个标签是b的样式 2：#a b{…………｝一个id叫a下面的一个标签是b的样式3：#a:b{…………｝一个id叫a的伪类b的样式4：#a.b{…………｝一个id叫a的并且具有class叫b的样式 ，实际上就是不带空格5：#a+.b{…………｝一个id叫a的并且 阅读全文
posted @ 2018-11-13 10:41 zhaogaojian 阅读(245) 评论(0) 推荐(0) 编辑
CSS3 transform-origin 属性
摘要：<!DOCTYPE html> <html> <head> <style> #div1 { position: relative; height: 200px; width: 200px; margin: 100px; padding:10px; border: 1px solid black; } 阅读全文
posted @ 2018-09-13 23:27 zhaogaojian 阅读(180) 评论(0) 推荐(0) 编辑