摘要: Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。 “行(row)”必须包含在 .container (固定宽度)或 .container 阅读全文
posted @ 2020-08-27 08:39 帅气巴巴 阅读(117) 评论(0) 推荐(0) 编辑
摘要: 响应式 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) 编辑
摘要: 响应式 Web 设计 - 网格视图 响应式网格视图通常是 12 列(按列来布局),宽度为100%,在浏览器窗口大小调整时会自动伸缩 创建响应式网格视图 首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。 12 列的网格系统可以更好的控制响应式网页 首先我们 阅读全文
posted @ 2020-08-21 21:50 帅气巴巴 阅读(143) 评论(0) 推荐(0) 编辑
摘要: Viewport 是用户网页的可视区域,手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。 width:控 阅读全文
posted @ 2020-08-21 21:49 帅气巴巴 阅读(130) 评论(0) 推荐(0) 编辑