01
h5
- html
- css
- js
语义化标签
- header 头部标 签
- nav 导航栏
- footer 尾部
- section 区域
- aside 侧边栏
- article 文章
- audio 音频
- video 视频
- autoplay=autoplay 自动播放 谷歌把他禁用了
- muted = muted 静音 有了静音能自动播放
- controls = controls 控制面板
- poster=”图片路径” 视频播放前的图片
- loop =loop 单曲循环
- <source src=”路径” />
- input
- type=”text” 文本框
- type=”password” 密码框
- tye=”button” 按钮
- type=”number” 数字 在移动端会自动打开数字键盘
- type=”tel” 电话 没有校验类型
- type=”search” 搜索
- 属性
- value 默认值
- defaultvalue 默认值
- placeholder 占位符
- autofocus 自动获取焦点
- autocomplete =”on” 必须要有name 表单提交过
- required 必须验证
选择器
属性选择器
- 权重 10 伪类 10 伪元素10
- 语法 []
- [c ] 表示 选中 属性是 c 的标签
- [ c = “a” ] 表示 选中 属性是 c 属性值 是 a 的标签
- [ c *= “a” ] 表示 选中 属性是 c 只要属性值 有一个 是 a 的标签
- [ c ^= “a” ] 表示 选中 属性是 c 只要属性值 开头 是 a 的标签
- [ c $= “a” ] 表示 选中 属性是 c 只要属性值 结尾 是 a 的标签
伪类
:hover
- 鼠标经过的时候
- 伪元素 content里面的 内容选不中 伪元素 没有hover 状态
:focus
- 文本框获得焦点
nth-child()
- 偶数 2n even
- 奇数 2n + 1 odd
- n 是从0开始的
- 从个数数 不限定子元素类型
nth-of-type
- 从子元素的类型来数的 限定的子元素类型 不管 子元素在任何位置
并集选择器
div , p , a {}文章源自JAVA秀-https://www.javaxiu.com/494.html
交集
span.box span:nth-child()文章源自JAVA秀-https://www.javaxiu.com/494.html
伪元素
- ::before
- ::after
- 必须要有content
- 默认是行内元素
- 本质就是一个 HTML标签
- 伪元素hover
- div:hover::after {}
2D移动
- transform: translate(100px, 200px) x 100px y 200px
- 不会影响后面元素
- transform: translate(50%, 50%) 这个百分比相对于自身
02
旋转
- transform: rotate( 180deg );
- 顺时针 是正的
- 逆时针旋转是负的
- 类似转盘抽奖 旋转是Z轴
- transition : 过度
- 过度写在本身上
- 过度一般执行 一次
- transform-origin: left top; 左上
- transform-origin: 50px 50px; 左上 改变旋转 中心
- background-position: left top;
缩放
- transform: scale(2); 宽度 和 高度 都放大2倍
- 缩小 小于1
- transform: scale(2 , 1.5 ); 宽度 放大2倍 高度 放大1.5 倍
旋转移动 注意点
- 旋转之后坐标轴会发生改变
- 一般我们先 移动 在旋转
动画
animation: css @keyframes aaa { 0% { } 100% { transform: translate(1000px, 100px); transform:translateX(); } } div { /* 动画的名字 */ animation-name: aaa; 动画持续时间 animation-duration: 2s; 动画运动的曲线 linear 匀速 animation-timing-function: ease; 动画延时 animation-delay: 2s; 动画播放的 次数 infinite 无限循环 animation-iteration-count: infinite 动画播放的方向 animation-direction: normal; alternate; 动画结束后的状态 forwards 结束的状态 开始的状态 backwards animation-fill-mode: forwards; 停止动画 animation-play-state: paused; 无限循环 2s infinite forwards alternate }
rgba 和 opacity的区别文章源自JAVA秀-https://www.javaxiu.com/494.html
- rgba 只让背景透明 内容不透明
- opacity 让背景透明和 内容都透明
03
看到盒子做动画的都是定位
3D
- x x轴 从 右 正 左边 负的
- y y轴 从 上 往下 下面是正的
- z Z 轴 从里往外 迎面而来
- 大拇指 代表的是 x 轴
- 食指 (大拇指旁边)代表的是y 轴
- 中指 (大拇指旁边的旁边 )代表的是Z轴
- 大拇指 食指 中指 垂直的状态
- transform: translate( 100px , 300px ); 注意: 这里没有第三个值
- transform: translate( 100px ); x 轴移动 100px y轴没有移动
- transform: translateX(100px) translateY (100px) translateZ (100px);
- transform: translate3d( 10px, 20px, 30px );
- transform: translate3d( 10px, 0 , 30px );
- Z 轴只能给 px
- perspective 透视
- 透视作用: 开启3D效果
- 透视写到被观察元素的父盒子上面
- 透视单位 px perspective : 100px 和 perspective : 1000px perspective : 100px 的盒子更大
- 近大远小
- 一般透视的距离要大于 translateZ 的值 因为 小于 translateZ 的值 我们在屏幕上看不到盒子
X轴旋转
transform: rotateX( 100deg );文章源自JAVA秀-https://www.javaxiu.com/494.html
- 左手法则:
- 1、 左手握拳
- 2、 大拇指指向 x 轴正方向
- 3、 其余四个手指弯曲的方向 顺时针为正方向
- X 轴旋转类似于 拉单杠旋转
Y轴旋转
transform: rotateY( 100deg );文章源自JAVA秀-https://www.javaxiu.com/494.html
- 左手法则:
- 1、左手握拳
- 2、大拇指指向 Y 轴正方向
- 3、其余四个手指弯曲的方向 顺时针为正方向
- Y 轴旋转类似于 钢管舞
Z轴旋转文章源自JAVA秀-https://www.javaxiu.com/494.html
transform: rotateZ( 100deg );文章源自JAVA秀-https://www.javaxiu.com/494.html
左手法则:文章源自JAVA秀-https://www.javaxiu.com/494.html
- 1、左手握拳
- 2、大拇指指向 Z 轴正方向
- 3、其余四个手指弯曲的方向 顺时针为正方向
transform-style : preserve-3d:文章源自JAVA秀-https://www.javaxiu.com/494.html
- 子元素默认没有3D效果
- 加给子元素的直接父元素
04
手机屏幕的现状 移动开发现状
碎片化特别严重文章源自JAVA秀-https://www.javaxiu.com/494.html
视口 看做一个相框
浏览器显示内容的区域文章源自JAVA秀-https://www.javaxiu.com/494.html
- 布局视口
- 移动端布局视口 980px PC 端 布局视口 浏览器有多宽
- 视觉视口
- 屏幕的宽度
- 理想视口
- 屏幕的宽度 和 设计图一致
需要添加一个meta 标签
- SEO 搜索引擎优化 tdk
标准视口设置
<meta name="viewport" content=" width=device-width , initial-scale = 1.0, user-scalable=no , minimum-scale = 1.0, maximum-scale = 1.0 " /> width=device-width 宽度等于设备的宽度 user-scalable=no 不允许用户缩放 maximum-scale = 1 最大缩放比 minimum-scale = 1 最小缩放比 initial-scale = 1 初始缩放比 快捷键 meta:vp+ tab
物理像素
- 物理像素 就是我们说的分辨率 iPhone8的物理像素是 750 * 1334
- pc端 一个物理像素(px)能放 一个物理像素点
- iPhone8 一个开发尺寸(px) = 2个物理像素
- 物理像素比
为什么需要多倍图
- retina 高清屏 物理像素比 1:1 1:2 1:3
- 1:2 1CSS 开发 像素 对应 2个物理像素点
- 多倍图 防止图片失真
- 移动端 你量的图片 40px 实际需要80px的图片
背景图的大小
- background-size: 500px; 宽度是500 高度自适应
- background-size: 50%; 父元素 宽度的一半
- background-size: cover ; 图片等比例放大或者缩小 图片完全充满内容区域 图片可能显示不完整
- background-size: contain; 图片等比例放大或者缩小 但是 可能 盒子 有空白区域
移动端开发解决方案
- 单独开发一套移动端代码
- 性能好
- 响应式
- 一套代码 性能不好
- 初始化css base.css 推荐的第三方 normalize.css
- box-sizing: border-box; 一旦设置这个属性 width 是多少 盒子宽高就是多少
移动端特殊样式
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/ -webkit-appearance: none; /*禁用长按页面时的弹出菜单*/ img,a { -webkit-touch-callout: none; }
移动端常见布局
- 百分比布局
- 流式布局 宽度使用 百分比
- flex 布局
- less + rem
- 混合布局
max-height: 最大高度文章源自JAVA秀-https://www.javaxiu.com/494.html
min-height: 最小高度文章源自JAVA秀-https://www.javaxiu.com/494.html
京东项目
- 创建网站目录H5
- 创建css 主要存放css文件
- normalize.css 项目初始化的文件
- index.css 主要放首页的css
- images 存储图片的目录
- upload 经常更改的产品图片
- index.html 首页
- 一般引入第三方的CSS文件 首选引入他 自己写的放在最后面
- 在移动端 图片一定要注意倍图 问题
- 行内块 默认是基线对齐 vertical-align: baseline
- vertical-align:middle;
- vertical-align:top;
- vertical-align:bottom;
- display: block;
- 移动 web 和 APP 的区别
- 移动 web 在手机浏览器 中访问的网站都是 移动 web
- APP 软件 微信 QQ 手机淘宝客户端 需要下载安装
- 圣杯布局 双飞翼布局
- 两侧固定 中间自适应
- 结构
- 先来一个一号 大盒子 大盒子 里面 左 中 右 3个盒子
- 左和右侧的盒子 定位 (绝对定位 ) 一号 大盒子来个相对定位 (子绝父相)
- 中间的盒子是标准流 给中间的盒子一个左右的margin
- 盒子什么时候塌陷
- 嵌套的盒子 当子盒子设置margin-top 的时候 会发生塌陷
- 给父元素 overflow:hidden
- 给父元素 padding-top
- 给父元素 border-top
- 浮动 绝对定位 和固定定位
- 结构
- 两侧固定 中间自适应
- 伪元素默认的是行内元素 同时伪元素必须要有content
- 伪元素就是一个标签
- 2倍精灵图做法
- PS里面可以把图片缩放一倍 测量 x 和 y
- 精灵图 x和 y 都是负 的
- background-size: 修改背景图尺寸
- 注意: background-size 在精灵图里面一定不要加 50%
- 常见图片格式
- jpg ,png, gif , tmp
- webp 谷歌 比jpg 更小 色彩更丰富
- dpg 京东
line-height: 1.5 表示 盒子的高度 会由font-size的大小乘以 行高的倍数
- .news a:nth-child(n+2) n的取值从0开始
- .news a:nth-child(-n+2)
- box-sizing: border-box; 盒子最终设置 width是多少 盒子最终宽度就是多少
05
flex 布局
原理
给直接父元素添加flex 控制 子元素的位置文章源自JAVA秀-https://www.javaxiu.com/494.html
控制主轴方向
- display: flex;
- 主轴可能是 x 轴 也可能是 y轴
- flex-direction: row ; 默认是x轴 从左到右
- flex-direction: row-reverse ; 从右到左
- flex-direction: column; 主轴变成y轴 从上到下
- flex-direction: column-reverse; 从下到上
- 主轴和侧轴垂直的
控制主轴子元素的排列方式
- justify-content: flex-start; 默认 从主轴 头部开始
- justify-content: flex-end 从尾部开始 最后在尾部
- justify-content: center; 居中
- justify-content: space-around ; 平分剩余空间
- justify-content:space-between; 先2边贴边 中间再平分剩余空间
- justify-content 永远只控制主轴
设置子元素换行
- flex-wrap: nowrap; 不换行
- flex-wrap: wrap 换行
控制侧轴子元素显示 align-items 单行 单列
- align-items: center; 在侧轴上居中
- align-items: flex-start; 默认 头部开始
- align-items: flex-end ; 尾部开始
- align-items:stretch; 子元素拉伸 子元素不能设置高度
- align-items 控制 侧轴 单行 或者 单列
控制侧轴多行子元素显示 align-content 多行多列
- align-content: 控制多行多列
- align-content: space-around; 平分剩余空间
- align-content: space-between; 先2边贴边 中间再平分剩余空间
flex-flow
- flex-flow: flex-direction flex-wrap;
- flex-flow: column wrap; 主轴是y轴 子元素 换行
flex:number; 子元素 占据剩余空间的比例
当前子元素所占的比例 = 当前子元素的flex的值 / 所有子元素的flex值得和 ( / 除以 )文章源自JAVA秀-https://www.javaxiu.com/494.html
flex:number;文章源自JAVA秀-https://www.javaxiu.com/494.html
携程在线
- 技术选型
- 流式布局
- flex
- less + rem
- 混合
注意点 第三方样式永远放在自己写的样式的前面
固定定位盒子居中
- left:50%; 如果盒子有具体宽度 margin-left: – 自身宽度的一般
- left:50%; transform: translateX(50%); transform 中 百分比是相对于自身的
search部分
- 首先来一个大盒子 大盒子里面在嵌套2个子盒子
- 左侧是一个 div 右侧是一个a标签
左侧自适应 右侧固定
- 百分比布局的时候
- 给右侧的盒子固定宽高 子绝父相 进行定位
- 左侧的盒子 宽度是100%; 给一个margin-right
- flex 布局
- 首先给父元素开启flex display:flex
- 给右侧的盒子固定宽高
- 给左侧的盒子flex :1;
移动端 背景图怎么做
- 在ps里面 把缩小 2倍 项目中的原图 宽度还是208
- 量取小图标的位置
- background-size 缩小背景图 、
- 盒子阴影 box-shadow
- 文字阴影 text-shadow
word-spacing 英文 之间的距离
letter-spacing 汉字 之间的距离
###扩展文章源自JAVA秀-https://www.javaxiu.com/494.html
- linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果
linear-gradient(方向,开始颜色 位置,颜色2 位置,颜色3 位置...) 第一个参数表示线性渐变的方向, 1. to top:设置渐变从下到上。相当于: 0deg 2. to right:设置渐变从左到右。相当于: 90deg; 3. to bottom:设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。也可以直接指定度数,如45deg; 4. to left:设置渐变为从右到左。相当于: 270deg;
- radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
radial-gradient(形状 大小 坐标,颜色1,颜色2...) 形状shape:circle:产生正方形的渐变色 ellipse:适配当前的形状
em
- em 是一个单位 如果自身有font-size 会参照自身的font-size 来计算
- 如果自身没有就是找的父元素的font-size 来计算
rem
- rem 只会参照html 的font-size 字体大小
rem 原理
- 等比例缩放
媒体查询
- 根据不同的屏幕 加载不同的样式
- @media screen and ( max-width: 800px ) {}
css
- 无法计算
- 不方便扩展和 维护
less
- 支持运算
- css预处理语言
- @ 变量名 : 变量值 ;
- 变量名 不能数字 字母 数字 不要使用中文
- 变量名区分大小写
注意: less 浏览器 不支持 但是编译之后 的css 我们才需要引入
*
乘以/
除- // 1. 我们运算符的左右两侧必须敲一个空格隔开// 2. 两个数参与运算 如果只有一个数有单位,则最后的结果就以这个单位为准// 3. 两个数参与运算,如果2个数都有单位,而且不一样的单位 最后的结果以第一个单位为准
- sass scss
- w100% 750 –》 750px 640 –> 640px 320 —》 320px
- 1rem 750 –》 html{ font-size: 75px }
- 10rem 750 –》 html{ font-size: 75px } 640 —-> html{ font-size: 64px }
rem适配原理
- 等比例缩放
- 根据不同的屏幕 设置 不同的html 的font-size 字体大小
- less + rem
- 淘宝 flexible.js –
ui 给的设计图 一般是 750 或者640px
引入less @import “common”;文章源自JAVA秀-https://www.javaxiu.com/494.html
- 渐进增强
- 先开发低版本 在开发高版本
- 优雅降级
- 先 开发高版本 在兼容ie678
- 实际工作中拿到的设计图 只有一个 一般给你 750px 那你就要用750宽的font-size
- 给你 360px 那你就要用360宽的font-size
- flexible.js 默认把屏幕化成10份 每一个屏幕下的html 的font-size 都算好了
- 一般给你 750px 750的html font-size 75
@media (-webkit-min-device-pixel-ratio: 2) { div { background-color: pink; 加载2倍图图片 background-image: url(); } } @media (-webkit-min-device-pixel-ratio: 3) { div { background-color: yellow; 加载3倍图图片 background-image: url(); } }
布局容器
- 在不同的屏幕下 宽度不一样
- 超小屏 (手机) < 768
- 小屏 (平板) < 992
- 桌面显示器 < 1200
- 电脑 1200
- 4k 电视
- @media screen 查询到任何屏幕
750 的设计图 html font-size : 100px 屏幕化分成7.5份
在750的设计图上 量的宽度是 400px 最终写文章源自JAVA秀-https://www.javaxiu.com/494.html
- px换成rem rem = 量的宽度/当前设计图宽度的font-size
量的宽度是 400px 400 / 100 4rem文章源自JAVA秀-https://www.javaxiu.com/494.html
如果说 我写的是 4rem 问 在 750的设计图下 盒子多宽文章源自JAVA秀-https://www.javaxiu.com/494.html
rem换成px rem * 当前屏幕下的 html 的 font-size文章源自JAVA秀-https://www.javaxiu.com/494.html
- 4rem * 100 = 400px
- 4rem 在 320屏幕下 宽度
- 4 * 320/7.5 170px
和上面的没关系 屏幕化分成 15份
- 750屏幕下 font-size: 50px
- 360 font-size: 24px;
rem换成px rem * 当前屏幕下的 html 的 font-size
- 0.88rem 750屏幕下 0.88 * 50 = 44px 44/750 = 0.058666666666666666
- 0.88rem 360屏幕下 0.88 * 24 = 21.12px 21.12 / 360 = 0.05866666666666667
栅格系统 把布局容器 平分成12份
@media (min-width: 992px){}
- 媒体查询 当最小宽度是 992
- col-md-offset-1 margin-left: 1/12
- col-md-offset-2 margin-left: 1/6
- col-md-offset-3 margin-left: 1/4
- col-md-3 width: 3/12 ==> width: 25%;
@media (max-width: 1199px) and (min-width: 992px) {}
9992 – 1199文章源自JAVA秀-https://www.javaxiu.com/494.html
bootstrap
- 快速开发
- 开发确实 爽
- 对于 用户 体验不爽
- 迭代 v.9.00 v.901
- 升级
- 如果性能有要求 分开开发
flyxfa文章源自JAVA秀-https://www.javaxiu.com/494.html
col-md-2 只有屏幕宽度大于 992 才会有width: 16.66666667%;
flex rem 流式布局文章源自JAVA秀-https://www.javaxiu.com/494.html

评论