html+css
性野喜悲
当了代码换生活。
展开
-
vue竖向步骤条
【代码】vue竖向步骤条。原创 2023-09-01 14:43:28 · 1037 阅读 · 0 评论 -
html之有序列表(ol)、无序列表(ul)、自定义列表(dl)
html之有序列表(ol)、无序列表(ul)、自定义列表(dl)原创 2023-03-25 18:03:22 · 1589 阅读 · 0 评论 -
html改变文字样式的常用标签
html改变文字样式的常用标签原创 2023-03-23 23:45:19 · 479 阅读 · 0 评论 -
html+vue页面请求json文件或接口
html+vue页面请求json文件或接口原创 2023-03-04 00:11:47 · 969 阅读 · 0 评论 -
element-ui编辑时值实时改变问题解决(深拷贝)
element-ui编辑时值实时改变问题解决(深拷贝)原创 2022-11-29 17:59:51 · 502 阅读 · 0 评论 -
vue 手机端页面适配PC端
vue 手机端页面适配PC端原创 2022-11-25 15:52:50 · 1066 阅读 · 0 评论 -
vue 手机端背景图片变形问题解决
vue 手机端背景图片变形问题解决原创 2022-11-02 15:27:04 · 630 阅读 · 0 评论 -
vue 背景图片铺满整个屏幕(适配所有机型)
背景图片铺满整个屏幕(适配所有机型)原创 2020-08-09 19:20:45 · 24348 阅读 · 10 评论 -
vue 封装带图标的标题组件
封装带图标的标题组件原创 2022-10-28 17:32:32 · 449 阅读 · 0 评论 -
前端用到的第三方组件库
手机端——vanthttps://youzan.github.io/vant/#/zh-CN/popupPC端—— ElementUihttps://element.eleme.cn/#/zh-CN/component/button原创 2022-05-12 11:21:44 · 406 阅读 · 0 评论 -
使用伪类(before,after)给元素添加分割线(|)
html: <div class="pseudo-class">伪类元素</div>css:在元素前面加 |使用::before .pseudo-class { font-size: 24px; font-family: Helvetica Neue; font-weight: 400; color: rgba(238, 50, 54, 1); display: flex; align-items: center原创 2022-04-28 11:52:56 · 2060 阅读 · 0 评论 -
vue 后台返回\n换行前端显示、后端返回字符区分中英文换行显示(replace替换)
vue 后台返回\n换行前端显示、后端返回字符区分中英文换行显示(replace替换)原创 2021-12-22 15:47:54 · 1985 阅读 · 0 评论 -
渐变边框写圆角
实现带圆角的渐变边框(border-image和border-radius不能同时生效问题)_code_5的博客-CSDN博客_border-image 圆角转载 2021-11-26 15:11:23 · 340 阅读 · 0 评论 -
中国地图,手机与PC端共用,可缩放大小,可设置默认选中省份
<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta http-equiv="pra.原创 2021-11-19 15:23:29 · 1969 阅读 · 0 评论 -
html2canvas生成图片出现白边儿的解决方法
html:生成按钮:<div class="share-btn" @click="generatePoster">生成图片</div>海报内容: <div class="s-page" id="sPage" v-show="!poster"> <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/vr_ar/share_img.p.原创 2021-11-18 18:46:03 · 4153 阅读 · 0 评论 -
固定定位下拉框点击自动回到页面问题解决
点击下拉框时页面自动回到顶部。 <dl id="sample" class="dropdown nav-text-select"> <dt><a href="#"><span>简体中文</span></a&g原创 2018-08-23 18:52:12 · 1338 阅读 · 0 评论 -
css设置内容禁止换行与超过宽度自动换行
html<div class="refund-information-item-name">爱情里有两种遗憾:一种是你曾经那么用力地爱过,最后却发现那个人根本不值得;另一种是你没有好好地去爱,失去了才发现那是一个真正值得的人。</div>css(禁止换行): .refund-information-item-name { color: rgba(58, 63, 67, 0.6); width: 100px; white-space原创 2021-09-09 10:11:56 · 1230 阅读 · 0 评论 -
给el-input type=“number“的文本框设置默认值
文本框<el-inputtype="number"v-model="ruleForm.voteLimitNum"class="player-ipt"></el-input>jsreturn{ruleForm:{voteLimitNum:1,//给同一选手...原创 2021-07-22 11:51:55 · 11198 阅读 · 0 评论 -
element UI中el-dialog双层嵌套,遮罩显示异常处理
1.给被嵌套的dialog增加custom-class属性 和append-to-body属性<el-dialog custom-class="el-dialog-s" append-to-body :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""></el-dialog>2.自定义样式,覆盖追加append-to-body,样式失效...转载 2021-07-21 17:12:38 · 1438 阅读 · 2 评论 -
vue canvas 单页面(html)海报且显示多行文本与渐变文字
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>arpara产品发布会邀请函</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css" /> <style> #app { posi.原创 2021-07-05 16:42:35 · 528 阅读 · 0 评论 -
vue 数组数据为奇数,但是样式需要隔行换色(奇偶数据颜色保持一致)
没有做处理的效果:数组: attendeeSignFormVOList: [ { name: "自定义名称1", data: "自定义数据1" }, { name: "自定义名称2", data: "自定义数据2" }, { name: "自定义名称3", data: "自定义数据3" }, ],html:<!-- :class=" attendeeSi原创 2021-06-24 14:55:38 · 1188 阅读 · 0 评论 -
vant 上传图片普通用法可预览
html: <div class="upload-img"> <div class="upload-img-text">请上传头像</div> <van-uploader :after-read="afterRead"> <img :src="canvasImg" ref="uploadImg" alt="" v-if="canvasImg" width="80" height="80"> .原创 2021-05-25 18:15:37 · 1444 阅读 · 0 评论 -
vue el-pagination 分页数据获取序号(正序和倒序)
正序:(1,2.....9,10) <el-table-column label="顺序" width="100" show-overflow-tooltip> <template slot-scope="scope"> <span >{{ scope.$index + 1 + (pageIndex - 1) * pageSize }}原创 2021-05-24 15:20:09 · 1081 阅读 · 0 评论 -
单页面微信分享(html+vue)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta http-equiv="pragma" content=.原创 2021-05-12 14:15:26 · 420 阅读 · 0 评论 -
vue swiper根据字段判断是否单页显示(h5)
html: <van-swipe class="my-swipe" v-if="lotteryVOList && lotteryVOList.length" > <van-swipe-item v-for="(item, index) in lotteryVOList" :autoplay="3000"原创 2021-04-16 18:49:21 · 247 阅读 · 0 评论 -
3d抽奖动画
<html><head> <style> body { overflow: hidden; position: absolute; width: 100%; height: 100%; background: black; } .wrapper { position: a.原创 2021-04-16 10:24:28 · 313 阅读 · 0 评论 -
解决el-dilog标题+动态标题与标题大小不一问题(自定义)
html:1、动态标题:<el-dialog :title="`添加指定中奖人员${form.awardType==1?'(指定人员)':'(白名单)'}`" :visible.sync="dialogVisible" :close-on-click-modal="false" width="990px"> 弹框内容 </原创 2021-04-14 20:33:25 · 1688 阅读 · 0 评论 -
文本框获得焦点后改变图标颜色,边框颜色等样式
https://www.cnblogs.com/coco1s/p/9406413.html转载 2021-03-25 11:04:30 · 1728 阅读 · 0 评论 -
vue scss引用(完美解决vue样式继承问题)
原文链接:https://www.hangge.com/blog/cache/detail_2543.html原创 2020-08-12 15:57:01 · 1705 阅读 · 0 评论 -
小程序去除默认边框和文本框样式
button::after{border:none;去除button默认边框}input{list-style:none;//去除默认样式outline:none;//去除默认选中边框border:none;//去除默认边框}原创 2018-11-01 16:54:39 · 6009 阅读 · 1 评论 -
vue 使用rem(手机端PC端通用)
main.jsnew Vue({ router, store, render: h => h(App),}).$mount('#app');//rem计算function setRem() { var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值 var bodyWidth = document.body.client...原创 2020-04-20 10:11:38 · 4592 阅读 · 13 评论 -
vue H5端判断安卓跟ios显示不同的背景图
html:<div :class="`${isApple==true ? 'index-cont-phone' : 'index-cont'}`" ></div>css: .index-cont{ width: 100%; height: auto; min-height: 100vh; overflow-x:hidden; background: url("https://t.原创 2021-03-16 18:01:14 · 439 阅读 · 0 评论 -
css3实现闪光金币效果
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"></head> <style type="text/css"> *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizi.原创 2021-03-16 16:31:42 · 718 阅读 · 0 评论 -
手指点击动画
https://blog.csdn.net/sinat_36263705/article/details/80301689转载 2021-03-10 15:09:39 · 386 阅读 · 0 评论 -
vue+css3 旋转木马效果
${ASSET_HOST}为封装的统一的图片路径<template><!-- :style="{backgroundImage: 'url(' + `${ASSET_HOST}/main_bg.jpg` + ')',backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}" --> <div class="index"> <div class="index-bg" :style=.原创 2021-03-09 18:21:42 · 1728 阅读 · 0 评论 -
纯css制作3D旋转照片墙
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>img_3D</title></head><style type="text/css"> @keyframes an1{ 0%{ transform: rotateY(0deg) ; }原创 2021-03-02 16:39:34 · 1263 阅读 · 0 评论 -
el-table操作列
https://blog.csdn.net/qq_39918566/article/details/110186260转载 2021-01-16 18:29:26 · 879 阅读 · 0 评论 -
让文本框输入的文字距离左边框4px
input{text-indent:4px;}//首行缩进原创 2016-10-17 14:50:27 · 15140 阅读 · 2 评论 -
vue 行内多重判断,状态使用枚举
vue 行内多重判断,状态使用枚举原创 2020-11-14 15:26:35 · 1947 阅读 · 4 评论 -
css3绘制异形图(弧形缺口,箭头缺口,底部为圆弧,重叠按钮,缺角矩形,折角矩形,div边角,右上角添加角标)
css3绘制异形图(弧形缺口,箭头缺口,底部为圆弧,重叠按钮,缺角矩形,折角矩形,div边角,右上角添加角标)原创 2020-11-13 19:45:52 · 7595 阅读 · 1 评论