css
关注
分享
扫一扫
jarisMA
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css实现缺角div
css实现缺角div <div class="block"></div> 方法一：伪元素实现 用伪元素画一个和背景色相同的三角形，然后绝对定位到需要遮挡的地方 eg: .block{ width: 120px; height: 60px; background: yellow; position: relative; } .block::before{ position: absolute; right: 0;原创 2020-05-09 11:22:49 · 2532 阅读 · 0 评论 -
css选择器
css选择器 一、基本选择器 * 选择所有元素。 E 选择对应标签的元素。 .class 选择对应类名的元素。 #id 选择对应id的元素。 E F 选择E元素内部所有F元素。 E > F 选择E元素的所有直接子元素中的F元素。 E + F 选择紧跟着E元素之后的相邻兄弟节点F元素。 E ~ F 选择跟着E元素之后的所有兄弟节点中的F元素。 二、属性选择器...转载 2019-12-24 18:09:37 · 219 阅读 · 0 评论 -
解决inline-block中间缝隙
解决inline-block中间缝隙 本质：inline-block中间缝隙的本质是html中存在的空白字符（inline-block标签之间的回车符） 举例： li { display: inline-block; background-color: red; } <ul> <li><a href="#">登录</a></li&...原创 2019-12-20 16:10:22 · 447 阅读 · 0 评论 -
清除浮动
清除浮动 清除浮动，预防高度塌陷。 举例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...原创 2019-12-20 12:28:46 · 216 阅读 · 0 评论 -
css实现隐藏滚动条
css实现隐藏滚动条 转载链接 1.伪对象选择器 ::-webkit-scrollbar{ display:none;(或者是width: 0;) } 2.变相隐藏 大体思路： 在div(outer)外面再套一个div(inner); div(outer)设置overflow:hidden; div(inner)设置overflow-y: scroll; div(outer)小于div(inn...转载 2019-08-29 10:12:48 · 407 阅读 · 0 评论 -
纯css实现箭头
纯css实现箭头 发布时间：2018-04-10 15:11:21 原理：通过伪元素绘制出的两个三角形，一个与背景色相同覆盖部分红色箭头，形成三角线 span.arrow-down { position: relative; } span.arrow-down:after, span.arrow-down:before { border: 8px solid transparen...原创 2019-08-28 10:09:04 · 430 阅读 · 1 评论 -
元素水平垂直居中
元素水平垂直居中 发布时间：2018-03-21 15:28:06 1.使用flex布局 html,body{ height: 100%; margin: 0; } body{ -webkit-align-items:center; -ms-flex-align:center; align-items:center; display:-webkit-...原创 2019-08-28 10:07:36 · 246 阅读 · 0 评论 -
20个常用的CSS技巧
20个常用的CSS技巧 1.黑白图像 这段代码会让你的彩色照片显示为黑白照片 img.desaturate{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -mz-filter:grayscale(100%); -o-filter:grayscale(100%);...转载 2019-08-28 09:55:21 · 196 阅读 · 0 评论 -
box-shadow实现四周阴影
box-shadow实现四周阴影 发布时间：2018-01-27 17:20:22 div{ width:250px; height:250px; background:greenyellow; box-shadow:black 0px 0px 10px;//将h-shadow,v-shadow设为0px,实现四周阴影 } 效果图 ...原创 2019-08-27 18:03:23 · 24621 阅读 · 0 评论 -
CSS的兄弟选择器 + 和 ~ 的区别
CSS的兄弟选择器 + 和 ~ 的区别 发布时间:2018-01-19 14:30:59 <div> <p>这是个ul同父元素的第一个p<p> <ul> <li>这是第一个li。</li> <li>这是第二个li。</li> <li>这是第三个li。</li> ...原创 2019-08-27 17:59:13 · 781 阅读 · 0 评论 -
Bootstrap的下拉菜单被挡住
Bootstrap的下拉菜单被挡住 发布时间：2018-01-17 13:19:57 代码 <div class="range"> <div class="dropdown" style="float:right"> <button class="btn btn-success" type="button" data-toggle="dropdown" aria...原创 2019-08-27 17:55:17 · 6865 阅读 · 0 评论 -
网页布局
网页布局 CSS中存在3中定位机制： 标准文档流（Normal flow） 浮动（Floats） 绝对定位（Abosulte positioning） 一、标准文档流 特点： 从上到下，从左到右，输出文档内容。 由块级元素和行级元素组成。 1.块级元素 特点： 从左到右撑满页面，独占一行。 触碰到页面边缘时，会自动换行。 如：div,ul,li,dl,dt,p······ 2.行级元素...原创 2019-08-27 17:36:27 · 189 阅读 · 0 评论 -
!important
#!important !important的css定义拥有最高的优先级，既相当于让其样式放在离元素最近的地方（最下面）。 1.对IE7-10和firefox、chrome均有效 2.但其中IE6只能这样写才有效（不支持同一定义中的!important）： eg: a{ color:blue !important;/*color:blue;(无效)*/ color:red;/*color:re...原创 2019-08-27 16:44:35 · 975 阅读 · 0 评论