摘要: 响应式 Web 设计 - 媒体查询 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是需要设置设计响应式的页面 媒体类型 all 用于所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕,平板电脑,智能手机等。 speech 应用于屏幕阅读器等发声设备 媒体功能 min-w 阅读全文
posted @ 2020-08-22 18:44 帅气巴巴 阅读(184) 评论(0) 推荐(0) 编辑
摘要: less的简单使用 Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。 下面是一个简单的LESS示例 新建一个HTML文件,引入外部css,css是没有的需要less动态生成 创建一个与CSS非常相似的文件 style.le 阅读全文
posted @ 2020-08-22 18:33 帅气巴巴 阅读(129) 评论(0) 推荐(0) 编辑
摘要: flex 弹性盒子布局 当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式 性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器,弹性容器内包 阅读全文
posted @ 2020-08-22 18:32 帅气巴巴 阅读(151) 评论(0) 推荐(0) 编辑
摘要: CSS3多列布局 column-count 指定元素应该被分割的列数。 column-fill 指定如何填充列 column-gap 指定列与列之间的间隙 column-rule 所有 column-rule-* 属性的简写 column-rule-color 指定两列间边框的颜色 column-r 阅读全文
posted @ 2020-08-22 08:31 帅气巴巴 阅读(306) 评论(0) 推荐(0) 编辑
摘要: CSS3动画 添加某种效果可以从一种样式转变到另一个 @keyframes 创建动画 @keyframes move { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } animation 所有动画属性的简写 阅读全文
posted @ 2020-08-22 07:31 帅气巴巴 阅读(660) 评论(0) 推荐(0) 编辑
摘要: 使用 3D 转换来对元素进行格式化 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换,使用 16 个值的 4x4 矩阵。 translate3d(x,y,z)定义 3D 转化。 translateX(x)定义 3D 转化,仅使用用于 X 轴的值。 t 阅读全文
posted @ 2020-08-22 07:08 帅气巴巴 阅读(504) 评论(0) 推荐(0) 编辑
摘要: transform 转换 对元素进行移动、缩放、转动、拉长或拉伸,让某个元素改变形状,大小和位置 ,下面是transform的属性和方法: origin 属性 可以更改旋转得圆心坐标可以是方位和坐标 rotate() 旋转 在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。 默认旋 阅读全文
posted @ 2020-08-22 06:55 帅气巴巴 阅读(124) 评论(0) 推荐(0) 编辑