css
a_靖
大前端,全栈工程师
展开
-
浏览器窗口放大缩小自动适配字体和元素的大小
根据浏览器窗口大小自动适配字体和元素的大小原创 2024-08-13 11:09:18 · 306 阅读 · 0 评论 -
JS实现文字打印效果(完整代码附效果图)
VUE实现文本逐字打印的动态效果完整代码原创 2024-08-05 17:06:21 · 278 阅读 · 0 评论 -
CSS设置背景图片宽高全屏显示,高度自适应屏幕裁切
CSS实现背景图片宽高占满盒子,自适应裁切原创 2024-06-28 17:13:23 · 428 阅读 · 0 评论 -
网页禁止上下滑动出现本页面由xxx提供
H5网页的环境,禁止用户滑动整个网页出现本页面由XXX提供原创 2024-06-25 10:39:22 · 269 阅读 · 0 评论 -
H5进度条样式,自定义进度条
自定义一个进度条样式原创 2024-06-04 11:46:21 · 447 阅读 · 0 评论 -
CSS画一条虚线,并且灵活设置虚线的宽度和虚线之间的间隔和虚线的颜色
CSS灵活设置虚线,虚线的宽度,虚线之间的间隔,虚线的颜色,一行代码实现原创 2024-04-22 17:32:15 · 4645 阅读 · 2 评论 -
CSS使用自己的字体
在项目中使用特殊字体,需要2个步骤。请看详细教程原创 2024-04-11 14:37:12 · 984 阅读 · 0 评论 -
CSS实现风车转动动画效果,水流动动画效果(完整代码附效果图)
该效果为无限循环转动,因为是GIF,所以只截了一般分,看起来会卡顿,实际效果不卡顿。rotate 是旋转动画,shake 是模仿水流动画。原创 2024-04-10 11:32:29 · 835 阅读 · 0 评论 -
CSS英文单词强制截断换行
CSS单词强制换行原创 2023-11-15 16:58:24 · 1913 阅读 · 0 评论 -
CSS实现文本左右对齐
css设置样式,让文本工整的左右对齐。原创 2023-11-07 17:00:44 · 2424 阅读 · 0 评论 -
CSS实现围绕按钮边框转圈的光线效果
CSS实现围绕按钮边框转圈的光线效果,可以自由改变按钮的光线渐变颜色和按钮边框颜色,背景色等。原创 2023-09-26 15:47:59 · 2502 阅读 · 0 评论 -
CSS设置滚动条的宽度
自定义滚动条的宽度和背景颜色,滚动条颜色原创 2023-04-18 11:07:28 · 6198 阅读 · 0 评论 -
CSS动画无限循环
实现代码div{ animation:myanimation 5s infinite;}@keyframes myanimation { from {top:0px;} to {top:200px;}}注:animation ->Css3动画属性 myanimation->随便命名 infinite 可重复,去掉就不重复了top可以改为宽高,或者方向等等任何CSS属性form 开始to结束对你有帮助的话,点个赞吧~...原创 2021-12-17 10:55:42 · 10522 阅读 · 0 评论 -
CSS超出部分隐藏,显示滚动条
实现功能:固定一个高度,超出该高度的部分就隐藏,并且显示滚动条能上拉下滑滚动实现代码:height: 500rpx;overflow-x: hidden;overflow-y: scroll;实现功能:固定一个宽度,超出该宽度的部分就隐藏,并且显示滚动条能左右滚动实现代码:width: 500rpx;overflow-x: scroll;overflow-y: hidden;对你有帮助的话点个赞吧~...原创 2021-12-17 10:51:13 · 10596 阅读 · 1 评论 -
CSS超出隐藏并且能滚动
效果图实现CSS代码:height: 500rpx;overflow-x: hidden;overflow-y: scroll;效果图的代码:<!-- 豆豆明细弹窗 --> <view class="mxBoom" v-show="mxBoom"> <view class="mxBoomContent"> <view class="mxBoomTip"> 苗豆明细 </view>原创 2021-10-15 18:10:53 · 2667 阅读 · 0 评论 -
CSS动画
效果图:实现效果描述:子元素相对父元素水平垂直居中并重复循环放大缩小实现代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <s原创 2021-04-20 18:34:30 · 1588 阅读 · 0 评论 -
CSS垂直水平居中
效果图:列出两种写法:1.父元素规定子元素内容垂直居中display: flex;align-items: center;justify-content: center;<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javas原创 2021-04-20 18:05:54 · 1611 阅读 · 0 评论 -
css背景图固定在底部,其它部分用背景颜色
效果图:实现代码:<view class="" style="background:#AACD22;border-radius: 15rpx;"> <view class="title">{{ item.title }}</view></view>.title { display: flex; box-sizing: border-box; padding: 12rpx 20rpx 10rpx; width: 100%;原创 2021-01-21 10:15:55 · 3289 阅读 · 0 评论 -
CSS垂直居中
代码position: fixed;left: calc(50% - 100rpx);top: calc(50% - 150rpx);width: 200rpx;height: 300rpx;原创 2021-01-14 16:08:08 · 1682 阅读 · 0 评论 -
uniapp富文本复制文字内容
设置样式即可 text, span, p { user-select: text; -webkit-user-select: text; }原创 2020-11-17 16:36:56 · 4024 阅读 · 6 评论 -
Flex 布局详解 - 转自阮一峰老师
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何的盒子都可以使用它。下面我们来看一下使用 Flex 布局的容器的属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content1.flex-direction属性决定主轴的方向(即项目的排列方向)。.box { flex-direction: row | row-reverse |.转载 2020-09-29 11:13:43 · 3615 阅读 · 0 评论 -
h5轮播图及效果图
效果图:代码:<!doctype html><html> <head> <meta charset="utf-8"> <title>jQuery响应式卡片轮播切换代码</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id原创 2020-07-13 11:27:13 · 7104 阅读 · 0 评论 -
样式集(四)搜索框样式
上图:代码:// pages/search/search.jsvar text='' Page({ data: { input_val:"", list:[] }, input_p(e){ this.setData({ input_val:e.detail.value }) }, onLoad: function (options) { },}) <view class='page_row' bindta原创 2020-06-18 16:41:25 · 2535 阅读 · 0 评论 -
样式集(三)成功页面样式模板
上图:代码:<!--pages/result/result.wxml--><view> <image class="scc" src="/img/scc.png"></image> <view class="resuil">办理成功</view></view><view class="btn" catchtap="re_home">返回首页</view>/* pages/原创 2020-06-18 16:29:39 · 4788 阅读 · 1 评论 -
样式集(二) 信息填写样式模板
上图:代码:// pages/upInfo/upInfo.jsPage({ data: { tipsTxt: "请填写正确的业务流水号", showTips: false, showCityList:false, city:"", cityList:["济南市","青岛市","枣庄市","东营市","烟台市","潍坊市","东营市","烟台市","潍坊市","东营市","烟台市","潍坊市","济宁市","泰安市","威海市","週博市"]原创 2020-06-18 16:26:03 · 2177 阅读 · 0 评论 -
样式集(一) 通用商品列表样式
上图:上代码:// pages/choosePackage/choosePackage.jsPage({ data: { list:[1,2,3], }, onLoad: function (options) { }, nav_upInfo(){ wx.navigateTo({ url: '../upInfo/upInfo', }) },})<!--pages/choosePackage/choosePackage.w原创 2020-06-18 16:21:36 · 2903 阅读 · 0 评论 -
VUE 动态绑定class
第一种:通过一个布尔值判断样式类是否生效//isActive 是在data里面布尔值, rotateRight 是 class 样式类//isActive 为true时样式类 rotateRight 生效<div :class="{rotateRight:isActive}">abs</div>第二种:通过三元运算符判断使用哪个样式类//isAc...原创 2019-10-12 12:12:42 · 5849 阅读 · 0 评论 -
开发常用CSS
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。正文:@keyframes -> 使 div 元素匀速向下移动 div{animation:myanimation 5s infinite;} @keyframes myanimation {from {top:0px;}to {top:200px;}}注:animation ->...原创 2017-09-20 18:49:55 · 2183 阅读 · 2 评论 -
css画图笔记
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。正文:在网页中,经常会用到各种Icon,如果老是麻烦设计狮画出来不免有些不好意思,所以有时候我们也可以用CSS写出各种简单的形状,一来可以减轻他们的负担,二来也可以使用CSS替代图片,提高加载速度。在网页中,结合CSS能画出来的最基本的形状就是矩形,所以,我们可以在矩形的基础上做出各种变换,得到很...翻译 2017-12-22 11:33:36 · 2165 阅读 · 2 评论 -
积分页面布局记录
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。正文:、// pages/user/my_integral/record/record.jsvar app = getApp();var util = require("../../../utils/util.js")Page({ data: { url_data:...原创 2018-01-24 14:18:01 · 3201 阅读 · 2 评论 -
按钮水平居中
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。<button class='wx_7_button'>复制兑换码</button>.wx_7_button{ width: 240rpx; height: 70rpx; line-height: 70rpx; color: white; d...原创 2018-10-10 16:10:47 · 10619 阅读 · 1 评论 -
CSS 文字,边框实现从左至右颜色渐变
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。1.文本从左至右颜色渐变效果图:2.边框从左至右颜色渐变效果图:实现代码:1.文本从左至右颜色渐变实现代码:<!DOCTYPE html><html> <head> <meta charset="utf-...原创 2018-10-26 14:42:28 · 9859 阅读 · 1 评论 -
css 引用字体
最近遇到个问题,页面使用的字体要用PingFangSC字体,引入方法如下:简单介绍下PingFangSC字体:(1)苹方-简 常规体font-family: PingFangSC-Regular, sans-serif;(2)苹方-简 极细体font-family: PingFangSC-Ultralight, sans-serif;(3)苹方-简 ...原创 2019-09-23 17:26:25 · 4933 阅读 · 0 评论 -
Flex布局教程(来源:阮一峰)
网页布局(layout)是 CSS 的一个重点应用。Flex 布局将成为未来布局的首选方案。本文介绍它的语法,下一篇文章给出常见布局的 Flex 写法。网友JailBreak为本文的所有示例制作了Demo,也可以参考。以下内容主要参考了下面两篇文章:A Complete Guide to Flexbox和A Visual Guide to CSS3 Flexbox Propertie...翻译 2019-10-08 18:02:15 · 3541 阅读 · 0 评论 -
input 默认样式的修改
/* 修改input选中的默认边框样式 */ outline: none; /* 修改input的选中时的光标颜色 */ caret-color:red; /* 修改input的选中时的默认边框 */ border: none; /* 修改input的提示文字的默认样式 */ input::-webkit-i...原创 2019-10-10 15:46:38 · 5547 阅读 · 0 评论 -
css定位
如果对您有帮助,请关注我,欢迎加入微信小程序开发交流QQ群(173683866),有问题可以加群问我或者问群里的大神!!!微信扫码进入微信群,小程序技术交流答疑群。微信群介绍:群费 1元/周,群主每周会抽出半小时至一小时集中答疑, 平常有时间也会回复。大家平常也可以相互交流学习。。私聊群主(a_靖)问题 8元/次。正文:定位 position 它的值为:absolute ...原创 2017-09-25 10:42:00 · 1912 阅读 · 1 评论