css
JarisMA
I am Jairs!
展开
-
jquery实现滑动标尺
jquery实现滑动标尺显示标尺,移动标尺下的三角形html <div id="nearFarView"> <ul> <li></li> <li></li> <li&a原创 2018-08-28 15:54:00 · 1405 阅读 · 0 评论 -
纯css实现箭头
纯css实现箭头原理:通过伪元素绘制出的两个三角形,一个与背景色相同覆盖部分红色箭头,形成三角线span.arrow-down { position: relative;}span.arrow-down:after,span.arrow-down:before { border: 8px solid transparent; border-top: 10px...原创 2018-04-10 15:11:21 · 361 阅读 · 0 评论 -
元素水平垂直居中
元素水平垂直居中1.使用flex布局html,body{ height: 100%; margin: 0;}body{ -webkit-align-items:center; -ms-flex-align:center; align-items:center; display:-webkit-flex; display:flex;...原创 2018-03-21 15:28:06 · 155 阅读 · 0 评论 -
CSS的兄弟选择器 + 和 ~ 的区别
CSS的兄弟选择器 + 和 ~ 的区别div> p>这是个ul同父元素的第一个pp> ul> li>这是第一个li。li> li>这是第二个li。li> li>这是第三个li。li> li>这是第四个li。li> ul> p>这是个ul同父元素的第二个pp> p>这是个ul同父元素的第三原创 2018-01-19 14:30:59 · 1444 阅读 · 0 评论 -
box-shadow实现四周阴影
box-shadow实现四周阴影div{ width:250px; height:250px; background:greenyellow; box-shadow:black 0px 0px 10px;//将颜色提到前面,且将h-shadow,v-shadow设为0px,实现四周阴影}效果图原创 2018-01-27 17:20:22 · 44470 阅读 · 0 评论 -
20个常用的CSS技巧
20个常用的CSS技巧转载地址1.黑白图像这段代码会让你的彩色照片显示为黑白照片img.desaturate{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -mz-filter:grayscale(100%);转载 2018-02-02 17:41:11 · 329 阅读 · 0 评论 -
Bootstrap的下拉菜单被挡住
Bootstrap的下拉菜单被挡住代码div class="range"> div class="dropdown" style="float:right"> button class="btn btn-success" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expand原创 2018-01-17 13:19:57 · 7850 阅读 · 6 评论 -
网页布局
网页布局CSS中存在3中定位机制:标准文档流(Normal flow)浮动(Floats)绝对定位(Abosulte positioning)一、标准文档流特点:从上到下,从左到右,输出文档内容。由块级元素和行级元素组成。1.块级元素特点:从左到右撑满页面,独占一行。触碰到页面边缘时,会自动换行。如:div,ul,li,dl,dt,p······原创 2019-08-27 19:03:48 · 329 阅读 · 0 评论 -
!important
!important!important的css定义拥有最高的优先级,既相当于让其样式放在离元素最近的地方(最下面)。1.对IE7-10和firefox、chrome均有效 2.但其中IE6只能这样写才有效(不支持同一定义中的!important): eg:a{ color:blue !important;/*color:blue;(无效)*/ co原创 2019-08-27 19:03:33 · 1365 阅读 · 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-03-01 17:50:49 · 311 阅读 · 0 评论