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 · 2527 阅读 · 0 评论 -
伪类和伪元素的区别
伪类和伪元素的区别：1、伪类的操作对象是文档树中已有的元素，用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。2、伪元素则创建了一个文档数外的元素...原创 2019-09-16 17:18:10 · 634 阅读 · 0 评论 -
盒模型
box-sizing: content-box（W3C盒子模型）：元素的宽高大小表现为内容的大小。 box-sizing: border-box（IE盒子模型）：元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。IE5.x和IE6在怪异模式中使用非标准的盒子模型，这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。...原创 2019-09-16 17:35:24 · 292 阅读 · 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 · 492 阅读 · 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 · 626 阅读 · 0 评论 -
带有渐变倒影的加载条
<template> <div> <div class="bruce flex-ct-x"> <ul class="reflect-loading"> <li></li> <li></li> <li>&...原创 2019-09-17 09:24:39 · 213 阅读 · 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 · 375 阅读 · 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 · 831 阅读 · 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 · 528 阅读 · 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 · 3641 阅读 · 0 评论 -
H5新标签
optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。<select> <optgroup label="Group 1"> <option>Option 1.1</option> </optgroup> <optgroup label="G...原创 2019-09-23 10:30:20 · 340 阅读 · 0 评论 -
在点击按钮的时候，怎么取消按钮中的文本被选中
user-selectCSS属性，控制着用户能否选中文本。除了在文本框里，它在chrome浏览器中对已加载的文本没有影响。注意：这是一个实验中的功能此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。HTML：<p>你应该可以选中这段文本。...原创 2019-09-25 13:26:53 · 1232 阅读 · 0 评论 -
利用calc动态计算属性
.box-right { width: calc(100% - 200px); float: right; background-color: red;}原创 2019-09-16 15:04:42 · 652 阅读 · 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 · 438 阅读 · 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 · 277 阅读 · 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 · 1457 阅读 · 0 评论 -
页面跳转样进入页面样式混乱错位但是刷新页面后又好了
原因：要是同样的样式，前面已经加载过了，浏览器在跳到下个页面相同的样式就不会再重新加载了。在起名的时候可以自行区分，也可以根据官网的提示，在页面的style中加上scoped <style scoped></style>这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域，也就是给你定义的名字前加一串哈...原创 2019-09-04 13:51:02 · 5795 阅读 · 1 评论 -
CSS 的空格处理
浏览器处理空格的基本规则：HTML 代码文字的前部和后部的空格是会被忽略的，而且代码内部连续排列的空格也只会算作一个。如果希望浏览器将空格原样显示，我们可以使用<pre>标签。（***为我们敲击的空格）<pre>***hello***world***</pre>另一种方法是，改用 HTML 实体 表示空格。<...原创 2019-09-09 15:00:30 · 1154 阅读 · 0 评论 -
如何实现文本两端对齐（最后一行左对齐）
text-align: justify; //文本两端对齐text-align-last: left; //最后一行左对齐兼容性：原创 2019-09-10 09:14:32 · 4986 阅读 · 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 · 858 阅读 · 2 评论 -
高斯模糊背景图
效果图：代码：<template> <div> <div class="suit"> <div class="figure"></div> <div class="modal"> <div class="cont"> <i...原创 2019-09-16 11:10:34 · 1521 阅读 · 0 评论 -
外边框动态旋转
效果图(由于是截图，看不出动态效果):代码：图片素材：<template> <div> <div class="box"> <div class="ring-outer"></div> <div class="ring-inner"></div> ...原创 2019-09-16 13:42:45 · 769 阅读 · 0 评论 -
亮框提示
效果图（鼠标经过图片上移，亮度增加，添加盒子阴影以及边框）：代码：<template> <div> <ul> <li></li> <li></li> <li></li> </ul> </div>...原创 2019-09-16 13:54:54 · 220 阅读 · 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 · 972 阅读 · 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 · 451 阅读 · 0 评论 -
如何水平垂直居中一个标签元素
第一种：使用定位（已知自身元素宽高）利用定位，分别移动至父元素的顶部和左侧分别50% 的距离，然后利用calc（）自动计算分别反方向平移自身宽高的一半.div1{ width: 400px; height:400px; background-color: red; position: absolute; top: calc(50% - 200p...原创 2019-09-26 10:11:31 · 261 阅读 · 0 评论