
css
MrSuperPorter
前端开发,文武双全,勤奋好学。
展开
-
在vue项目中使用webp图片心得
1、首先要自己生成webp图片const webp=require('webp-converter');var fs = require('fs');var path = require('path');//解析需要遍历的文件夹,我这以E盘根目录为例//调用文件遍历方法fileDisplay('./webp');/** * 文件遍历方法 * @param filePath 需要遍历的文件路径 */function fileDisplay(filePath){ //根原创 2020-08-30 19:02:15 · 6527 阅读 · 1 评论 -
swiper、animate.css在react中开发fullpage页面
import React,{Component} from 'react';import './App.css';import Swiper from "swiper"import SwiperAnimation from '@cycjimmy/swiper-animation';import "animate.css/animate.min.css";export default ...原创 2020-02-16 18:42:47 · 893 阅读 · 1 评论 -
如何优雅的在css中使用webp
less/* 通过这个函数来引入图片,例如: #wrapper{ @include bg('../img/sample.jpg') } 这段代码经过编译后便会生成如下两句代码 #wrapper{ background-image:url('../img/sample.jpg'); } .webp #wrapper{ background-image:ur...原创 2019-11-19 21:23:01 · 1817 阅读 · 0 评论 -
input使用自动输入autofill的时候,修改背景颜色
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: #ededed !important; //字体颜色 -webkit-box-shadow: 0 0 0px 1000px transparent inset !imp...原创 2019-10-23 16:01:14 · 1291 阅读 · 0 评论 -
react 使用less开启css module
1.2.页面引入3.为了让全局样式也生效,需要在全局样式中添加 :global原创 2019-04-25 17:25:58 · 2128 阅读 · 0 评论 -
css文本强制换行
word-break: break-all;word-wrap:break-word;转载 2018-01-30 14:17:55 · 4451 阅读 · 0 评论 -
移动端常用的 reset.css
移动端css reset@charset "utf-8";/* 禁用iPhone中Safari的字号自动调整 */html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}/* 去除iPhone中默认的input样式 */input[type="submit"],input[type="r原创 2018-01-16 22:10:53 · 2716 阅读 · 0 评论 -
flexBox布局设置常用样式
.row { /*横*/ display: -webkit-box; display: -webkit-flex; /* Safari */ display: -moz-box; display: -moz-flex; display: -ms-flexbox; display: flex; width: 100%;}.row-wrap { /*横不换行原创 2018-01-16 22:07:13 · 583 阅读 · 0 评论 -
很大的图片在手机显示异常,比如拉到底部拉不上去
给图片计算高度原创 2018-01-15 21:52:34 · 449 阅读 · 0 评论 -
移动端适配(简单的js代码搞定)
第一步:创建一个js文件(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { v原创 2018-01-15 10:16:08 · 4102 阅读 · 0 评论 -
input设置宽高时候会出现top有内边距:
display:block;转载 2018-01-14 21:26:40 · 2381 阅读 · 1 评论 -
打电话标签
html马上拨打电话10086 js window.location.href = `tel://${phone}`原创 2018-01-14 21:19:38 · 715 阅读 · 0 评论 -
解决iPhone 浏览器上的圆角问题
-webkit-appearance:none;border-radius: 0px;原创 2018-01-14 21:17:29 · 498 阅读 · 0 评论 -
自定义chrome的输入框背景颜色
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important; -webkit-text-fill-color: #fff !important;}转载 2018-01-14 20:31:34 · 909 阅读 · 0 评论