前端html5+css3 | 青训营笔记

学习前端的代学生
92 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的的第9天

一、html5

字体图标

  • 使用字体图标技巧实现网页中简洁的效果
  • 展示的是图标，本质上是字
  • 处理简单的、颜色单一的图

字体图标的优点

  • 灵活地修改样式
  • 体积小、渲染快
  • 兼容性高
  • 使用：下载字体包 图标库：www.iconfont.cn/

平面转换

  • 改变盒子在平面的形态（位移、旋转、缩放）
  • 2D转换
  • 属性：transform（水平移动距离，垂直移动距离）
  • translateX（） translatY（）

绝对定位居中

position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);

旋转

  • transform:rotate(deg)
  • 正为顺时针 负为逆时针
  • 要配合过渡属性使用
  • 使用transform-origin属性改变转换原点（水平位置 垂直位置）
    • 方位名词：left top right bottom center
    • 添加到标签本身

多重转换

  • 使用transform复合属性实现多形态转换
  • 旋转会改变坐标轴向，会导致位移方向受到影响

缩放

  • transform：scale（x轴缩放倍数，y轴缩放倍数）
  • 如果只有一个参数表示xy轴等比例缩放
  • 可以使用opacity属性来表示元素的有无，和渐变效果

渐变

  • 是多个颜色逐渐变化的视觉效果
  • 一般用于设置盒子的背景

image.png

  • 常用渐变
background-image: linear-gradient{
    transparent,
    raba(0,0,0,.6)
}

空间转换

  • z轴指向自己
  • 属性transform:translate3d(x,y,z);
  • translateX translateY translateZ

透视

image.png

  • perspective属性 添加到父级，建议给到800-1200px

image.png

空间转换

  • 配合perspective属性效果更好
  • transform:rotateZ 绕z轴旋转
  • transform:rotateY 绕y轴旋转
  • transform:rotateX 绕x轴旋转
  • 左手定则：

image.png

image.png

立体呈现

  • 添加transform-style:preserve-3d;让子元素处于真正的3d空间，默认值flat表示子元素处于2D平面内呈现

空间缩放

transform:scale3d image.png

动画

  • 两个状态用过渡实现
  • 而多个状态就只能使用动画来实现
  • 快速切换大量图片
  • 最小单元:帧或动画帧
  • 定义动画
@keyframes 动画名称{
    from{}
    to{}
}

@keyframes 动画名称{
    0%{}
    10%{}
    15%{}
    100%{}
}
  • 使用动画:animation:动画名称 动画花费时长
  • 百分比是指的总时长的占比时间
  • 动画属性

image.png

  • animation: change 1s steps(3) 1s 3;重复次数
  • animation: change 1s infinite alternate;循环播放
  • animation: change 1s backwards;动画停留在最初的状态 -animation: change 1s forwards;动画停留在结束的状态
  • animation-play-state: paused;暂停动画
  • linear 有匀速效果
  • alternate让动画有往返的效果

image.png

  • 补间动画和逐帧动画

image.png

  • 精灵图的制作

image.png

二、移动端

移动端特点

  • 屏幕尺寸：指的是屏幕对角线的长度
  • 分辨率：

image.png

  • 制造网页参考的是逻辑分辨率

视口标签

  • 使用meta标签设置视口宽度，制作适配不同设备宽度的网页

image.png

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">

二倍图

  • 能够使用像素大厨软件测量而被图中元素的尺寸，为了高分辨率下图片不会模糊失真
  • 750px的图

百分比布局

  • 效果：宽度自适应，高度固定，放在不同的屏幕里不会有大片留白

flex布局

  • 弹性布局
  • 是浏览器提倡的布局模型
  • 避免脱标的问题

image.png

image.png

主轴对齐方式

  • 目标:使用justify-content调节元素在主轴的对齐方式

image.png

  • justify-content:center:居中
  • justify-content:space-between:间距在子级之间
  • justify-content:space-evenly:所有地方间距相等
  • justify-content:space-around:子级之间的距离是父级两头距离的2倍

侧轴对齐方式

  • 使用align-items调节元素在侧轴的对齐方式
  • align-items(添加到弹性容器里面)
  • align-self:控制某个弹性盒子在侧轴对齐方式(添加到弹性盒子中 )

image.png

  • 父级叫弹性容器,子级叫弹性盒子
  • align-items:center:垂直对齐中间位置
  • align-items:stretch 使用时需要去掉高度
  • 不给宽

伸缩比

  • flex：值
  • 只占用父盒子剩余尺寸的份数

改变主轴

  • flex-direction属性

image.png

弹性盒子换行

  • flex-wrap:wrap换行 nowrap不换行
  • 调整行对齐方式：align-content，取值与justify-content基本相同

三、移动适配

  • 效果：网页元素跟着设备的尺寸改变,等比例缩放
  • 两种解决方案:rem vw/vh

rem

  • 长度单位 1rem=1HTML字号大小
  • 1HTML字号大小
  • 把视口等分10份，HTML字号取1份的大小

rem适配原理

image.png

rem-flexible

  • flexible.js是淘宝开发出来适配移动端的js框架
  • 原理：根据不同的视口宽度给网页中html根节点设置font-size

Less

  • 运用Less计算来完成px到rem的转换

image.png

  • 运算

image.png

  • 嵌套

image.png

  • &指代当前选择器
  • 定义变量:@变量名:值
  • 使用变量:css属性:变量名
  • 导入
    • @import "路径"
    • out: 路径
    • 禁止导出 out:false

vw/vh

  • 1/100视口长度
  • vw单位尺寸

image.png

三、响应式网页

媒体查询

  • 检测视口的宽度 image.png
  • 常用写法
    • max-width min-width
  • 书写顺序
    • 生效区间大的先写
    • image.png
  • 完整写法

image.png

  • 关键词：and only not
  • 媒体类型

image.png

  • 媒体特征

image.png

  • 外链式CSS引入

image.png

BootStrap

  • link引入

image.png

BootStrap栅格系统

  • 栅格化是指将整个网页的宽度分成若干份 image.png
  • .container,所有应用使用该类名的盒子,默认已被指定宽度且居中,自带15px的padding
  • .container-fluid,所有应用该类名的盒子,宽度为100%
  • 分别使用.row类名和.col类名定义栅格布局的行和列,会自带-15px的外边距

全局css样式

组件

  • 包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能
avatar
文章
阅读
粉丝