![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
春风欲雨
这个作者很懒,什么都没留下…
展开
-
input输入框自动消除空格
<input type="text" class="form-control" id="assetId" onkeyup="this.value=this.value.replace(/[, ]/g,'')"></input> 这段代码的作用:onkeyup="this.value=this.value.replace(/[, ]/g,'')"功能:1...原创 2019-08-28 11:25:16 · 2457 阅读 · 0 评论 -
伪类和伪元素的区别
伪类和伪元素的区别:1、伪类的操作对象是文档树中已有的元素,用于当已有元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。2、伪元素则创建了一个文档数外的元素...原创 2019-09-16 17:18:10 · 591 阅读 · 0 评论 -
盒模型
box-sizing: content-box(W3C盒子模型):元素的宽高大小表现为内容的大小。 box-sizing: border-box(IE盒子模型):元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。IE5.x和IE6在怪异模式中使用非标准的盒子模型,这些浏览器的width属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。...原创 2019-09-16 17:35:24 · 262 阅读 · 0 评论 -
折叠面板
效果图:代码:<template> <div> <div class="bruce flex-ct-x"> <div class="accordion"> <input type="checkbox" id="collapse1" /> <input typ...原创 2019-09-17 09:05:14 · 452 阅读 · 0 评论 -
前端构造立方体
效果图:代码:<template> <div> <div class="bruce flex-ct-x"> <div class="td-cube"> <ul> <li class="front">1</li> <...原创 2019-09-17 09:15:33 · 593 阅读 · 0 评论 -
带有渐变倒影的加载条
<template> <div> <div class="bruce flex-ct-x"> <ul class="reflect-loading"> <li></li> <li></li> <li>&...原创 2019-09-17 09:24:39 · 179 阅读 · 0 评论 -
可切换内容的标签页
效果图:代码:<template> <div> <div class="bruce flex-ct-x"> <div class="tab-page"> <nav> <h3> <input type="radio" n...原创 2019-09-17 09:47:11 · 342 阅读 · 0 评论 -
使用vw定制rem自适应布局
结合vw单位和calc()脱离移动端使用rem布局需要依赖JS设置不同屏幕宽高比的控制但是要注意:rem页面布局不兼容低版本移动端系统/* 基于UI width=750px DPR=2的页面 */html { font-size: calc(100vw / 7.5);}...原创 2019-09-19 14:33:47 · 799 阅读 · 0 评论 -
使用:nth-child()选择指定元素
<ul class="specified-scope"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>...原创 2019-09-19 14:34:45 · 480 阅读 · 0 评论 -
前端实现文字竖向排版
writing-mode排版竖文HTML&&css<div class="bruce flex-ct-x"> <div class="vertical-text"> <h3>情</h3> <p>我见犹怜,<br>爱不释手。<br>雅俗共赏,<br>君子好逑。</...原创 2019-09-19 14:41:00 · 3565 阅读 · 0 评论 -
H5新标签
optgroup 元素用于组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。<select> <optgroup label="Group 1"> <option>Option 1.1</option> </optgroup> <optgroup label="G...原创 2019-09-23 10:30:20 · 303 阅读 · 0 评论 -
在点击按钮的时候,怎么取消按钮中的文本被选中
user-selectCSS属性,控制着用户能否选中文本。除了在文本框里,它在chrome浏览器中对已加载的文本没有影响。注意:这是一个实验中的功能此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。HTML:<p>你应该可以选中这段文本。...原创 2019-09-25 13:26:53 · 1180 阅读 · 0 评论 -
利用calc动态计算属性
.box-right { width: calc(100% - 200px); float: right; background-color: red;}原创 2019-09-16 15:04:42 · 608 阅读 · 0 评论 -
使用mask雕刻镂空背景
效果图:代码:<template> <div> <div class="bruce pr flex-ct-x"> <div class="mask-layer"></div> </div> </div></template><script&...原创 2019-09-16 15:01:59 · 399 阅读 · 0 评论 -
css实现三角形效果
css实现三角形效果图:.arrow{ width:0px;height:0px; border-right:50px solid rgba(0,0,0,0); border-bottom:50px solid #fbc2eb; border-left:50px solid rgba(0,0,0,0); }...原创 2019-08-30 16:19:18 · 243 阅读 · 0 评论 -
css实现圆环效果
圆环效果图.div{ width: 100px; height: 100px; background-color: #fbc2eb; border-radius: 50%; }.div:after{ content: " "; display: block; wi...原创 2019-08-30 16:18:45 · 1404 阅读 · 0 评论 -
页面跳转样进入页面样式混乱错位但是刷新页面后又好了
原因:要是同样的样式,前面已经加载过了,浏览器在跳到下个页面相同的样式就不会再重新加载了。在起名的时候可以自行区分,也可以根据官网的提示,在页面的style中加上scoped <style scoped></style>这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域,也就是给你定义的名字前加一串哈...原创 2019-09-04 13:51:02 · 5657 阅读 · 1 评论 -
CSS 的空格处理
浏览器处理空格的基本规则:HTML 代码文字的前部和后部的空格是会被忽略的,而且代码内部连续排列的空格也只会算作一个。如果希望浏览器将空格原样显示,我们可以使用<pre>标签。(***为我们敲击的空格)<pre>***hello***world***</pre>另一种方法是,改用 HTML 实体 表示空格。<...原创 2019-09-09 15:00:30 · 1102 阅读 · 0 评论 -
如何实现文本两端对齐(最后一行左对齐)
text-align: justify; //文本两端对齐text-align-last: left; //最后一行左对齐兼容性:原创 2019-09-10 09:14:32 · 4895 阅读 · 0 评论 -
修改系统默认 alert 弹框样式
源码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width, i...原创 2019-09-10 09:49:29 · 826 阅读 · 2 评论 -
高斯模糊背景图
效果图:代码:<template> <div> <div class="suit"> <div class="figure"></div> <div class="modal"> <div class="cont"> <i...原创 2019-09-16 11:10:34 · 1478 阅读 · 0 评论 -
外边框动态旋转
效果图(由于是截图,看不出动态效果):代码:图片素材:<template> <div> <div class="box"> <div class="ring-outer"></div> <div class="ring-inner"></div> ...原创 2019-09-16 13:42:45 · 733 阅读 · 0 评论 -
亮框提示
效果图(鼠标经过图片上移,亮度增加,添加盒子阴影以及边框):代码:<template> <div> <ul> <li></li> <li></li> <li></li> </ul> </div>...原创 2019-09-16 13:54:54 · 189 阅读 · 0 评论 -
vue-cli中如何使用sass
一、安装npm install node-sass --save-devnpm install sass-loader --save-dev二、配置 module: { rules: [{ test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig...原创 2019-09-16 14:18:59 · 900 阅读 · 0 评论 -
逐个字符自动打印出来的文字
效果图:代码:<template> <div> <div class="bruce flex-ct-x"> <div class="auto-typing">Do You Want To Know More About CSS Development Skill</div> </...原创 2019-09-16 14:50:19 · 413 阅读 · 0 评论 -
如何水平垂直居中一个标签元素
第一种:使用定位(已知自身元素宽高)利用定位,分别移动至父元素的顶部和左侧分别50% 的距离,然后利用calc()自动计算分别反方向平移自身宽高的一半.div1{ width: 400px; height:400px; background-color: red; position: absolute; top: calc(50% - 200p...原创 2019-09-26 10:11:31 · 232 阅读 · 0 评论