![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
华洛
野生程序员,终身学习者。
展开
-
css实现点击事件穿透上层元素的效果
css用来点击穿透上层元素,实现点击下层元素的效果;pointer-events: none;最近越来越忙了。欠的越来越多了。。。。。。。。。。。。原创 2019-12-30 11:28:26 · 1808 阅读 · 0 评论 -
a标签高亮背景取消秘技
a标签默认点击的时候会有个高亮的背景色,要把这个去掉只需要给a标签设置css样式:a{ -webkit-tap-highlight-color:rgba(0,0,0,0);}顺便再加上取消掉其他的默认样式: a:link{ text-decoration:none;outline: 0;}a:visited{ text-decoration:non...原创 2018-08-19 09:28:40 · 2791 阅读 · 0 评论 -
checkbox和后面的文字对齐解决方案
checkbox和后面的文字如果不加样式,会导致checkbox和文字对齐,解决办法是对checkbox和文字同时添加如下样式:vertical-align:middle; 1如例所示:c:forEach var="user" items="${userItem}"> type="checkbox" value="${user.map.YHID}原创 2018-01-10 10:22:43 · 11289 阅读 · 0 评论 -
单选框radio和复选框checkbox文字垂直居中问题
单选框radio和复选框checkbox文字垂直居中问题现在的网站一般字体大小都是 12px,在 12px 下单选框和复选框文字垂直居中对不齐,不过要是字体大小是 14px 的话却完全没有这个问题。下面我整理了下解决方法,总共有 6 种。DOCTYPE HTML>html lang="en-US">head> meta charset="UTF-8">转载 2017-12-22 13:26:40 · 2316 阅读 · 0 评论 -
WEB页面实现QQ,微博,等分享链接
div style="width:640px;margin:10px auto 20px auto; padding:0 0 0 380px;overflow:hidden"> div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare" style="margin:10px 0 0 -4px"> a原创 2017-12-09 14:57:19 · 2372 阅读 · 0 评论 -
CSS3四个自适应关键字——fill-available、max-content、min-content、fit-conten
前面的话 一般地,有两种自适应:撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'。除此之外 ,还新增了更细粒度的'min-content'和'max-content'。这四个关键字可用于设置宽高属性。本文将详细介绍CSS3中的这四个自适应关键字 [注意]IE浏览器不支持,webkit内核浏览器需添加-web原创 2017-12-13 09:42:25 · 484 阅读 · 0 评论 -
CSS3实现文字流光渐变特效
制作流光文字有几个要点:text-fill-color一般设置为transparent(透明色),然后利用background-image和渐变颜色来设置文字的背景色,利用background-clip来实现文字的截取,再利用background-size设置扩大背景,已使运用animation的时候能达到动画的效果等。DOCTYPE html>html lang="en">原创 2017-12-12 09:27:58 · 7093 阅读 · 0 评论 -
td长度固定,内容过长,超过部分用省略号代替
html的table表格中td长度固定,当内容过长时,超过部分用省略号代替. 具体代码如下: html> head> style type="text/css"> .mytable { table-layout: fixed; width: 98% border:0px; margin: 0px; } .mytable tr原创 2017-12-20 09:37:08 · 674 阅读 · 0 评论 -
动态的定位圆圈。
div class="quan1"> div class="quan"> div class="center">div> div>div>三个现实定位的圆圈,动态的。/*定位的圆圈*/.quan1 .quan .center{ border: 2px solid #45BDCF; width: .5rem; height: .5rem; border-rad原创 2017-11-22 09:08:04 · 333 阅读 · 0 评论 -
使用label标签,修改checkbox默认样式
DOCTYPE html>html>head>meta charset="UTF-8">title>checkbox css changetitle>style type="text/css">input[type="checkbox"] + label { cursor: pointer; font-size: 1em;}[id^="checkbox-"] + l原创 2017-11-10 10:43:21 · 4340 阅读 · 0 评论 -
利用阴影可以做背景的渐变色
box-shadow: 0px 52px 50px -20px #fff inset;原创 2017-11-29 09:38:55 · 618 阅读 · 0 评论 -
CSS 使用 贝塞尔曲线 碰撞效果实现
/*碰撞动画效果*/#page0 div:first-child{ transform: translateX(-700px);}#page0 div:last-child{ transform: translateX(700px);}#page0:hover div:first-child, #page0:hover div:last-child{ transi原创 2017-11-06 08:45:19 · 1426 阅读 · 0 评论 -
(年薪30万)span无损换行
多行span设置display:inline-block;即可实现换行原创 2017-10-23 14:40:23 · 271 阅读 · 0 评论 -
(年薪30万)响应式 img自适应
img{ width: 100%; height: auto;max-width: 100%; display: block; }原创 2017-10-23 13:54:20 · 172 阅读 · 0 评论 -
(年薪30万)淡入淡出轮播图。CSS+JS
一个有淡入淡出与拉远效果的四张图自动轮播图。 自动轮播图 #box_A{原创 2017-10-20 15:06:06 · 297 阅读 · 0 评论 -
完成内容过多 使用省略号来显示
.notice a:first-child { text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}上面三行代码就可以做到用省略号 .notice a:first-child:before { content: '最新公告: \00a0\00a0'; //这里\00a0用来表示一...原创 2017-10-10 16:39:03 · 528 阅读 · 0 评论 -
用js触发CSS3-transition过渡动画
经过这几天的工作,让我进一步的了解到CSS3的强大,原本许多需要js才能实现的动画效果,现在通过CSS3就能轻易实现了,但是CSS3也有自身的不足,例如说在动画出发触发上就没有js灵活,因此我就开始考虑将CSS3与Js结合使用。不过要注意CSS3属性兼容性问题平时我们直接使用transition动画一般是这样的鼠标放置在div方块上触发动画效果(鼠标悬浮div上即可触发)原创 2017-10-19 12:30:06 · 2075 阅读 · 0 评论 -
清楚浮动的方法
1)overflow :hidden 2).box:after,.box:before{content:'';display:table;} .box:after{clear:both }父元素使用以上两种方法来清除浮动通常用第二种。原创 2017-10-10 16:08:35 · 170 阅读 · 0 评论 -
CSS3 产生动画效果的属性
transition通过编辑属性来获得动画效果transform给一个翻转的效果animation动画效果原创 2017-09-11 15:51:50 · 426 阅读 · 0 评论