![](https://img-blog.csdnimg.cn/20210825095247940.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
记录
爱听音乐的boy
这个作者很懒,什么都没留下…
展开
-
html css输入框获得焦点、失去焦点效果
html css输入框获得焦点、失去焦点效果原创 2023-02-26 17:17:12 · 3214 阅读 · 0 评论 -
html 美化table,鼠标经过变色
html 美化table,鼠标经过变色原创 2022-05-25 19:42:25 · 1302 阅读 · 0 评论 -
radio 单选框美化
单选框美化:结构层<div class="box"> <input type="radio" name="sex" id="mTpl" /> <label class="label" for="mTpl" val="男"></label> <input type="radio" name="sex" id="fTpl" /> <label class="label" for="fTpl" val="女"></l原创 2021-08-30 16:47:08 · 325 阅读 · 0 评论 -
checkbox 复选框美化
复选框美化(可多个结构,只需改id和for):结构层<div class="box"> <input type="checkbox" id="sexTpl" /> <label class="label" for="sexTpl" chkV="男" nchkV="女" > <span class="circle"></span> </label></div><div class="box"原创 2021-08-30 16:11:46 · 806 阅读 · 0 评论 -
css 文本超出显示省略号 ...
超出1行显示….div{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}超出2行显示….box{ word-break: break-all; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;//超出第几行,关键在这里 line-原创 2021-06-22 16:23:42 · 777 阅读 · 0 评论 -
纯css实现中间文字两边有线
纯css实现中间文字两边有线 中间字多时也没问题效果图如下:说明一下:伪元素:after before 改变宽度时,对应的right left值也要改 after: width right -> 宽度width加多少 right也要加多少 before: width left -> 宽度width加多少 left也要加多少结构如下: <div class="operLine"> <span class="line">啊</span> &原创 2021-06-15 18:27:28 · 968 阅读 · 0 评论 -
纯css实现导航栏滚动
效果图描述一下:我们在做导航栏时,导航项有很多,父容器容不了会导航换行显示,很不好。写js计算父容器总宽度要容得下所有导航项又不会(假设不会),怎么处理。用css解决,往下看:大容器div:设置横向超出滚动 纵向超出隐藏 有默认滚动条不好看也隐藏算了 导航容器ul:不设宽度,设置内容超出不换行 导航项li:设置display:inline-block;结构如下:<div id="div"> <ul> <li>导航1</li>原创 2021-06-15 18:17:36 · 1368 阅读 · 0 评论