css
在学习前端必有css样式的学习
ronghua_yang
学习前端
展开
-
8个css技巧
下面是总结的css技巧,建议大家收藏,以后用的时候就不用到处查资料了。当然这些也不是所有的,大家如果有什么好的css有趣样式技巧也可以发出来哦三角形最常见的一种形状了。切图,不存在的虚线效果css自带的border-style属性 dotted/ dashed . 效果展示出来太密了,并不符合UI设计文本超出省略号为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示原创 2020-12-09 21:43:14 · 154 阅读 · 0 评论 -
9个非常实用的CSS图标库
以前网页上显示图标都是用切成小图片,然后根据不同场景作多个小图,通过js来控制显示效果。字图图标,顾名思义,就像使用通常的字体,可以设置字体颜色,大小等,不用在搞多张小图片,非常灵活。其优点:轻松的定义图标的颜色,大小,阴影,和任何与css相关的特性。更快的载入速度、样式更容易定义。使用矢量字体,这意味着他们可以完美的显示在高分辨率显示器中。1、Iconfont阿里巴巴矢量图标库,Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴原创 2020-12-09 17:15:38 · 1118 阅读 · 0 评论 -
Scss 缩减50%样式代码的实战经验总结
前言Sass是css3语言的扩展,它能帮你更省事地写出更好的样式表,使你摆脱重复劳动,使工作更有创造性。因为你能更快地拥抱变化,你也将敢于在设计上创新。你写出的样式表能够自如地应对修改颜色或修改html标签,并编译出标准的css代码用于各种生产环境。Sass语法比较简单,难点在于如何将Sass运用到实际项目中,解决css存在的痛点,从而提高我们效率。经过实际项目的摸索,总结了以下14条实践经验进行分享,希望能帮助大家扩宽思维,更好地将Sass运用到实际项目中。在项目中,我们使用支持传统的类css语法原创 2020-12-09 16:00:02 · 182 阅读 · 0 评论 -
css3实现水平垂直居中的十种方案
实现水平垂直居中的1十种方案html代码: <h1 class="app"> <div></div> </h1>1. 第一种方案子元素高度可以设定也可以不设定 .app { width: 200px; height: 200px; background-color: yellow; display: flex;原创 2020-12-02 19:16:14 · 613 阅读 · 0 评论 -
css3动画
css3动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。Chrome 和...转载 2020-03-24 09:51:59 · 290 阅读 · 0 评论 -
css2d旋转
css2d旋转目录translate()rotate()scale()skew()matrix()translate()方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数。实例如下: div{transform: translate(50px,100px);-ms-tra...原创 2020-03-23 11:32:02 · 476 阅读 · 0 评论 -
css选择器
目录元素选择器选择器分组类选择器id选择器文本框对齐元素选择器元素选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身note { font-family:Verdana, Arial; margin-left:30px; }to { font-size:28px; display: block; }from {...原创 2020-03-17 11:06:12 · 74 阅读 · 0 评论 -
Css常用属性(背景,字体,div盒子等)
Css常用属性(背景,字体,div盒子等)1.背景(1)背景颜色:background-color(2)将图像设置为背景:background-image:url();(3)设置图像是否平铺:background-repeat:no-repeat 或 repeat-x 或repeat-y(4)设置背景图片是否随滚动条一起移动:background-attachment:fixed;固定住...原创 2020-03-10 14:46:49 · 233 阅读 · 0 评论