进阶方法有个好处就是悬浮前和滚动悬浮后的样式都可以自定义，比如没有滚动到设置的元素时，样式的宽度是100px，然后当用户滚动屏幕到设置的元素时，设置的元素就可以又以另一种自定义样式悬浮...

今天刚帮客户写了个CSS动画效果样式，具体看样式的注释 <style> .animate { font-size: 35px; margin: 100px 0 0; border-bottom: 2px solid #ccc; } .animate span { display: inline-bl...

直接上例子，每4个元素换行并设置10px的间距 ul{ display: flex; flex-wrap: wrap; /*flex弹性换行*/ margin: -10px; /*父元素抵消掉子元素的间距*/ } ul li{ margin: 10px; /*子元素之间的间距...

<style> /*设置了高度，可以上下滚动*/ body { height: 1800px; background:#dddddd; } /*div通用样式*/ div{ background: #1a59b7; color:#ffffff; overflow: hidden; z-index: 9999; po...

当鼠标停留在设置的元素时呼出图片，移开后隐藏。 CSS代码 .xulgr-hovershow .xulgr-hovershow-img { opacity:0; transform:translateY(6px); transition:.4s; } .xulgr-hovershow:hover .xulgr...

第一步：设置viewport 至于为什么要设置这个，答案请移步移动前端开发之viewport的深入理解（人家解释的比我好，在这就不啰嗦了） <meta name='viewport' content='width=device-width, init...

一般情况下我们会直接用transition来设置动画效果，如 a{ transition: all 1s linear; } a:hover{ transform: scale(1.1); transition: all 1s linear; } 其中all为transition-property属性的值...

方法一：具有固定定位的屏幕居中 .XulgrCenter{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: cen...

直接用CSS来控制文字或字符的整行，比如先在父级控制一个绝对高度和宽度的框，然后用下面的CSS来控制一段文字行数，超出则显示省略号... 方法1：单行情况下，规定长度，超出部分显示省略号 .Xul...

css .xulgr-checkbox{display: block;} .xulgr-checkbox+input{display: none;} .xulgr-checkbox+input+div{display:none;} .xulgr-checkbox+input:checked+div{display:block;} html <label...