style,网站css样式集合

vue-elementUI去掉input上下箭头

2024-08-08

一、问题描述vue中使用elementUI，在使用input输入框，设置type为number数字类型是，会出现如下上下箭头问题；如下所示：二、问题解决出现这个问题，只需要重置下elementUI的input样式即可解决，如下： /* element样式重置 start */ /* 去掉input尾部上下小箭头 start */ input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ ; -webkit-appearance: none !important; ; -moz-appearance: none !important; ; -o-appearance: none !important; ; -ms-appearance: none !important; ; appearance: none !important; ; marg

解决swiper插件过渡效果 effect: 'fade' 导致文字重叠问题

2024-01-22

969 0

在使用swiper插件做图片轮播的，会遇到过渡效果 effect: 'fade' 导致文字重叠问题，我们可以通过以下方法来解决这个问题方法一：加入如下方法effect:"fade", ;;fadeEffect:{ ;;;crossFade: true ;;}, 方法二：使用css样式控制.swiper-slide-active{ opacity:1 !important; }

解决苹果手机点击html网页输入框出现页面自动放大问题

2023-07-31

2402 0

做好网站，发现苹果手机，点击输入框调起键盘之后，解网页被方法，出现这个问题是应为没有在meta标签设置好禁止放大的缘故解决苹果手机点击html网页输入框出现页面自动放大问题：原始配置：<meta name="viewport" content="width=device-width, initial-scale=1.0"> 正确配置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 说明：区别在于加入了maximum-scale=1.0, user-scalable=no"，使得缩放比例为1，这样在苹果手机上就不会自动放大

解决swiper8轮播插件无法修改左右切换按钮样式问题

2023-07-28

1273 0

一、前言：在使用最新版的swiper插件siwper版本8的时候，发现使用swiper3和swiper4的时候，怎么设置左右轮播按钮样式都不生效。按照官网文档所说的，给左右按钮加颜色class，结果都没效果：二、方法：后面找到一种方法，因为swiper5以后开始的版本的都改成字体背景的形式了，以旧版的直接加样式class是不起作用的，需要设置font字体样式即可，如下：设置左右轮播点按钮宽度和高度、以及设置左右按钮箭头颜色#homeBanner-button-next{ width: 45px; height: 55px; right: 0px; background-color: rgba(0,0,0,0.2); color: #fff; } #homeBan

Mac版本的Sublime Text如何安装px转rem，px自动rem转化

2023-06-29

884 0

Mac版本的Sublime Text如何安装px转rem，px自动rem转化教程，本文使用的版本是4143版本。具体步骤如下：1、GitHub下载转换包（一个CSS的px值转rem值的Sublime Text 3自动完成插件）：https://github.com/flashlizi/cssrem2、进入packages目录：Sublime Text -> Preferences -> Browse Package或者点击首选项-浏览插件目录/Users/xinyi/Library/Application Support/Sublime Text/Packages3、复制下载的cssrem目录到刚才的packges目录里。4、重启Sublime Text。5、设置转换配置6、具体配置根据自己的需求设置转换大小，博主这里设为2

手机端、移动端@media 自适应样式的使用

2022-11-06

1418 0

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。通用手机端样式： @media all and (orientation : portrait) { /*竖屏*/ } @media all and (orientation : landscape) { /*横屏*/ }

Canvas生成海报文字居中

2022-08-30

1727 0

在弄canavs生成海报的时候，我们需要把文字居中。假设画布宽度为1080px宽度，我们除以二即可把文字居中context.font = 'bold 40px sans-serif'; context.textAlign = 'center';//文字水平居中 context.fillText(localStorage.getItem('我是文字文字文字'), (1080 / 2), 1620) //第一个参数是绘制文本第二个x设置画布宽度一半第三个是y坐标

HTML CSS 伪元素添加元素 :before和:after的使用

2022-08-15

2765 0

HTML CSS 伪元素添加元素 :before和:after的使用，可以给标签加背景加字体，并可以设置背景图片和文字。1、元素开始位置添加元素:before{ ;;content: '开始位置'; ;;color: green; } 2、元素结束位置添加元素:after{ ;;content: '结束位置'; ;;color: green; } 3、添加一个带背景的元素:before{ display:block; ;;content: ''; ;;width: 100px; ;;height: 100px; ;;background-image: url('../图片路径.png'); ;;background-size: 100% 100%; }

一个css动画loading收藏

2022-04-19

1483 0

