css
关注
分享
扫一扫
yb305小白
挨踢小白。。。。
展开
-
界面颜色的使用搭配
界面颜色的使用搭配原创 2022-09-24 14:33:15 · 243 阅读 · 0 评论 -
Css中transition过渡效果
<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><style> div { width: 100px; height: 100px; background: red; transition: width 2s; transition-timing-function: cubic-b.原创 2021-09-28 10:33:30 · 165 阅读 · 0 评论 -
css 动画效果
<html> <head> <style> .el-skeleton__item{ background:linear-gradient(90deg,#0dfbed 25%,#e6e6e6 37%,#f2f2f2 63%); background-size: 400% 100%; display: inline-block; height: 16px; border-radius: 4px; wi.原创 2021-09-27 13:44:02 · 316 阅读 · 0 评论 -
css3更改默认滚动条样式-webkit-scrollbar
浏览器自带的原始滚动条很不美观，在一些特殊需求中，我们需要对滚动条的样式单独设置，因此就出现了用-webkit-scrollbar来自定义滚动条的样式。。首先webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。滚动条的组成::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，转载 2021-09-14 12:20:06 · 582 阅读 · 0 评论 -
css3 绘制三角形
不带边框三角形：<html><head><style>.triangle_border_up{ width:0; height:0; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent red;/*透明 透明 红色*/ margin:40px auto; position:relative;原创 2021-04-14 19:22:55 · 172 阅读 · 0 评论 -
flex:1及flex取值的理解
1. flex布局参照：阮一峰的文章2. flex:1的理解2.1 概念flex：是 flex-grow、flex-shrink、flex-basis的缩写，默认值为0 1 auto。后两个属性可选 剩余空间：父容器在主轴方向上的可用空间。 具有flex环境的父容器，通常是有一条主轴和一条侧轴，默认情况下，主轴就是水平从左向右，侧轴是垂直从上到下 剩余空间 = 父元素宽度 - 所有子元素宽度的和 剩余空间示例 2.2 flex属性2.2.1 .转载 2020-11-26 09:49:23 · 3809 阅读 · 2 评论 -
CSS规范
css指层叠样式表 (Cascading Style Sheets)，定义如何显示html元素，但由于css天生全局性，随着项目复杂度增加，极易出现样式覆盖以及其它的问题。1. 通用规范文件编码 为了避免内容乱码，统一使用UTF-8编码保存。 样式文件第一行设置字符集为 UTF-8 @charset 'UTF-8'; /* 注意字符集说明应在第一行 */缩进规范统一使用两个空格缩进2. 初始化规范各浏览器厂商的初始样式都不一样，为了...转载 2020-08-19 15:57:19 · 338 阅读 · 0 评论 -
20个 CSS 快速提升技巧
本文涵盖了20个css技巧，可以解决许多工作中常见的问题。1、使用CSS重置（reset）css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来应用于布局中的所有元素，删除所有的margin、padding改变浏览器默认的盒模型。*{ box-sizing:border-box; margin:0; padding:0.转载 2020-07-24 15:04:35 · 283 阅读 · 0 评论 -
css中“~”（波浪号）、“，”（逗号）、“+”（加号）和“＞”（大于号）详解
p~ul选择器 p之后出现的所有ul。 两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。css中“>”是: css3特有的选择器，A>B 表示选择A元素的所有子B元素。 与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。.a，.b｛逗号指相同的css样式｝；.a .b｛空格指后代元素｝；.a>.b｛大于号指子代元素｝；...转载 2020-07-24 10:37:44 · 1579 阅读 · 0 评论 -
CSS3实现360度循环旋转
1.整个div360度旋转<style type="text/css">.div3{ position:absolute; z-index:3; left:40px; top:40px; font-weight:bold; background:red; animation: myfirst2 15s infinite linear;}@keyframes myfirst2{from {transform: rotate(0deg);}t原创 2020-06-08 11:11:54 · 7589 阅读 · 0 评论 -
Css中z-index层的叠加使用
1.z-index只有在div是 position: absolute;绝对定位的条件下才能使用。<html><head><style type="text/css">.div1{ position:absolute; left:0px; top:0px; z-index:1; background:green; height:70px; width:300px;}.div2{ position:absolute;原创 2020-06-08 10:40:41 · 397 阅读 · 0 评论 -
CSS伪类、伪元素
一、CSS伪类二、CSS伪元素三、区别单冒号（:）用于CSS伪类；双冒号（::）用于CSS伪元素；本质上一个是类一个是元素；。1.伪元素：被用来创建 DOM 树既有的元素之外的抽象元素；其实在 DOM 树中并不存在，只是逻辑上存在所以我们抽象出来的一个元素，就是假设DOM树上有这个元素；伪元素和他前面的元素是元素和元素之间的位置关系，是一个平级的，是直接作用在DOM...转载 2019-12-25 10:54:04 · 235 阅读 · 0 评论 -
CSS导航菜单
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>导航菜单</title><style> *{margin:0; padding:0;} a{f...原创 2019-12-20 10:35:32 · 233 阅读 · 0 评论 -
CSS3 transition 过渡效果
一、定义CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间二、语法transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)三、例子上面两个按钮，第一个没有使用过渡，第二个使用过渡，大家可以看到当中的区别，用了过渡之后是不是没有那么生硬，有一个变化的过程，显得比较生...转载 2019-12-19 15:18:26 · 308 阅读 · 0 评论 -
纯CSS实现聊天框气泡效果（二)
使用:before和:after伪类实现小三角实现过程1.定义一个div,设置宽高，边框，创建一个矩形框。<div class="div1"></div><style type="text/css">.div1 { width: 300px; height: 35px; margin: 0 auto; margin-top:...原创 2019-12-19 11:52:59 · 885 阅读 · 0 评论 -
纯CSS实现聊天框气泡效果(一)
CSS气泡实现过程<div class="arrow"></div><style type="text/css">.arrow { width:0; height:0; font-size:0; border:solid 10px #000;}</style>我们可以得到一个黑色的正方形，其实这是边框...转载 2019-12-19 10:04:56 · 2126 阅读 · 0 评论 -
CSS使用技巧
1.文字的水平居中将一段文字置入容器的水平中点，只要设置text-align属性即可：text-align:center;2.容器的水平居中先为该容器设置一个明确的宽度，然后将margin的水平值设为auto即可div#container{ width:400px; margin:auto;}3.文字垂直居中当行文字垂直居中，只要将行高和容器的高度...转载 2019-12-18 13:21:30 · 152 阅读 · 0 评论 -
flex 弹性布局 源码
<html><head><style>div{ text-align:center; color:#fff; font-weight:bold; font-size:16px; line-height:30px;}/*纵向排列*/.direcitonDemo{ display:flex; flex-direction: col...原创 2019-11-26 13:27:41 · 513 阅读 · 0 评论 -
flex 弹性布局
1、什么是 Flex 布局？Flex 布局又为弹性布局，所谓弹性，就很大的提供了页面布局的灵活性。我们可以把一个容器（div、span等），设置它的 CSS 的 display 属性为 flex 之后，我们就可以使用 Flex 的布局方式了。PS：一旦容器设置display: flex布局之后，我们使用的传统布局中的float、vertical-align、clear等属性就完...转载 2019-11-26 10:19:23 · 518 阅读 · 0 评论 -
css 设置圆形
<html><head><style> .number{ width: 100px; height: 100px; background-color: red; -moz-border-radius: 50%; -webkit-border-radius: 50%;}.number1{ width: 28px; height: 28px...原创 2019-11-06 14:46:16 · 3806 阅读 · 0 评论 -
CSS3 使用 calc() 计算高度 vh px
Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport高度， 1vh 等于viewport高的的1%CSS3使用Calccalc()使用通用的数学运算规则，但是也提供更智能的功能： >使用“+”、“-”、“*” 和 “/”四则运算； >可以使...转载 2019-11-06 14:20:48 · 2979 阅读 · 0 评论