Css
文章平均质量分 59
MFG_666
别看我小,别看我小,我就是一只小小菜鸟
展开
-
Vue前端css定义全局变量样式并使用
前端css定义全局变量样式并使用原创 2022-08-10 14:13:45 · 2043 阅读 · 2 评论 -
css字体库免费下载使用(带网址)
字体库免费下载使用原创 2022-08-04 09:22:50 · 5950 阅读 · 0 评论 -
前端css弹性布局自动换行布局
前端css弹性布局自动换行布局转载 2022-07-25 17:09:03 · 4754 阅读 · 0 评论 -
前端移动端布局带边距案例(带源码)
前端移动端布局带边距案例(带源码)原创 2022-07-25 11:50:49 · 386 阅读 · 0 评论 -
前端Css外圆角写法横/纵方向实现(带源码)
前端Css外圆角写法横/纵方向实现(带源码)原创 2022-07-23 16:50:36 · 731 阅读 · 0 评论 -
前端响应式布局Layout推荐(带案例)
前端响应式布局Layout推荐(带案例)原创 2022-07-20 17:05:48 · 568 阅读 · 0 评论 -
vue插件瀑布流vue-masonry(带源码)
vue插件瀑布流vue-masonry(带源码)原创 2022-07-20 16:49:06 · 1750 阅读 · 0 评论 -
vue动态绑定:class用法
vue动态绑定:class用法原创 2022-07-20 16:22:58 · 306 阅读 · 0 评论 -
前端css文本、单词、字母强制换行
前端css文本、单词、字母强制换行原创 2022-07-20 09:39:49 · 1134 阅读 · 1 评论 -
vue瀑布流
vue瀑布流原创 2022-07-20 09:20:54 · 362 阅读 · 0 评论 -
前端Vue页面布局内容区域如何设置宽度content内区
前端Vue页面布局内容区域如何设置宽度content内区原创 2022-07-04 16:22:50 · 924 阅读 · 0 评论 -
前端vue异形轮播图案例(带源码)
前端vue异形轮播图案例(带源码)原创 2022-06-29 16:56:03 · 1077 阅读 · 4 评论 -
前端自定义按钮,设置边框移入抖动解决方案(带案例)
前端自定义按钮,设置边框移入抖动解决方案(带案例)原创 2022-06-25 16:56:42 · 517 阅读 · 0 评论 -
前端原生Html免费模板网站总结(带网址)
前端原生Html免费模板网站总结(带网址)原创 2022-06-25 11:39:13 · 26315 阅读 · 1 评论 -
前端Vue返回顶部[功能]和底部四个角[样式](代源码和详图)
前端Vue返回顶部[功能]和底部四个角[样式](代源码和详图)原创 2022-06-24 11:41:53 · 440 阅读 · 0 评论 -
vue导航栏滚动下拉条上拉隐藏,下拉显示切换样式变化(源码)
vue导航栏滚动下拉条上拉隐藏,下拉显示切换样式变化(源码)原创 2022-06-24 10:20:19 · 2072 阅读 · 0 评论 -
前端页面pc端通过控制台切换移动端屏幕不能撑满问题解决方案
前端页面pc端通过控制台切换移动端屏幕不能撑满问题解决方案原创 2022-06-21 09:24:04 · 1207 阅读 · 0 评论 -
前端Vue项目中使用SVG图标详解案例(带源码)
前端Vue项目中使用SVG图标详解案例(带源码)原创 2022-06-18 13:34:27 · 5376 阅读 · 8 评论 -
前端动画animation、transition、transform知识手册总结(带源码)
前端动画animation、transition、transform知识手册总结(带源码)原创 2022-06-11 16:20:50 · 184 阅读 · 0 评论 -
原生html页面内容字体乱码解决方案
前端html字体乱码原创 2022-06-07 09:31:35 · 258 阅读 · 0 评论 -
es6语法自己不足知识点总结
es6原创 2022-06-06 17:28:12 · 105 阅读 · 0 评论 -
前端vue元素显示隐藏 v-if 和 v-show 指令小案例
目录原理:区别:注意:使用:v-ifv-show原理:v-if:通过 创建、销毁 dom元素的方式达到显示、隐藏效果(销毁后有一个占位符 )。v-show:通过css控制样式style达成显示、隐藏效果。display:none; 隐藏display:block; 显示区别:v-if 有更高的切换消耗 ,如果运行条件不大可能改变,则v-if 较合适。v-show有更高的渲染消耗,如果需要频繁切换,则v-show 较合适。注意:v-if使得元素被隐藏后,这个元素的物理位置有一个名称为的原创 2022-05-28 11:43:53 · 1907 阅读 · 0 评论 -
前端css移入文本显示图片或者div等内容,移出隐藏图片获取div等内容(移入移除显示隐藏)
目录代码如下CSSbody效果如下移入前如下图移出后如下图代码如下CSS .nav_box_rgt:hover img{ display: block; } .nav_box_rgt img{ display: none; }body <div class="nav_box_rgt"> <div style="cursor: pointer;"> <span>登陆<原创 2022-05-27 11:47:38 · 711 阅读 · 0 评论 -
前端css 文本超出就隐藏并且显示省略号
目录单行文本溢出显示省略号多行超出隐藏跨浏览器兼容的方案表格中单行超出隐藏单行文本溢出显示省略号overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行多行超出隐藏div{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-bo原创 2022-05-27 09:41:55 · 1014 阅读 · 0 评论 -
前端Vue书籍翻页功能利用turn.js来完成以及知识点(源码)
目录下载文档开始构造方法可配置项方法语法事件两种方式添加事件案例CSSbasic.css源码如下JS里面代码太多了,直接官网下载index.html源码如下最终效果如下下载下载完里面有源码,好几种翻页效果,很不错~官网文档接口文档开始构造方法$('#flipbook').turn([options]);可配置项$('.flipbook').turn({ width: 922, //宽度 height: 600, //高度 a原创 2022-05-26 17:06:50 · 5758 阅读 · 7 评论 -
前端动画库总结
最近用动画顺手总结一下,下面几个网站都比较实用,可以看看自己需要的复制找一下哈~ 1.https://www.jq22.com/ 2.https://www.html5tricks.com/ 3.https://lhammer.cn/You-need-to-know-css/#/zh-cn/ 4.https://chokcoco.github.io/CSS-Inspiration/#/ 5.https://qishaoxuan.github.io/css_tr.原创 2022-05-24 16:39:17 · 248 阅读 · 0 评论 -
v-clock解决页面闪烁问题和v-pre的理解
一: v-clock使用v-if和v-show显示隐藏,频繁刷新页面,会出现元素闪烁问题使用,最外层div加v-clockbody里面加<div id="#app" v-cloak> <p>{{author}}</p></div>style里面加[v-cloak] { display: none;}二: v-pre的理解v-pre可以用来阻止预编译,有v-pre指令的标签内部的内容不会被编译,会原样输出。.原创 2022-05-23 17:14:06 · 1009 阅读 · 0 评论 -
前端vue点击切换(黑夜/白天模式)主题最新(源码)
目录源码白天模式如下图:黑夜模式如下图:VUE官网如下vue官网我这里引入本地vue.js文件,也可以引入显示vue,直接复制代码查看效果!!!源码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta nam原创 2022-05-23 15:48:47 · 2062 阅读 · 0 评论 -
前端实现lottie案例
目录Lottie简介相关链接一、lottie-web的使用1.原生html写法源码如下2.vue写法写法源码如下二、vue-lottie的使用1.原生html写法和lottie-web写法一样,插件换一下就行2.vue写法写法源码如下三、其他常用配置及API1.常用属性如下2.常用方法如下3.监听事件:Lottie简介Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库,能分析 Adobe After Effects 导出的动画,并且能让原生 App 像原创 2022-05-21 15:50:02 · 1092 阅读 · 0 评论 -
前端给网页添加标题和前面的小图标原生html和vue项目
目录效果图如下一.添加标题1.原生html添加方法2.vue添加方法二.网页前面的小图标1.原生html添加方法pc端和移动端同时添加html里面(1).pc端如下(2).移动端如下2.vue添加方法和上面添加标题一样效果图如下一.添加标题1.原生html添加方法head标签里面添加<title>小鸟</title>2.vue添加方法打开项目文件夹,在目录里面找到public文件,再打开找到index.html放到编译器vscode里面,添加标题,和原生方法一样二原创 2022-05-21 11:13:48 · 1348 阅读 · 0 评论 -
前端css媒体查询不生效问题和如何使用案例最新(源码全)
目录一. 不生效问题总结1. 语法里面`screen ` 和`and`前后都有空格2.引入meta标签语句(1)原生html引入方法(2)vue项目引入方法3.择器的权重问题(样式被覆盖)(1)相同class名写在下面的权重高于上面的权重,所以样式会覆盖上面的(2)html引入link标签样式(3)css选择器权重可以百度一下(4)样式后面加`!important`可以增加权重例如下面二. 媒体查询的使用1.首先引入meta标签兼容移动设备(手机、平板),上面已经有步骤2.参数解释:3. 兼容IE8,需要加原创 2022-05-19 16:27:47 · 2097 阅读 · 0 评论 -
前端浏览器不同百分比zoom获取方法
<div> <div ref="menuItem" style="width: 200px;height: 200px;border: 1px solid red; display: none;"></div> <div ref="btmBar" style="width: 200px;height: 200px;border: 1px solid rergb(0, 255, 136)"></div> </d..原创 2022-05-18 17:35:15 · 707 阅读 · 0 评论 -
js 获取浏览器页面信息判断pc\android\ios,缩放比例修改zoom
export default { data() { return { windowWidth: document.documentElement.clientWidth, //实时屏幕宽度 windowHeight: document.documentElement.clientHeight, //实时屏幕高度 zoom: 1, isIOS: false, isPC: true, }; }, watch: { w转载 2022-05-18 16:15:49 · 715 阅读 · 0 评论 -
vue手机适配媒体查询用法@media
注意:每个像素阶段都已经上下连接成了,1200px~767px,最高到最低,每个阶段样式字体大小,布局等都可以写在里面,可以按f12,查看各个手机端样式变化~ 在index.html页面引入css文件 <link rel="stylesheet" href="./css/index.css">在创建一个index.css文件,样式放入里面,自己也可以单独每个阶段分开分别创建个4css文件,全部引入index.css文件里面@media (min-width:1200px.原创 2022-05-17 15:01:33 · 2470 阅读 · 0 评论 -
vue点击实现密码显示隐藏三元运算符图片img切换
直接复制查看效果,图片自己更换一下自己本地即可<!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><.原创 2022-05-14 15:44:25 · 742 阅读 · 0 评论 -
jQuery插件库超级好用库
点击进入jQuery插件库-收集最全最新最好的jQuery插件感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!原创 2022-04-29 15:29:34 · 2379 阅读 · 0 评论 -
前端常用css样式而不长记住的样式总结
目录字体样式caret-color-webkit-overflow-scrolling持续更新中~~~字体样式caret-color可以去掉字体默认光标,可以用于css重置文件当中*{ caret-color: rgba(0,0,0,0);}-webkit-overflow-scrolling属性是来控制元素在移动设备上是否有回弹的效果auto:使用普通滚动,当手指在屏幕上离开时,滚动立即停止touch:使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚原创 2022-04-28 14:13:01 · 429 阅读 · 0 评论 -
elementUI中表单里面的select选择器字体被挤压如何设置宽度
只需要给el-form加一个label-width="100px"宽度加大,或者设置auto即可,源码如下: <el-form :rules="loginFormRules" :model="form" label-width="auto"> <el-form-item prop='method' label="Method"> <el-select v-model="form.method" placehold.原创 2022-04-24 09:26:23 · 2705 阅读 · 0 评论 -
前端vue单个按钮点击选中前后颜色变化案例
首页下面代码在html引入的vue方法都一样代码如下直接引用html看效果即可如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title> &原创 2022-04-15 11:24:47 · 2964 阅读 · 0 评论 -
前端css自定义滚动条样式背景颜色箭头等修改(图片加源码)
目录知识点可参考另一篇:注意事项:源码如下:效果图如下:知识点可参考另一篇:知识点不足,可点击跳转下一篇: CSS3自定义滚动条样式注意事项:下面代码不兼容ie,和Firefox 浏览器源码如下:不需要的可以注释掉,反之亦然,箭头分为上下左右,因为横向压缩,浏览器下面也会出现横向滚动条 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 20px; border-radius: 2原创 2022-04-14 16:52:31 · 2145 阅读 · 2 评论