css
关注
分享
扫一扫
叶落无痕123
好好学习天天向上
展开
-
textarea回车换行的方法
法一：textarea 多行回车换行，显示的时候换行设置：在使用textarea标签输入多行文本的时候，如果没有对多行文本显示处理，会导致没有换行的情况Css 属性:white-spacewhite-space 属性用于设置如何处理元素内的空白，其中包括空白符和换行符。只要在显示内容的地方将该属性设置为white-space: pre-line或者white-space:pre-wrap，多行文本就可以换行了。法二：在日常的开发中，我们经常会遇到需要在textarea中输入文本..原创 2022-04-13 10:42:12 · 23237 阅读 · 0 评论 -
网站变灰色
<style> html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Micro..原创 2022-03-28 11:31:51 · 394 阅读 · 0 评论 -
css——利用translate让元素居中
css——利用translate让元素居中父元素：position: relative;居中元素：position: absolute;top: 50%; //基于父元素left: 50%; //基于父元素transform: translate(-50%, -50%); //基于自身注意：此方法可能会导致像素模糊问题，因为CSS 的 transform： translate 属性在作元素位移时，极有可能发生像素点无法对齐的情况。正常情况下，元素的边缘应该和像素..转载 2021-08-30 09:35:43 · 1140 阅读 · 0 评论 -
强大的display:grid
自从用习惯flex布局我基本已经不怎么使用float了。现在又出现了grid布局，就像flex的升级版，布局上十分强大。主要属性：grid-template-columns：//竖向排列grid-template-rows：//横向排列首先比较一下flex和grid实现自适应九宫格，高度800px，宽度适应：flex超过一层后样式就复杂了，特别是边框的处理有点复杂。(方法很多，不一一去展示了)。<html><head> <style type=转载 2021-08-07 15:39:33 · 1070 阅读 · 0 评论 -
H5 微信小程序 价格保留两位小数 分为整数部分和小数部分
在项目中经常遇到将价格分为整数和小数部分，字体大小不一样显示。const actualNumber = item.actualAmount.toFixed(2);const priceArray = actualNumber.split('.');item.actualAmountText = priceArray[0];item.amountDecimalText = `.${priceArray[1]}`;...转载 2021-05-19 14:50:16 · 680 阅读 · 0 评论 -
解决input,number类型的maxlength无效
使用input数字number类型的时候maxlength无效，假设需要控制输入数量为5，可以用以下方式：无效：<input type="text" maxlength="5" /> 效果ok，当<input type="number" maxlength="5" />有效：<inputtype="number"oninput="i...转载 2019-08-26 08:18:37 · 6284 阅读 · 0 评论 -
CSS 去掉input默认样式
input{ background:none; outline:none; border:none;}如果input必须要有边框，但需要去掉选中时的蓝色框，则：input{ background:none; outline:none; border:1px solid #ccc;}input:focus{ ...转载 2019-08-26 08:16:04 · 5835 阅读 · 0 评论 -
input 使用outline属性去掉淡蓝色边框不生效
1.常用的做法是使用outline:none 这个样式就可以了<html> <head> <title> 测试 </title> <style type="text/css"> input{ outl...转载 2019-01-10 10:12:53 · 5442 阅读 · 0 评论 -
上下跳动的箭头 css
在H5场景动画时，常常会用到着一样一个效果，箭头持续上下跳动来引导用户上下滑动整个页面<!DOCTYPE html ><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <tit转载 2019-01-10 09:49:22 · 3050 阅读 · 0 评论 -
论html标签中的style="visibility:visible"
style="visibility:visible"之前改过一个bug，一个开源的【上传文件】按钮，需求是当上传的文件大于5条的时候，该按钮要隐藏，否则要显示。 我很快就写出来了，并且达到了按条件显示和隐藏的效果，可以后来同事发现隐藏再显示出来的按钮，功能不好用了。 后来找到原因，是因为我用了style=’display:none’; 也就是说，如果仅仅是为了隐藏该标签，而不想使标签失效（...转载 2019-01-14 11:46:36 · 2862 阅读 · 0 评论 -
CSS的!important属性 以及对它的误解
通过我的测试，IE6也是支持!important属性的，但也可以用该属性来区分浏览器。比如有个DIV，它的position属性是absolute，它的top属性在IE留言器下希望是屏幕高度的60%，而在其他浏览器下给个固定值300px，我们可以这么写CSSdiv{position:absolute;top:expression(screen.height*0.6)!importan...转载 2019-01-14 09:19:29 · 1204 阅读 · 0 评论 -
css 实现div内显示两行或三行，超出部分用省略号显示
一、div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;123二、div内显示两行或三行，超出部分用省略号显示 overflow: hidden; text-overflow: ellipsis; display: -webk...转载 2018-11-29 18:19:25 · 25704 阅读 · 1 评论 -
cursor的所有样式
cursor可以为按钮或者某些区域强制定义一种鼠标移上去的鼠标光标形状。定义和用法cursor 属性规定要显示的光标的类型（形状）。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。可能的值值 描述 url 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 UR...转载 2018-09-15 11:21:19 · 4072 阅读 · 0 评论 -
css3中background渐变
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性，目前火狐3.6以上版本和google浏览器支持这个属性。background: -moz-linear-gradient(top, #bccfe3 0%, #d2dded 100%); 适合 FF3.6+ background: -webkit- gradient(linear原创 2017-07-07 17:55:19 · 1915 阅读 · 0 评论 -
为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟，而且也涌现出了越来越多的 CSS 的预处理器框架。本文向你介绍使用最为普遍的三款 CSS 预处理器框架，分别是 Sass、Less CSS、Stylus。首先我们来简单介绍下什么是 CSS 预处理器，CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程原创 2017-06-03 09:40:24 · 583 阅读 · 0 评论