css
终是后来居上
emmm
每周五-周日进行更新~
希望对初学者们能有帮助~
展开
-
CSS3四个自适应关键字——fill-available、max-content、min-content、fit-conten
前面的话 一般地,有两种自适应:撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为’fill-availabel’和’fit-content’。除此之外 ,还新增了更细粒度的’min-content’和’max-content’。这四个关键字可用于设置宽高属性。本文将详细介绍CSS3中的这四个自适应关键字[注意]IE浏览器不支持,webkit内核浏览器需添加-webkit-前缀fill-availablewidth:fill-available表示撑满可用空间举例来说,页面中一个元素,转载 2020-07-29 16:03:04 · 332 阅读 · 0 评论 -
用CSS实现横向滚动条
在进行app制作时,需要使用横向滚动条是内容展示更完善首先,这是html代码:这是CSS代码:要点:设置显示内容的宽white-space是防止内容自动折行overflow-y设置为hidden,否则会出现上下滚动条::-webkit-scrollbar可以设置滚动条样式,display:none,去掉滚动条...转载 2020-07-18 09:55:26 · 4512 阅读 · 0 评论 -
css实现小三角
<div class="box sanjiao_border"> <!--ie6下需用,非ie6无需--> <i class="before"></i><i class="after"></i></div>.sanjiao_border:before,.sanjiao_border .bef...转载 2019-12-14 15:39:30 · 232 阅读 · 0 评论 -
border 的线样式
原创 2019-06-05 16:54:25 · 1309 阅读 · 0 评论 -
CSS3 的视口单位vw、vh实现自适应(带有px,em,rem的简单介绍)
一、px,em,rem,vw的简单介绍1、pxpx其实就是像素的意思,全称pixel,也就是图像的基本采样单位。对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机。而我们通常所说的显示器分辨率是指桌面设定的分辨率,不是显示器的物理分辨率,但是现在我们的桌面分辨率和物理分辨率几乎是一致的,因为这样显示效果最佳。所以总的来说px就是对应我们显示器的分辨率。这样就会有个问题就是如果使用px...转载 2019-07-01 17:58:39 · 1017 阅读 · 0 评论 -
使用CSS将图片转换成黑白(灰色、置灰)
CSS3 greyscale 滤镜实现.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); ...转载 2019-07-02 11:58:09 · 868 阅读 · 0 评论 -
鼠标右键弹框事件,阻止默认自定义函数
document.oncontextmenu=function(){/*阻止浏览器默认弹框*/return false;};原创 2019-07-08 09:50:46 · 468 阅读 · 0 评论 -
CSS3 word-break 属性
在恰当的断字点进行换行:word-break:hyphenate;normal 使用浏览器默认的换行规则。break-all 允许在单词内换行。keep-all 只能在半角空格或连字符处换行。...原创 2019-06-29 09:28:48 · 269 阅读 · 0 评论 -
c3动画缩放
<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title><style> div{ width:100px; height:100px; background:red;}div:hover{ transform:...原创 2019-07-16 11:52:22 · 639 阅读 · 0 评论 -
css实现六边形图片(最简单易懂方法实现高逼格图片展示)
(1)那么第一步,当然是绘制容器,容器是一个有宽高的div。 绘制之前,必须明白一个问题,那就是,等边六边形是通过三个相同宽高的div拼合而成的(如下图所示),所以div的宽高必须满足 √3 倍的条件才能拼成一个正六边形,这里就不带大家计算这个值了,有兴趣可以用三角函数私下自己计算一下。在此处,我设置了外层容器宽为190px, 高为110px, 然后设置背景图片 。代码如下<...转载 2019-09-03 15:21:35 · 2873 阅读 · 0 评论 -
CSS3 实现六边形Div图片展示效果
二. 原理讲解这个效果用到的主要知识点 :1. transform: rotate(120deg); 图片旋转2. overflow: hidden; 超出隐藏3. visibility: hidden; 也是隐藏,与 display:none; 相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置我们要用到3层div进行旋转来得到这个效果(注: 3层 div 的大小是一样的)。最...转载 2019-09-05 10:13:22 · 1162 阅读 · 0 评论 -
css3动画简介以及动画库animate.css的使用
过渡动画第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形(transform)等等这些属性。css过渡只能定义首和尾两个状态,所以是最简单的一种动画。要想使一个元素产生过渡动画,首先要在这个元素上用transition属性定义动画的各种参数。可定义的参数有transition-property:规定对哪个属性...原创 2019-05-05 13:56:43 · 1690 阅读 · 0 评论 -
vue v-for倒序显示 / JSON数据倒序显示
渲染数据时,有时候往往需要把最新的那条数据放在最上面,最简单的方法就是在渲染之前把数据先倒序排列好,再渲染到网页上。这时就要用到reverse()。<div class="list" v-for="(item,index) in reverseSum"> <ul > <li>{{item.id}}</li> <li>{{it...原创 2019-04-20 16:27:25 · 3620 阅读 · 2 评论 -
html中“↵”换行符号处理
var myString = myString.replace(/(\r\n|\n|\r)/gm, "<br />");原创 2019-04-19 14:43:56 · 5459 阅读 · 0 评论 -
placeholde修改默认样式
input::-webkit-input-placeholder {9 /* placeholder颜色 /10 color: #aab2bd;11 / placeholder字体大小 /12 font-size: 12px;13 / placeholder位置 */14 text-a...原创 2019-02-16 14:13:35 · 1780 阅读 · 0 评论 -
select默认文字不出现在下拉选项
select默认文字不出现在下拉选项disabled selected hidden&amp;amp;lt;option value=&amp;quot;&amp;quot; disabled selected hidden&amp;amp;gt;choose01原创 2019-01-22 17:28:37 · 798 阅读 · 0 评论 -
文本溢出隐藏显示...和英文换行
对要溢出隐藏的文本添加样式white-space: nowrap;overflow: hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;原创 2019-01-22 17:02:57 · 1577 阅读 · 0 评论 -
更改checkbox默认样式
原创 2019-01-22 16:54:21 · 629 阅读 · 0 评论 -
禁止textarea拉伸
禁止拉伸 style="resize:none" <textarea rows="10" cols="30" style="resize:none" >我是一个文本框。</textarea>原创 2019-03-21 11:05:50 · 132 阅读 · 0 评论 -
new Date() 日期格式处理
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) // 所以获取当前月份是myDate.getMonth()+1; myDate.g...转载 2019-03-25 10:23:45 · 4141 阅读 · 0 评论 -
css select 文字右对齐
1、添加 dir 属性,适合中文,但是会导致英文单词或者有空格的地方文字变成从右到左。<select dir="rtl"> <option>Foo</option> <option>bar</option> <option>to the right</option&g原创 2019-03-18 14:09:08 · 1559 阅读 · 0 评论 -
a标签点击去除默认样式 和 背景色
css样式:a{ text-decoration:none; color:#333; } 一、取消a标签在移动端点击时的蓝色-webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none; ...原创 2019-03-22 14:42:03 · 12290 阅读 · 0 评论 -
移动端限制input框只能输入数字,在iOS不生效的解决办法
pattern=’[0-9]*’原创 2019-02-18 18:01:38 · 1043 阅读 · 0 评论 -
css 过度效果 返回顶部
$(".mmhhq1").click(function() { $("html,body").animate({scrollTop:0},500); });css3过度效果animate返回顶部scrollTop:0原创 2019-03-23 13:19:33 · 1263 阅读 · 0 评论 -
input type=number 去除后面的箭头
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !important;}input[type="number"]{-moz-appearance:textfield;}原创 2019-04-10 13:37:52 · 767 阅读 · 0 评论 -
正则判断 手机号
if(/^[1][2,3,4,5,7,8,9][0-9]{9}$/gi.test(this.wjusername)==false){ alert("用户名(手机号)错误") }判断的正则/^[1][2,3,4,5,7,8,9][0-9]{9}$/判断wjusername这个变量 是不是符合前面的正则gi.test(this.wjusername)...原创 2019-04-01 14:23:53 · 277 阅读 · 0 评论 -
js点击添加删除样式名
给一个节点添加和删除class名添加:节点.classList.add(“类名”);删除:节点.classList.remove(“类名”);原创 2019-01-22 17:04:53 · 1907 阅读 · 0 评论 -
解决iphonex屏幕过长背景图片或者放在元素里面的图片不能铺满的问题
目前有四种方法1.让设计单独设计一版iphonex的尺寸的图,用js代码判断设备,如果检测到是iphonex就换图//如果设备是iphonex则追加元素填补空余 function isIPhoneX(fn){ var u = navigator.userAgent; var isIOS = !!u.matc...原创 2019-04-19 09:44:03 · 1107 阅读 · 0 评论 -
解决iphonex屏幕过长背景图片或者放在元素里面的图片不能铺满的问题
目前有四种方法1.让设计单独设计一版iphonex的尺寸的图,用js代码判断设备,如果检测到是iphonex就换图//如果设备是iphonex则追加元素填补空余 function isIPhoneX(fn){ var u = navigator.userAgent; var isIOS = !!u.matc...原创 2019-04-19 14:43:32 · 1020 阅读 · 0 评论 -
HTML中的a标签实现点击下载
通常在咱们写项目的时候会遇到上传下载什么的,在上传完文件后会把文件的路径保存到数据库里以便下载,如果想不通过后台直接下载的话,可以把文件路径给a标签的属性href;<a href="/user/test/xxxx.txt">点击下载</a>这样当用户打开浏览器点击链接的时候就会直接下载文件。但是有个情况,比如txt,png,jpg等这些浏览器支持直接打开的文件是不会...原创 2019-03-20 15:21:17 · 3883 阅读 · 0 评论