随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

随笔分类 -  Css

1 2 下一页
css 少见属性合集
摘要:1、阴影可将页面的元素颜色加上高斯模糊效果:backdrop-filter: saturate(180%) blur(20px); 阅读全文
posted @ 2021-09-09 09:59 小虾米吖~ 阅读(36) 评论(0) 推荐(0) 编辑
css3之transform动画效果容易踩坑
摘要:需求背景描述:鼠标移入盒子时整个盒子上移指定距离12px。 需求简单,实现方式有2: 1、使用 transform:translateY(-12px) ,但是加入动画之后会发现盒子内部的文本会在blod和normal之间频繁来回切换,视觉上会形成不动闪烁的效果。 2、使用定位,鼠标移动到盒子时改变盒 阅读全文
posted @ 2021-08-10 09:30 小虾米吖~ 阅读(285) 评论(0) 推荐(0) 编辑
两个并排的div之间有1px的间隙
摘要:如果用了display:inline-block;标签换行时就会出现间隙。如果必须用的话就改变div默认样式: div{margin:0;padding:0;} 改成 div{margin:0;padding:0;font-size: 0;} 阅读全文
posted @ 2021-04-20 17:54 小虾米吖~ 阅读(494) 评论(0) 推荐(0) 编辑
邮箱(outlook)嵌入html页面
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>邮件模板</title> </head> <body> <table width="1024" border="0" cellspacing="0" cellp 阅读全文
posted @ 2021-04-19 08:53 小虾米吖~ 阅读(1689) 评论(0) 推荐(0) 编辑
元素被遮挡,鼠标无法点击(css)
摘要:pointer-events: none; 阅读全文
posted @ 2021-03-30 13:50 小虾米吖~ 阅读(137) 评论(0) 推荐(0) 编辑
html5字体自适应
摘要:<script> (function (doc, win) { var docEle = doc.documentElement, resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize'; var re 阅读全文
posted @ 2021-03-26 17:37 小虾米吖~ 阅读(131) 评论(0) 推荐(0) 编辑
瀑布流布局:从上往下布局方式(——)往同级元素中高度最低的元素后面排列
摘要:html: <div class="col-responsive-5"> <a href="javascript:void(0)" class="hy_hover"><img src="image/index_page/hy002.png"><span class="hy_info">重庆·22岁· 阅读全文
posted @ 2020-10-21 10:28 小虾米吖~ 阅读(228) 评论(0) 推荐(0) 编辑
bootstrap ----tooltip
摘要:bootstrap4 和 jqery3.2.1版本共同使用时, 使用tooltip组件会有兼容问题 解决方法: 需要引入另一个js <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script><script src="js 阅读全文
posted @ 2020-09-30 10:43 小虾米吖~ 阅读(430) 评论(0) 推荐(0) 编辑
fullpage and wow.js混合使用兼容性
摘要:官网加动画特效,哇哦,下面我介绍一下WOW.js 官网地址:https://www.delac.io/wow/ 点击github可以找到wow.js和wow.min.js 以及animate.css者animate.min.css wow.js依赖于animate.css,首先在头部引用animat 阅读全文
posted @ 2020-09-04 09:38 小虾米吖~ 阅读(603) 评论(0) 推荐(0) 编辑
vue+element-ui 字体自适应不同屏幕
摘要:项目背景:屏幕自适应问题,当在不同分辨率的屏幕上显示页面时,页面的字体需要根据屏幕大小来自适应,想到使用rem作为字体的单位 vue-cli脚手架下的index.html中写入以下js脚本 阅读全文
posted @ 2019-07-17 15:01 小虾米吖~ 阅读(6170) 评论(0) 推荐(0) 编辑
定位问题 vue+element-ui+easyui(兼容性)
摘要:项目背景:靠近浏览器窗口的各个方向(左上、下、左、右)都有不同的模态框悬浮于窗口,这里针对于底部组件定位的选择(主要针对pc端垂直方向上的定位) 1、百分比:easyui的window窗口定位方式:设置left和top的值即可;(left可直接写指定值px;top不能写px,因为各个分辨率下的浏览器 阅读全文
posted @ 2019-07-09 17:30 小虾米吖~ 阅读(753) 评论(0) 推荐(0) 编辑
四叶草(css)
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <style> .box { overflow:hidden; margin-bottom:5px; } .box div { float:left; margin-right:5px; width 阅读全文
posted @ 2019-07-09 17:04 小虾米吖~ 阅读(449) 评论(0) 推荐(0) 编辑
布局中元素由于浏览器窗口变化被挤下来(解决)
摘要:在项目开发中,遇到一个问题,布局分上中下三个级,上面放form表单中的操作按钮等,中间放table表格显示数据,下面是表格的分页器;其中表格的高度设置方式为 calc(100% - 90px);意为总的高度100%减去上面form和下面page的高度和(90px);这样做的缺陷是当窗口缩小后,高度超 阅读全文
posted @ 2019-06-05 10:51 小虾米吖~ 阅读(908) 评论(0) 推荐(0) 编辑
css3——border-image属性的用法
摘要:项目需求是实现鼠标移到按钮上时,下方显示一张渐变的三角图片,于是想到使用border-image来实现。 实现要使用图片做边框背景我们至少需要border-image-source 以及 border-image-slice 、 border-style。 border-image-source : 阅读全文
posted @ 2019-04-17 10:12 小虾米吖~ 阅读(463) 评论(0) 推荐(0) 编辑
video作为背景全屏铺满问题
摘要:项目中我打算使用一个MP4视频作为登录界面背景,首先在静态页面都没法显示出来,后来发现需要将视频的编码格式转换为H264的格式方能正常显示(使用格式工厂转换即可); 后又发现视频没办法铺满全屏,在不同的分辨率下会往左上角缩回来,而且还有滚动条。不像背景图片可以直接使用background-size: 阅读全文
posted @ 2019-04-12 15:13 小虾米吖~ 阅读(1660) 评论(0) 推荐(0) 编辑
css3动画
摘要:1)transition:要过渡的属性,花费时间,运动曲线,何时开始。(且是一直存在的) 过渡:让你可以观测到状态a到状态b的过程;多组过渡效果,请用逗号隔开。 如果所有过渡效果都是同时发生,那么请使用all; eg.transition: all 3s; 2)transform: translat 阅读全文
posted @ 2019-04-09 10:14 小虾米吖~ 阅读(120) 评论(0) 推荐(0) 编辑
css3基本属性
摘要:一、css属性:1、层叠性:当出现相同的选择器时,属性冲突的时候,后面的属性会把前面的属性 覆盖掉。 2、继承:当存在父子关系的时候,子元素会继承父元素的部分属性 注意: a标签不会继承颜色;h标签不继承字体大小 3、优先级:当有多个选择器作用在同个元素上时,到底谁有效果? 优先级顺序:继承性 < 阅读全文
posted @ 2019-03-26 15:42 小虾米吖~ 阅读(393) 评论(0) 推荐(0) 编辑
css属性之统一设置文本及div之间的对齐方式
摘要:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效.hdp-uf{ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ displ 阅读全文
posted @ 2019-03-07 09:23 小虾米吖~ 阅读(659) 评论(0) 推荐(0) 编辑
倒影问题(reflect:below)
摘要:这个例子灵感来源于实现一个登录框下方的倒影: .box { width: 300px; height: 200px; border: 1px solid #1f637b; -webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(255 阅读全文
posted @ 2019-02-28 17:30 小虾米吖~ 阅读(203) 评论(0) 推荐(0) 编辑
svg
摘要:!DOCTYPE html><head> <meta charset="UTF-8"></head><html><body><div> <div>M = 移至</div> <div>L = 画线</div> <div>H = 竖画线</div> <div>V = 垂直画线</div> <div>C 阅读全文
posted @ 2018-12-29 11:58 小虾米吖~ 阅读(188) 评论(0) 推荐(0) 编辑

1 2 下一页

点击右上角即可分享
微信分享提示