css
明阳mark
这个作者很懒,什么都没留下…
展开
-
流程设计图
原创 2022-03-31 17:37:38 · 158 阅读 · 0 评论 -
移动端精灵图写法
.sou{ position: absolute; top: 8px; left: 50px; width: 18px; height: 15px; background-color: pink; background: url(../images/jd-sprites.png) no-repeat -81px 0; background-size: 200px auto; }原创 2020-11-22 21:49:05 · 276 阅读 · 0 评论 -
css元素嵌套之塌陷问题
<div style="height: 40px;background-color:aqua;margin-top: 30px;"> <div style="width: 50px;height: 40px;background-color: blue;"></div> </div>结果这个时候给子元素添加上外边距 <div style="height: 40px;background-color:aqua...原创 2020-11-22 18:32:54 · 259 阅读 · 0 评论 -
响应式布局
布局容器原创 2020-10-23 07:39:50 · 5749 阅读 · 0 评论 -
flexible.js的使用
body使用cssrem插件使用修改默认rem的值原创 2020-10-15 02:26:13 · 553 阅读 · 0 评论 -
移动端开发技术选型
原创 2020-10-14 02:11:35 · 480 阅读 · 0 评论 -
background的使用
background-size在移动端要这样写原创 2020-10-14 01:34:12 · 145 阅读 · 0 评论 -
css里面shadom阴影的使用
使用原创 2020-10-13 22:25:41 · 498 阅读 · 0 评论 -
移动端布局
视图设定原创 2020-10-13 07:56:42 · 58 阅读 · 0 评论 -
3d盒子导航栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ ma.原创 2020-09-30 20:28:42 · 510 阅读 · 0 评论 -
table表身滑动,表头不动样式
.toolTipx{ display: flex; flex-direction: column; background: #fff; color: #6c6c6c; max-height: 300px; width: 300px; .head-box { width: 300px; padding-right: 5px; background: #dee0ee; } .toolTip-title { color: #32c5ff;原创 2020-09-27 09:26:09 · 1012 阅读 · 0 评论 -
translate3D的使用
透视原创 2020-09-27 07:41:21 · 1594 阅读 · 0 评论 -
过度
原创 2020-09-03 07:39:39 · 104 阅读 · 0 评论 -
手风琴效果
原创 2020-09-03 07:35:04 · 94 阅读 · 0 评论 -
css3动画多状态效果练习
原创 2020-09-03 07:28:26 · 131 阅读 · 0 评论 -
css动画效果之奔跑的小熊
原创 2020-08-27 07:38:08 · 761 阅读 · 0 评论 -
css动画效果练习-steps
打字机效果原创 2020-08-26 07:33:47 · 238 阅读 · 0 评论 -
水波扩散动画效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div class原创 2020-08-25 09:25:43 · 401 阅读 · 0 评论 -
大数据样式
要注意权重原创 2020-08-24 07:48:15 · 166 阅读 · 0 评论 -
图片模糊处理
原创 2020-08-21 08:04:04 · 152 阅读 · 0 评论 -
粘性定位
原创 2020-08-21 07:32:17 · 282 阅读 · 0 评论 -
table表头固定,表身滚动
效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <原创 2020-08-19 15:23:38 · 1097 阅读 · 0 评论 -
css实现表格边框样式
效果代码每个盒子边框都是1,没有为2的,主要是margin-left:-1px原创 2020-08-18 07:26:26 · 282 阅读 · 0 评论 -
vue禁止粘贴
最近项目遇到了一个关于控制用户粘贴的功能,简单研究了下,提出以下方案:使用Jquery获取的DOM对象绑定paste方法具体如下:1.安装jquerynpm i jquery -S修改项目中build/webpack.base.config.js// 顶部引入webpackconst webpack = require('webpack'); ... module.exports = { ... // 添加plugin配置 plugins: [原创 2020-08-17 09:52:00 · 935 阅读 · 0 评论 -
字体图标的使用
原创 2020-08-14 07:25:16 · 84 阅读 · 0 评论 -
记不太清的css样式
backgroundbackground: url(../../../../content/images/treeOpenIcon.png) center center/100% no-repeat;原创 2020-08-07 10:44:34 · 77 阅读 · 0 评论 -
scss编译成css的两种方式
命令行安装npm i -g sass编译sass --watch sass文件路径 css文件路径例如插件搜索 live sass compiler改配置修改setttings.json点击下方watch sass原创 2020-08-07 07:36:24 · 3325 阅读 · 0 评论 -
sass的使用
mixin定义调用参数darken函数是加深颜色,这里加深10%继承原创 2020-08-03 07:35:38 · 260 阅读 · 0 评论 -
css动画使用
案例定义调用原创 2020-08-03 07:25:17 · 91 阅读 · 0 评论 -
transform综合使用
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020080109240734.png换了顺序完全不同,要注意并且transform分开写只能执行最后一个原创 2020-08-01 09:28:34 · 218 阅读 · 0 评论 -
transform设置旋转中心点及案例
htmlcss原创 2020-07-31 07:25:01 · 4640 阅读 · 0 评论 -
用css创建可旋转三角
效果html代码css代码原创 2020-07-31 07:19:07 · 133 阅读 · 0 评论 -
页面高度自适应
使用jquery //全屏铺满 var ratioX = $(window).width() / 1920; var ratioY = $(window).height() / 1080; $("body").css({ transform: "scale(" + ratioX + "," + ratioY + ")", transformOrigin: "left top", backgroundSize: "100% 100%", }); }); //调整浏览原创 2020-07-30 13:51:50 · 223 阅读 · 0 评论 -
css水平垂直居中带动画
效果样式.map { position: relative; height: 10.125rem; .chart { position: absolute; top: 0; left: 0; z-index: 5; height: 10.125rem; width: 100%; } .map1, .map2, .map3 { //水平垂直居中 position: absolute; top: 50%;原创 2020-07-30 13:07:46 · 257 阅读 · 0 评论 -
transform旋转
效果旋转代码原创 2020-07-30 08:01:38 · 173 阅读 · 0 评论 -
垂直居中的两种方式
传统方式关键点: 先在x、y轴相对父盒子50%偏移, 然后在x、y轴往回自己的一半缺点是要写死 margincss3方式原创 2020-07-30 07:34:28 · 102 阅读 · 0 评论 -
transform的使用
案例设置过度hover上移原创 2020-07-30 07:25:13 · 112 阅读 · 0 评论 -
css适配
导入文件flexible.js原创 2020-07-28 07:22:04 · 120 阅读 · 0 评论 -
vue之css判断
基本样式:class="{active:nowIndex===0}"复合样式:class="[{warn:record.currentMonthActualDays < record.currentMonthExpectDays},'cursorPointer']"原创 2020-05-09 13:57:54 · 3033 阅读 · 0 评论 -
css过度效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ mar原创 2020-05-09 07:47:25 · 190 阅读 · 0 评论