有时我们在开发项目需要等待加载完毕后再显示数据，我们可以给它加个loading动画，以下是收藏的一个动画效果供大家参考和使用<!DOCTYPE html> <html lang="en"> <head> ;;<meta charset="UTF-8"> ;;<meta http-equiv="X-UA-Compatible" content="IE=edge"> ;;<meta name="viewport" content="width=device-width, initial-scale=1.0"> ;;<title>loading</title> </head> <style> ; ;;.loading__anim {;; ;;;;width: 35px; ;;;;height: 35px; ;;;;display: inline-block; ;;;

css关闭a标签点击出现蓝色背景问题

2022-03-26

2248 0

在做手机端页面的时候，会发现a标签点击会出现背景颜色问题，我们可以通过css样式来设置，解决这个问题。body { -webkit-tap-highlight-color:rgba(0,0,0,0); } 这句代码加上去之后就不会出现点击背景颜色问题了。

css实现导航鼠标悬停走动酷炫效果

2021-09-25

1754 0

我们有时做项目需要使用到类似上面的效果，可以参考下面的代码实现方法html页面代码：;;;<div class="header"> ;;;;;;;;<ul> ;;;;;;;;;;<li><a href="#">首页</a></li> ;;;;;;;;;;<li><a href="#">最新活动</a></li> ;;;;;;;;;;<li><a href="#">项目介绍</a></li> ;;;;;;;;;;<li><a href="#">关于我们</a></li> ;;;;;;;;;;<span class="move"> </span> ;;;;;;;;</ul> ;;;;</div> css代码实现：;&l

React如何引入外部css样式

2021-08-14

2998 0

比如有下面这段代码import React from 'react' import 'antd/dist/antd.css'; import { Layout, Menu, Breadcrumb } from 'antd'; const { Header} = Layout; function Index(props) { ;const state = { ;;;collapsed: false, ;}; ;;;return ( ;;;;;<Layout> ;;;;;;;;;<Header className="header"> ;;;;;;;;;;;<div className="logo"> ;;;;;;;;;;;;;;<img src="./logo192.png" alt="" /> ;;;;;;;;;;;;;;<span>Ant Design</span> ;;;;;;;;;;;</div> ;;;;;;;;;</Header> ;;;;;</Layout

微信小程序自定义颜色变量，以及如何使用wxss变量

2021-07-08

4171 0

导语：开发小程序过程中，我们如果经常会用到同个颜色或者字体大小，为了方便维护和修改，我们可以使用变量来调用，后期修改和维护也方便。1、首先在全局样式文件app.wxss下创建我们的颜色变量page{ ;;/*;定义主体颜色;*/ ;;--themeColor:#f65551; ;;/*;定义统一的字体大小;*/ ;;font-size:28rpx; } 2、使用样式变量view{ ;;color:;var(--themeColor); } 这里我们在index页面的index.wxss中使用var(--themeColor)来使用我们的上面定义的变量

利用Reset CSS重置前端样式表

2021-04-27

2447 0

重置样式表的目标是减少浏览器在默认行高、页眉边距和字体大小等方面的不一致。第一种方法，可以使用css样式，对应官网：https://meyerweb.com/eric/tools/css/reset//*;http://meyerweb.com/eric/tools/css/reset/; ;;;v2.0;|;20110126 ;;;License:;none;(public;domain) */ html,;body,;div,;span,;applet,;object,;iframe, h1,;h2,;h3,;h4,;h5,;h6,;p,;blockquote,;pre, a,;abbr,;acronym,;address,;big,;cite,;code, del,;dfn,;em,;img,;ins,;kbd,;q,;s,;samp, small,;strike,;strong,;sub,;sup,;tt,;var, b,;u,;i,;center, dl,;dt,;

animate.css动画执行时间修改方法

2021-04-23

2920 0

Animate.css;作为一款强大的预设css3动画库，很值得我们在项目中引用。但是统一的动画时间不是很好看。可以通过下面css对其进行修改。.ssxin1为class，可以独立为每个动画设置.ssxin1.animated;{ ;;;;-webkit-animation-duration:;1s;; ;;;;animation-duration:;2.5s;; ;;;;-webkit-animation-fill-mode:;both; ;;;;animation-fill-mode:;both; }

解决foundation5下CSS伪元素::after在iOS14以上系统不显示问题

2021-03-19

2768 0

最近在写页面，发现ios下不显示，安卓和pc折叠导航下的CSS伪元素::after都能正常显示。解决方法：因为官方默认高度为0没有加上高度height对此，我们只需增加一段样式<style> ;;.top-bar;.toggle-topbar.menu-icon;a;span::after{ ;;;;height:;1px; ;;;;background:;#fff ;;} </style> 即可解决该问题。

解决swiper4插件元素点击出现蓝色边框问题

2021-03-15

2268 0

关于swiper4插件元素点击出现蓝色边框问题，可以加上以下css代码来解决该问题。span:focus;{;outline:;none;;}

解决苹果ios手机下select标签和input标签显示问题

2020-09-01

3412 0

手机端页面在苹果ios下select标签和input标签显示颜色很奇怪？而安卓上显示没问题。出现这个问题的原因：因为ios有自己自带的样式，我们需要将默认样式取消掉，然后在设计自己的样式input[type=datetime-local]{ ;;;;;;-webkit-appearance:none; ;;;;;;outline:none; ;;;;;;border:none; } select{ ;;;;-webkit-appearance:;none;;;/*这样select默认的样式就没有了，后面的箭头也没有了，自己找个图标添加进去就可以了*/ ;;;;padding-right:30px;;;;;/*给右边图标留位置*/ ;;;;background:;url("arrow.png");no-repeat;

html,css 如何设置input的placeholder样式

2020-08-31

2714 0

html,css 如何设置input的placeholder样式，在做前端开发时，如果想写对input设置字体，文字大小，颜色等，我们该如何设置呢？通过如下设置兼容主流浏览器：-webkit-input-placeholder; ;;/* WebKit browsers */input::-moz-placeholder;;/* Mozilla Firefox 19+ */input::-ms-input-placeholder /* Internet Explorer 10+ */以下是个简单的例子，对input设置字体颜色和字体大小，如果需要其他的样式，加入即可。.rj_zyyform;input::-webkit-input-placeholder;{;/*;WebKit;browsers;*/ ;;color:;#7f7f7f; ;;font-size:;0.96rem; }

如何使用css给网站图片加灰色

2020-04-07

2417 0

2020年4日4，为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院发布公告，决定2020年4月4日举行全国性哀悼活动。从4月3日下午起，娱乐诸多网站自发更换灰色，以悼念逝者，致敬英雄，你发现，生活常见的网站以及app都变成灰色，现在来说下说是如何实现的。网站设置灰色html{ -webkit-filter:;grayscale(100%);;/*;webkit;*/ -moz-filter:;grayscale(100%);;/*firefox*/ -ms-filter:;grayscale(100%);;/*ie9*/ -o-filter:;grayscale(100%);;/*opera*/ filter:;grayscale(100%); filter:progid:DXImageTr

使用css截取字符串，保留省略号

2019-10-21

3032 0

文字过多，可以使用css来截取字符串，保留省略号，兼容性也是最好的。<p;class="p1">哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或</p> <p;class="p2">啦啦啦啦啦啦啦拉拉阿拉啦啦啦阿拉啦啦啦啦啦啦啦啦</p> <style> 显示一行，超出隐藏，保留省略号 .p1{ width:20rem; ;;;;font-size:;1.6rem; ;;;;text-overflow:;ellipsis; ;;;;overflow:;hidden; ;;;;white-space:;nowrap; ;;;;display:;block; } 截取两行，超出隐藏，保留省略号 .p2{ c

vue-elementUI去掉input上下箭头

解决swiper插件过渡效果 effect: 'fade' 导致文字重叠问题

解决苹果手机点击html网页输入框出现页面自动放大问题

解决swiper8轮播插件无法修改左右切换按钮样式问题

Mac版本的Sublime Text如何安装px转rem，px自动rem转化

手机端、移动端@media 自适应样式的使用

Canvas生成海报文字居中

HTML CSS 伪元素添加元素 :before和:after的使用

一个css动画loading收藏

css关闭a标签点击出现蓝色背景问题

css实现导航鼠标悬停走动酷炫效果

React如何引入外部css样式

微信小程序自定义颜色变量，以及如何使用wxss变量

利用Reset CSS重置前端样式表

animate.css动画执行时间修改方法

解决foundation5下CSS伪元素::after在iOS14以上系统不显示问题

解决swiper4插件元素点击出现蓝色边框问题

解决苹果ios手机下select标签和input标签显示问题

html,css 如何设置input的placeholder样式

如何使用css给网站图片加灰色

使用css截取字符串，保留省略号

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

vue-elementUI去掉input上下箭头

解决swiper插件过渡效果 effect: 'fade' 导致文字重叠问题

解决苹果手机点击html网页输入框出现页面自动放大问题

解决swiper8轮播插件无法修改左右切换按钮样式问题

Mac版本的Sublime Text如何安装px转rem，px自动rem转化

手机端、移动端@media 自适应样式的使用

Canvas生成海报文字居中

HTML CSS 伪元素添加元素 :before和:after的使用

一个css动画loading收藏

css关闭a标签点击出现蓝色背景问题

css实现导航鼠标悬停走动酷炫效果

React如何引入外部css样式

微信小程序自定义颜色变量，以及如何使用wxss变量

利用Reset CSS重置前端样式表

animate.css动画执行时间修改方法

解决foundation5下CSS伪元素::after在iOS14以上系统不显示问题

解决swiper4插件元素点击出现蓝色边框问题

解决苹果ios手机下select标签和input标签显示问题

html,css 如何设置input的placeholder样式

如何使用css给网站图片加灰色

使用css截取字符串，保留省略号

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录