小糖穿越火线

粘贴复制使用/* 修改浏览器滚动条样式 */::-webkit-scrollbar { width: .4rem; height: .4rem; background: hsla(0, 0%, 100%, 0.6);}::-webkit-scrollbar-track { border-radius: 0;}::-webkit-scrollbar-thumb { border-radius: 0; background-color: rgba(95, 95, 95,

css3钟摆效果.pendulum-styl { -webkit-animation: run 1s ease-in-out alternate infinite; -moz-animation: run 1s ease-in-out alternate infinite; animation: run 1s ease-in-out alternate infinite; @keyframes run { 0% { -webkit-transform: rotate(

css3 position: fixed 居中问题移动端，旁边留白的情况fixed不能居中的问题； z-index: 1000; position: fixed; margin:0 auto; top: 0; bottom: 0; left: 0; right: 0; width: 375px; height: 100vh;

::-webkit-input-placeholder { color: #ffffff; font-weight: 400;}/* Firefox 4-18 */:-moz-placeholder { color: #ffffff; font-weight: 400;}/* Firefox 19-50 */::-moz-placeholder { color: #ffffff; font-weight: 400;}/* - Internet Explorer

css 背景图片的虚化背景虚化时出现页面内容也被虚化的情况，使用伪类::beforebody .bg { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center;}body .bg::before { z-index: -1

方法一设置html的高度为100%，然后百分比高度。<style> html, body { height: 100%; margin: 0; padding: 0; } .wrap { height: 100%; } .top { height: 20%; } .content { height: 50%; } .footer { height: 30%; }</style&

部分设备分辨率可查询：http://screensiz.es/

问题： 图片自适应 有缝隙，有间隙css如下：.banner { position: relative; width: 100%; min-height: 150px; overflow: hidden;}.banner img { width: 100%; height: 100%;}解决1：object-fit: cover; 尝试无效...

容器撑满占满整个高度，垂直居中等1、height: 100% 需要先定义，html,body 高度为height: 100%才可以起作用。html, body { widht: 100%; height: 100%;}2、使用position: flex;.main{ position: fixed; top: -80rpx; left...

flex简单常用笔记多行换行操作：ul { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;}ul li { width: 50%; padding: 2% 2% 0 2%; box-sizing: bord...

css 实现16:9比例自适应手机尺寸，可设置任意比例.wrap { position: relative; width: 100%; height: 0; /* 比例：就是设置paddig-bottom */ padding-bottom: 56.25%;}.wrap .wrap-child { position: absolute;...

自动消失：html<div class="hc-toast GM-none"> <div class="hc-toast-text">-</div></div>css.hc-toast { position: fixed; top: 0; left: 0; width: 100%; height: 100...

语法：@media not|only mediatype and (expressions) { CSS 代码; } not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。 only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略o...

.swiper-slide.slide-2:before { content: ""; width: 1200px; height: 300px; position: absolute; left: 0; top: 0; transform: rotate(135deg); -moz-transform: rotate(135deg...

JQuery修改background-image背景图片使用：var src = ' ../resource/images/top-img.png';$("#videoCoverLayer").css('background-image', 'url(' + src + ')');等于：background: url("../resource/images/top-img.p...

移动端适配方案移动端可以用px+flex动态改变html的font-size配合rem一、移动端可以用px+flex使用方法是，将最外层容器设置display: flex;内层元素正常写就可以。需要注意的是如果flex不能完全达到要求适配，就使用媒体查询。二、动态改变html的font-size配合rem方法一：一般来说设计师给的移动端ui设计图为：750的宽度，...

转自：http://tool.c7sky.com/webcolor/简单、洁净、进步：简单、时尚、高雅简单、进步、时尚

一、水平居中1、内联元素水平居中利用 text-alingn: center可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block, 内联表(inline-table), inline-flex元素水平居中都有效；text-align: center2、块级元素水平居中通过把固定宽度块级元素margin-left和ma...

css3缩放 transform: scale() 使用缩放之后顶点对齐问题注意点：想要将缩放之后的div对齐顶点，那么需要将css属性设置为：transform-origin: 0 0<div style="width: 900px; height: 900px; background: gray; overflow: auto;"> <div style="...

css3文字一行展示，多余文字省略号重点：一行展示：text-overflow: ellipsiswhite-space: nowrapoverflow: hidden多行展示：overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; /*行数*/...

去掉input、textarea 的边框inputinput{outline: none;}textareatextarea{outline: none;}