移动webDay1—Day7
移动web—Day1
一、平面转换
1. translate（位移）
- 参数1 水平移动距离 参数2 垂直移动距离
- 添加位移的元素 移动位置后 不会影响其他元素的位置 且会盖住其他元素 自身原本的位置保留
2. rotate（旋转）
- 取值为正, 则顺时针旋转
- 取值为负, 则逆时针旋转
transform-origin 改变转换原点
默认圆点是盒子中心点；
transform-origin: 原点水平位置 原点垂直位置;
取值 =>方位名词（left、top、right、bottom、center）
3. transform（复合属性）
先写 位移 再写 旋转
4. scale（缩放）
- transform: scale(缩放倍数);
- scale值大于1表示放大, scale值小于1表示缩小
二、渐变
使用 background-image 属性实现 渐变背景 效果
移动web—Day2
一、空间转换
1. transform
translate实现元素 空间位移
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
rotate实现元素 空间旋转
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
scale实现空间缩放
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);
2. perspective：
视距，实现透视效果（添加给父级）
像素单位数值， 数值一般在800 – 1200
空间转换时，为元素添加近大远小、近实远虚的视觉效果
3. transform-style: preserve-3d
立体图形
添加给动画盒子的父元素 使子元素处于真正的3d空间
二、动画 animation
1. 定义
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧
2. 执行过程
3. 动画属性
移动web—Day3
一、版心
用户的屏幕的大小(分辨率)各不相同;
为了让用户在不同分辨率屏幕下访问网站时
可以正常预览网页内容,采用了一个版心的做法必须因素:
(1)宽度(800-1366)
(2)水平居中(页面缩放 主体内容永远在正中央)用户的屏幕分辨率大 , 访问网站时,可以正常预览主体内容区域 , 两边的留白看起来宽一些;
用户的屏幕分辨率小 , 访问网站时,可以正常预览主体内容区域 , 两边的留白看起来窄一些;
二、移动端特点
PC端网页和移动端网页的有什么不同？
- PC屏幕大，网页固定版心
- 手机屏幕小， 网页宽度多数为100%
1. 分辨率
屏幕尺寸
屏幕对角线的长度，一般用英寸来度量
物理分辨率是生产屏幕时就固定的，是不可被改变的
逻辑分辨率是由软件（驱动）决定的
2. 视口
- 使用meta标签设置视口宽度，制作适配 不同设备宽度 的网页
- 显示HTML网页的区域，用来约束HTML尺寸（默认980px） 使得：网页的宽度和逻辑分辨率尺寸相同
<meta name="viewport" content="width=device-width, initial-scale=1 minimum-scale=1 maximum-scale=1 user-scalable=no" />
三、百分比布局（流式布局）
宽度自适应，高度固定
四、Flex布局（弹性布局）
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题
1. 主轴对齐方式
justify-content 调节 元素在主轴的对齐方式
2. 侧轴对齐方式
align-items 控制弹性容器里面所有的元素（添加到弹性容器）
align-self 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
3.多行元素侧轴对齐防止
align-content（只控制侧轴 不能设置主轴 且弹性容器内必须为多行元素）
/* 基本位置对齐 */align-content: center; /* 将项目放置在中点 */align-content: flex-start; /* 从起始点开始放置 flex 元素 */align-content: flex-end; /* 从终止点开始放置 flex 元素 *//* 分布式对齐 */align-content: space-between; /* 第一项与起始点齐平， 最后一项与终止点齐平 */align-content: space-around; /* 项目在两端有一半大小的空间*/align-content: space-evenly; /* 项目周围有相等的空间 */align-content: stretch; /* 拉伸‘自动’ - 大小的项目以充满容器 */
块级元素变成弹性盒子后 宽度变成由自身内容撑开 自身没有高度时 铺满父容器的高度
行内元素变成弹性盒子后 自身没有高度时 铺满父容器的高度 可以直接设置大小
把行内元素变成弹性容器 可以直接设置大小
flex：1；把父元素剩余的空间 分成1份
flex：1优先级大于width
4. flex移动端布局案例
- 创建相关的文件夹（images、css、less、fonts、uploads、index.html）
- 引入字体图标.css / base.css 两个css文件
- 引入favicon.ico图标
<link rel="shortcut icon" href="../favicon.ico">
- 分整体界面结构，确定要用到的适配方案
- 熟悉提供的项目素材
- 要注意html结构层级，结构清晰，不要造成全是div（后面会有相关笔记）
移动web—Day5
一、长度单位 rem、vw/vh
1. rem
rem单位
- 相对单位，相对于HTML标签的字号（
font-size：37.5px;）计算结果- 1rem = 1HTML标签字号大小
==注意：==使用rem 要确保设计稿是在375px的情况下
2. vw/vh
- 相对单位
- 相对视口的尺寸计算结果
vh是1/100视口高度，全面屏视口高度尺寸大;
所以，vw与vh不能一起使用，会改变整体布局的基准值
2.1 vmin与vmax
vim使用最小那边的比例
- 如果浏览器窗口的高度小于他的宽时，
1vmin将等价于1vh；- 如果浏览器的宽度小于他的高度时，
1vmin等价于1vw。
vmax使用最大的那边的比例vmax
- 因此当viewport的宽大于高时，
1vmax等价于1vw；- 如果浏览器的高大于宽时，
1max将等价于1vh。
vim：使用视窗宽与高中的最小的那个。 vmax：使用视窗宽与高中的最大的那个。
vim和vmax是CSS媒体查询一个理想的替代品，或算是补充；- 因为它们会立即对屏幕宽高比做出响应。
3. rem和vw/vh 的区别
| rem | vw/vh | |
|---|---|---|
| 优点 | 兼容良好（目前为主流） | 1. 省去各种判断和修改 |
| 缺点 |
1.不断修改html文字大小 2. 需要媒体查询@media 3. 需要在body底部添加flexible.js |
兼容性不佳 |
二、媒体查询
- 检测视口的宽度，然后编写差异化的 CSS 样式
- 当某个条件成立, 执行对应的CSS样式
==拓展：==媒体查询始终属于css的范畴，即使有屏幕尺寸的检测与判断；js有另外独属于的屏幕监测；
三、flexible.js
- flexible.js是用来适配移动端的js框架。
- 核心原理：根据不同的视口宽度给网页中html根节点设置不同的font-size。
四、less
1. 定义
Less是一个CSS预处理器，扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力；
less 比css 注重结构层级性与逻辑
2. 使用与定义变量
定义变量：@变量名:值;
使用变量：css属性:@变量名;
3. less导入其他less文件
面试题：@import与link的区别？
区别一：link先有，后有@import（兼容性link比@import兼容好）； 区别二：加载顺序差别，浏览器先加载的标签link，后加载@import
4. 禁止导出css
在less文件第一行添加：// out:false
移动web—Day6
一、响应式布局
二、bootstrap框架
三、Layui框架
拓展：
一. dispaly:grid;布局
非常强大 还在学习中……
二. HTML结构层级优化
标签语义化 有助于构架良好的HTML结构；
有利于搜索引擎的建立索引、抓取，构建清晰的结构，团队的开发、维护。
1. HTML的结构层级（meta标签）
HTML的页面结构：第一部分为DOCTYPE模块，第二部分为html模块。
DOCTYPE模块
- 文档声明，告知浏览器使用哪种HTML版本规范方式解析网页，使网页能正常显示。
html模块
- 告诉页面这是一个html文档。
在部分中：
- head模块
这部分中描述HTML文件的各种属性和信息（网页的标题，字符编码，是否启用缓存，引用的外部脚本和样式等等）- body模块
HTML的主体，网页的文本、超链接、图像、表格、视频等所有在网页上显示的内容都写在这里。
2. meta标签name属性
<meta name="属性值" content="描述内容"/>常用name属性值:
keywords—— 告诉搜索引擎网页的关键字。⭐⭐description—— 告诉搜索引擎网站的主要内容。⭐⭐
robots—— 告诉爬虫哪些页面需要索引，哪些页面不需要索引。
author—— 标注网页的作者信息。
generator—— 标注网页是用什么IDE做的。
copyright—— 标注版权信息。
renderer—— 指定双核浏览器默认以什么方式进行页面渲染content="webkit"为webkit内核，content="ie-comp"为IE兼容模式，content="ie-stand"为IE标准模式。
3. 标签使用规范
div 和 span 进行文档结构基本构成
div 块级元素 ， 通常指定结构内容包含在div中，并分配class和id。
span 行级元素 通常对行级元素进行分组 例：
z正文内容
我是重要内容
4. logo的seo优化
<!-- logo 模块 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div>
a {display: block;width: 171px;height: 61px;background: url(../images/logo.png) no-repeat;// 京东的做法font-size: 0;// 淘宝的做法// text-indent: -999px;// overflow: hidden;}
HTML: .logo>h1>a>网站名称
==CSS：==logo图标以背景图的形式放在a标签里面（font-size、text-indent 两种做法）
5. html新结构
1. header
<header> /* 一般header大盒子都会进行绝对定位*//*logo区域*/<div class='logo'><h1><a>logo名称</a></h1></div><div class='Information bar'> </div> </header>
2. nav
<nav><li><a href="#">首页</a></li><li><a href="example.html">客户案例</a></li><li><a href="service_one.html">技术服务</a></li> <li><a href="aboutus_one.html">关于我们</a></li><li><a href="connection.html">联系我们</a></li><i class="iconfont icon-you-01-copy"></i> /*如果有字体图标 最好使用i标签 以便于js后续的操作 以及方便li标签的滚动*/</nav>
3. article
<article> /*定义文章 独立完整的,可以被外部引用的，会包含 header 标题与内容 p*/<h1>HTML5学习之语义化标签</h1><p>....正文.....</p><footer>版权所有*伪版必究</footer> </article>4. section
- 定义区块，包含标题与正文，强调分块或分段
- 如果我们的页面中需要一个单独的模块来实现一个单独的功能，就用
，其他用
http://www.taodudu.cc/news/show-3875059.html相关文章：
- BI大数据名词术语
- C++名词解释
- 数据库期末复习资料 （超全的名词解释和简答题）
- 深度学习的名词解释
- 阿里云PTS FQA
- 阿里云性能测试PTS场景
- 阿里云服务器ECS选款利器，性能测试PTS详解
- 阿里云性能测试 PTS 3 月新功能
- 阿里云pts做性能测试
- 阿里云发布性能测试 PTS 2.0：低成本、高效率、多场景压测，业务稳定性保障利器
- 阿里云发布性能测试 PTS 2.0：低成本、高效率、多场景压测
- 阿里云加密服务如何使用？
- 网站压力性能免费在线测试：阿里云PTS,Load Impact,loader.io服务器负载能力测试
- 阿里云SLB压测PTS的采样日志上有大量的503
- 使用阿里云PTS测试LAMP环境性能
- 阿里云性能测试 PTS 上手体验
- 阿里云下配置keepalive
- 阿里云平台接入python版
- 基于阿里PTS性能测试流程
- 阿里云性能测试工具 PTS 介绍
- Jmeter使用Websocket插件测试SingalR，外加还有阿里云PTS的Jmeter原生测试爬坑日志。
- 五大问题，详解阿里云PTS铂金版
- 性能测试-关于阿里云PTS使用与思考
- 阿里云性能测试工具PTS介绍
- 【Java】将中文转为驼峰式拼音
- SQL从中文中获取拼音首字母
- 关联式容器概念介绍
- C#拼音联想式选择
- Windows 10 通过 Samsung DeX 使用鼠标和键盘控制 Galaxy 手机
- 三星运行linux,三星Linux on DeX项目让你随时随地享受Linux环境，附介绍
移动webDay1—Day7相关推荐
- python学习之路-day7
本节内容: 面向对象高级语法部分 静态方法.类方法.属性方法 类的特殊方法 反射 异常处理 Socket开发基础 面向对象高级语法部分 静态方法 ...
- SpaceEmacs Rock Day7 学习笔记
<?xml version="1.0" encoding="utf-8"?> SpaceEmacs Rock Day7 学习笔记 SpaceEmac ...
- Loj #6077. 「2017 山东一轮集训 Day7」逆序对
Loj #6077. 「2017 山东一轮集训 Day7」逆序对 Solution 令fi,jf_{i,j}fi,j表示前iii个数产生jjj个逆序对的方案数,每次考虑把i+1i+1i+1加入,有i ...
- 容斥问卷调查反馈——Co-prime，Character Encoding，Tree and Constraints，「2017 山东一轮集训 Day7」逆序对
文章目录 Co-prime source solution code Character Encoding source solution code Tree and Constraints sour ...
- [LOJ 6042]「雅礼集训 2017 Day7」跳蚤王国的宰相（树的重心+贪心）
[LOJ 6042]「雅礼集训 2017 Day7」跳蚤王国的宰相 description solution 一个到所有节点距离和最小的节点 ⇔\Leftrightarrow⇔ 树的重心(满足最重的儿 ...
- python 循环指定次数_亮仔的Python之路Day7——Python循环语句
day7:2019-09-01 今日学习目的: 了解循环语句,使用代码解放劳动力 实践是检验真理的唯一标准 我们使用代码的最终目的是解放劳动力 当你还在复制粘贴累的半死的时候 别人随手几行代码就搞定 ...
- day7——集合，深浅copy
数据类型的补充 # s1 = '中国' # b1 = s1.encode('utf-8') # # print(b1)-------------->b'\xe4\xb8\xad\xe5\x9b\ ...
- LeetCode算法入门- String to Integer (atoi)-day7
LeetCode算法入门- String to Integer (atoi)-day7 String to Integer (atoi): Implement atoi which converts ...
- Activity的launchMode启动模式 day7
2019独角兽企业重金招聘Python工程师标准>>> Activity的launchMode day7 在功能清单AndroidManifest.xml 里 设置 启动模式 如: ...
最新文章
- EXP6 信息搜集与漏洞扫描
- python文件和目录
- 重磅！2020中国高校毕业生月薪排名：清华第1，共计24高校月薪过万
- job kettle 导出_kettle从hive2导出数据正常，但是用kettle manager启动就报错
- 整理Java相关的工具类Utils，持续更新中，建议收藏【目前更新至24】
- Spring Cloud——基于OpenFeign调用PaddleOCR的Restful API服务解决方案
- 一款jQuery立体感动态下拉导航菜单特效
- linux init 参数,Objective-C中实现覆写init函数以及在初始化时添加参数
- asp.net 读取mysql数据库_asp.net访问MySQL数据库
- JavaScript获取一周前，一个月前日期
- Atitit httpclient 概述 rest接口 目录 1. Httpclient 利用http协议的client类库与技术方法 1 2. 功能用途 why 2 2.1. 上传下载文件 2
- 读书笔记 | 自动驾驶中的雷达信号处理（第1章 雷达系统基础）
- 产品经理面试，设计攻略
- CE修改植物大战僵尸
- 为什么微信显示这个android设备,微信显示安卓手机型号在哪设置
- CWnd::Create和CWnd::CreateEx 区别
- CATIA达索三维建模软件的功能和核心技术是什么？
- nginx 配置后缀
- secret学习笔记
- 海康威视web插件层级遮挡问题，仅供参考