随笔分类 - CSS3
摘要：解决：flex弹性布局和溢出隐藏使用ellipsis省略号提示的冲突 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> /*下面文字使用了弹性布
阅读全文
摘要：解决办法： 在父元素中使用：font-size:0;即可以解决实例： <template> <div class="home-page"> <ul class="navigator"> <li>推荐</li> <li>课程</li> <li>实践</li> <li>职业路径</li> <li><im
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 弹性布局嵌套: 1，谨记：由外向内进行设置弹性盒子。先设置外部弹性布局，然后在设定里面的布局即可。 <!-- 圣杯布局的要求 -- 纵向分为上中下三部分，上中
阅读全文
摘要：弹性布局： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 弹性布局：以下建议使用开发者工具修改值进行查看非常直观易懂。 弹性布局属性使用顺序： 一，父元素属性设置顺序： 以下四个属性是对主轴方向上的子元素
阅读全文
摘要：pointer-events: none 真是个神奇的属性。 该属性有什么用？借用 CSS3 pointer-events:none 应用举例及扩展 的总结来说： pointer-events: none 顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了 “
阅读全文
摘要：.p{ display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: 2; }
阅读全文
摘要：width: calc(100% - 80px); 屏幕自适应方法
阅读全文
摘要：如下图一：鼠标悬浮 显示菜单 和 菜单 之间有横线 如下图二：鼠标悬浮 显示菜单 和 菜单 之间没有横线 页面渲染的顺序层级高低，以下是由低到高： 文档流 浮动元素 定位元素。 在正常文档流中，后面的元素会覆盖前面的，浮动元素居中，定位元素层级最高，覆盖一切。 由此： 解决上面的问题，就可以设置z-
阅读全文
摘要：搜狗：tubiao/icon 小图标的处理方法有三种： 一，最直接就是切图放在文件中进行读取 缺点： 1，多次HTTP请求，影响性能 2，不方便修改和维护。（每次修改都要重新修改美工修改图片大小，颜色等等） 二，使用base64，把图片转换为base64代码 本质：把小图标通过Base64转换成 B
阅读全文
摘要：一，设置PS 使用PS进行切图前的设置： 1，打开PS 打开PSD图片 点击窗口 分别把：历史记录，信息，图层，三个打勾。 历史记录：可以回到之前想要的步骤，特别是不小心把图层的文字或者图层删除了，进行恢复。 信息：可以获得框选部分的：rgb ，XY轴的起始位置，还有宽高。 图层：PSD图片，是通过
阅读全文
摘要：1，CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示我们的变量名称；在CSS变量命名中，不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文，因此CSS变量命
阅读全文
摘要：过渡的必要前提是：一定要有事件发生：click hover等等。 transition-property 值：none 没有属性值改变。all 默认，所有属性值都改变translate(这是第一个属性名称property，指定一个属性名) 指定需要改变的属性名，多个用逗号隔开trasition-du
阅读全文
摘要：transform 改变rotate 旋转translate 位移scale 缩放 skew 斜切变形记得兼容性：-webkit- -moz- -ms- -o-transform: rotate(Xdeg,Ydeg);deg 表示角度 X轴正半轴为0deg，顺时针旋转值越来越大。transform-
阅读全文
摘要：div{ font-size: 20px; text-shadow: 5px 5px 5px #333; text-shadow: 10px 10px 4px rgba(255, 0, 0, .5); /*可以使用rgba设置透明效果*/ } h-shadow：第一个属性值，表示水平阴影的位置，可以
阅读全文
摘要：1 炫酷的线性渐变实例 2 3 4 5 6 径向渐变 7 44 45 46 47 48
阅读全文
摘要：1，有利于代码维护，有利于使用debug进行调试打断点。2，后面三个都存在计算，所以分开写最好。背景复合属性最好的写法，background:#abcdef url() no-repeat 50px 100px scroll;background-clip:border-box/padding-bo
阅读全文
摘要：border-radius:的值可以是任意长度的单位，包括px ,cm,em,vm，%等等。 其中百分比%是相对于方形的width和height而言的。如： border-radius:10%; 相对于该div的width , height的长度的10%进行画的圆角。 <style type="te
阅读全文
摘要：CSS是层叠样式表（Cascading Style Sheets）的简称，并且它是增量式，向后兼容，所以它支持CSS3以前的所有的版本，当然包括CSS2的内容，CSS3也称作级联样式表或者是层级样式表。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的， 选择器：指定特定标签的方式。
阅读全文
浙公网安备 33010602011771号