11.9实训笔记

11.9实训笔记

新知识

标注图

CMI

布局

总体实现布局，再分块实现内容

做布局时只考虑布局，做内容时只考虑内容

布局：工/H T I/i 口 国 框

内容：布局外的统称外内容：文字、图片、音视频等

demo-满足移动和PC-LOGIN（自适应、响应式、沉浸式）

标签

html5标签 注音

• 使用方法：
  漢 ㄏㄢˋ
  

  • 效果图

对布局和内容选择合适的标签

交互

多是在动画、特效、事件以及数据绑定、渲染等方面展开的内容

技术补充学习

基本布局学习

• 工字型
• 口、国

设计模式

• 自适应

  • 解决页面完整的可视问题
  • 单位选择多为相对单位：%、rem、em
  • html标签的父元素为浏览器
  • 口字型模型
  • 设置了方向属性后，水平&垂直调换

• 响应式

  • 解决在不同设备终端显示效果的问题

    • 媒体查询

  • 两个条件

    • 视口viewport
    • 媒体查询@media 相应设备类型 and|or|not（相应条件）

• 沉浸式

  • 增加代入感

    • AR、VR、游戏网页前端

  • 静态沉浸式、动态沉浸式

语音合成器

• GPRS/WIFI定位
• http://tts.baidu.com/text2audio?lan=zh&ie=UTF-&&spd=7&text=

钓鱼网站

• 网站挂码

HBuilderX

html5+APP

CSS：布局+样式

fonts：与字体或字符（emoji）有关的素材

JS：与交互有关的内容

unpackpage：不参与打包APP的内容

index.html：默认首页

manifest.json：手机端的打包配置文件

CSS对结构控制的水平情况

作业

根据今天的内容，实现一个静态的沉浸式页面设计

XMind: ZEN - Trial Version