随笔分类 - CSS集合
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>银币旋转效果</title> <style> #euro { width: 150px; height: 150px; margin-left: -75px; margin-top
阅读全文
摘要：直接粘代码，如果发现Jquery引入出错了，更新一下Jquery CDN链接。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; pa
阅读全文
摘要：1、思路： 因为offsetTop、scrollTop等不属于css属性，所以这些无法用css动画或过度来实现。首先想到的是使用position + top 定位结合 transition 来实现。 2、效果： 3、原生代码： <!DOCTYPE html> <html lang="zh"> <he
阅读全文
摘要：一、实现方法 小技巧，最外层元素高度100%，flex布局，flex-direction为cloumn， overflow为hidden； 里面子元素需要自适应宽高的元素给一个最小高度min-height； 另一个需要撑满的元素flex设置为1。 二、写法如下：
阅读全文
摘要：input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; font-size: 16px; } input::-moz-placeholder, textarea::-moz-placeh
阅读全文
摘要：关键代码： *::-webkit-scrollbar {/*隐藏滚轮*/ width: 0; height: 0 }
阅读全文
摘要：link属于XHTML标签，除了加载CSS外，还能定义rel连接属性等作用，而@import是CSS提供的，只能用于加载CSS。 页面被加载时，link会同时被加载，而@import引用的CSS会等页面被加载完再加载。 import是CSS 2.1提出的，只在IE5以上才能被识别，存在兼容问题，而l
阅读全文
摘要：这个我们在做移动端的时候，设计师图片上的文字假如是10px，我们实现在网页上之后。往往设计师回来找我们，这个字体能小一些吗？我设计的是10px？为啥是12px?其实我们都知道，谷歌Chrome最小字体是12px，不管你设置成8px还是10px，在浏览器中只会显示12px，那么如何解决这个坑爹的问题呢
阅读全文
摘要：献上效果图： 实现关键代码： <body> <div class='divContener' colSpan={4} rowSpan={24}> <div class='itemContener'> fnsdkjgfhsfdkhgvkjfdhgkjsdfh </div> </div> </body>
阅读全文
摘要：‘clip-path’是css3的一个强大属性，我们可以利用它来绘制各种各样的图形 先来裁剪一个三角形 代码如下： <style> div{ width:100px; height:100px; background-color:red; -webkit-clip-path:polygon(50%
阅读全文
摘要：方式一： <div style=" width: 50px; height: 50px; border: 13px solid orange; border-radius: 50px; clip-path: polygon(50% 0%, 100% 0%, 100% 3600%, 50% 50%);
阅读全文
摘要：1. 直接设置style的属性 注：某些情况用这个设置 !important值无效 如果属性有'-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style['text-align'] = '100px'; element.style.height
阅读全文
摘要：方法一： cursor: not-allowed; document.getElementById('id').style.cursor="not-allowed"; 方法二： pointer-events:none;
阅读全文
摘要：1、文章引言 我们在写页面的时候，经常会遇到多栏布局的情况，如果栏目带有背景色并且栏目内容高度不一样的话，就会导致每个栏目的底部是无法不齐的，这样在排版布局以及给用户的体验不是很好！ 2、需求如下 我们要实现的效果就是当各个栏目内容不一样的情况下，保证各个栏目还是对齐的。 3、如何解决 HTML结构
阅读全文
摘要：1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。 2.rem 这里的
阅读全文
摘要：什么是 BFC 在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-capti
阅读全文
摘要：<span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >动态绑定样式</span> 实现元素根据数据状态来显示或隐藏。
阅读全文
