css
关注
分享
扫一扫
想喝橙汁儿
化身孤岛的鲸
展开
-
grid 布局
grid 布局。原创 2022-08-12 13:12:28 · 128 阅读 · 0 评论 -
Vue 动态绑定CSS样式
动态绑定CSS样式绑定了changeColor样式,changeC是判断条件，根据条件changeC控制css加与不加<div v-bind:class="{changeColor:changeC}" v-on:click="changeC=!changeC"> <span>示例一</span></div>原创 2021-04-14 15:56:44 · 1270 阅读 · 0 评论 -
css 鼠标经过显示禁止符号
鼠标经过是显示红色圆圈加斜杠的禁止图标cursor: no-drop;cursor: not-allowed;代码：.box:hover{ cursor: no-drop; /* cursor: not-allowed; */}两种方法一个效果，随便一个都可以用原创 2021-04-14 10:23:43 · 1952 阅读 · 0 评论 -
浏览器隐藏滚动条
overflow-y: scroll; scrollbar-color: transparent transparent; scrollbar-track-color: transparent; -ms-scrollbar-track-color: transparent;原创 2021-04-08 14:22:52 · 1939 阅读 · 2 评论 -
media query(媒体查询)与资源引入
媒体查询基础用法@media screen and (max-width:539px)screen 与and，单位px不可省略建议从小往大写，后面的可以覆盖前面的<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> @media screen and (max-wid原创 2020-12-01 18:02:11 · 326 阅读 · 0 评论 -
CSS3 选择前几个元素
/* 选择第n个，n位数字 */:nth-child(n)选择列表中的偶数标签:nth-child(2n)选择列表中的奇数标签:nth-child(2n-1)选择前几个元素/*【负方向范围】选择第1个到第6个 */:nth-child(-n+6){}从第几个开始选择/*【正方向范围】选择从第6个开始的，直到最后 */:nth-child(n+6){}两者结合使用，可以限制选择某一个范围/*【限制范围】选择第6个到第9个，取两者的交集【感谢小伙伴的纠正~】 */:nt原创 2020-11-25 16:50:11 · 468 阅读 · 0 评论 -
less 学习
目录概览变量（Variables混合（Mixins）嵌套（Nesting）@规则嵌套和冒泡运算（Operations）概览Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。Less 到底为 CSS 添加的新功能：变量（Variables@width: 10px;@height: @width + 1原创 2020-09-02 21:49:27 · 1002 阅读 · 0 评论 -
css 四级导航
附上一份四级导航<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul,li{ list-style: none; } a{ text-decoration: none; color:#F6F6F6; } li{原创 2020-08-15 16:59:36 · 720 阅读 · 1 评论 -
CSS 面试题
1. display: none; 与visibility: hidden; 的区别display:none 不会占空间visibility 继续占据空间，只是内容不可见通过设置 visibility: visible;可以让子孙节点显式2. hack 原理及常用原理：利用不同浏览器对 CSS 的支持和解析结果不一样编写针对特定浏览器样式比如火狐不识别*background:red; 星号3. link 与 @import 的区别link 是 HTML原创 2020-08-15 16:51:25 · 1950 阅读 · 3 评论 -
css 垂直居中
垂直居中行内元素，可以设置line-height 与父级 height 相等设置 margin/padding 居中flex 居中 设置 align-items:center绝对定位居中案例：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>垂直居中案例</title> <style type="text/css"> * {原创 2020-08-14 20:49:07 · 1311 阅读 · 1 评论 -
水平居中的方式
水平居中本文列举最常用的几种方式：margin:0 auto //为需要居中的元素加position：relative；相对定位 ，left的值需要计算position: absolute; 绝对定位top: 0;bottom: 0;right: 0;left: 0;margin: auto;弹性盒子 display: flex;//内联元素用：父元素加 ：text-align: center;display: block; 变为块元素，再加宽度设置margin原创 2020-08-14 19:51:27 · 309 阅读 · 1 评论 -
css 三角形
css 三角形transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>三角形</title> <style type="text/css"> p{ width: 0; height: 0; border-widt原创 2020-08-14 10:11:02 · 685 阅读 · 0 评论