前端知识点总结—-响应式1.Responsive Web Page:响应式网页/自适应的网页2010年提出, 一个网页，会自动根据用户浏览设备不同，自动必变布局, 可以被PC/PAD/PHONE 正常浏览2:响应式网页必备(1)流式布局 float:left; (2)可以改变尺寸图片文字 font-size:1em; 响应式布局不足:代码更加复杂，不适合大型网页3:如何测试网页(1)使用真实物理设备 (2)使用第三方模拟器软件 (3)使用chrome 内置设备模拟器4:如何编写响应式网页 (1)声明viewport元标签 <meta name="viewport" content="width=device-width, initial-scale=1">viewport 元标签早期3G手机为浏览器大尺寸网页，只能强行页面缩小,导致图片/文字/链接IOS提出”视口”概念:虚拟窗口，大小与设备相同，如浏览大型网页，滑动.Android 也借鉴该概念 width=device-width 视口宽度=设备宽度 initial-scale=1 表示初始化视频大小1原始大小 user-scalable=no 用户是不顺可以调整视频大小 (2)使用流式布局 实现方法:float:left(3)所有容器使用相对尺寸，不用绝对尺寸.container{ /width:500px;/ width:50%;}(4)所有文字使用相对尺寸，不用绝对尺寸body{ /font-size:12px;/ font-size:2em;}(5)所有图片使用相对尺寸，不用绝对尺寸 img{width:25%;}(6)（最重要原则）使用CSS3 Media Query技术5: CSS3 Media Query技术 Media:指浏览网页的设备,如screen(pc/pad/phone),print,tv,tty. Media Query:查询当前浏览网页设备类型，以及特性(对比度，尺尺，手持方向等), 而选择性执行某些css代码，而忽略另外一些. 媒体查询使用方法两种(1) 根据媒体查询结果执行不同的css文件 <link media=”screen” href=”1.css”/> <link media=”print” href=”2.css”/>(2) 根据媒体查询结果执行css片段中不同部分6:自定义响应式布局(重点)(1)声明viewport 视口 (2)流式布局 (3)所有容器.文字.图片:相对尺寸不同绝对尺雨 (4)使用CSS3 Media Query7: CSS3 Media Query查询方式(1)根据媒体查询结果执行不同css文件(少) (2)根据媒体查询结果执行不同css片段(多) @media screen and (min-width:768px) and (max-width:991px){选择器{样式设定}}8:Bootstrap 全局样式bootstrap: 起步/引导程序 8.1:Twitter Bootstrap 框架 #官方网站 http://www.bootcss.com/ Bootstrap是一个HTML/CSS/JS 框架,用于开发响应式布局，移动设备优先项目. (1)起步 (2)全局CSS样式(重要—{栅格布局}) (3)组件 (4)js插件(图片轮播) (5)定制—自定义bootstarp 样式 提示:Bootstrap 知识点不难,1000+单词记忆8.2:起步 下载 css fonts js 基本模板<html lang="zh-CN">language:指定当前网页所使用自然语言,如zh-CN zh-hk en-US ja作用两个:为浏览器的翻译功能确定基础语言，为读屏软件确定基础发音<meta http-equiv="X-UA-Compatible" content="IE=edge">扩展HTTP响应头消息指定IE浏览器的兼容性-仅IE浏览器支持可以识别网景<==>微软 IEIE 6 内核6IE 7 内核6/7IE 8 内核6/7/8IE 9 内核6/7/8/9IE 10 内核6/7/8/9/10IE 11内核6/7/8/9/10/11html5shiv.js第三方编写的js文件，让老IE兼容html5新标签... header..respond.js第三方编写的js文件,让老IE兼容 CSS3 Media Query8.3:Bootstrap 全局样式—按钮.btn 按钮的基础样式 .btn-default 白底黑字的按钮 .btn-danger/warning/success/info/primary 五种颜色的按钮 .btn-lg/sm/xs 按钮四种大小 .btn-block 块级按钮8.4:Bootstrap 全局样式—图片.img-rounded 圆角图片.img-circle 圆形图片.img-thumbnail 缩略图.img-responsive 响应式图片8.5:Bootstrap 全局样式—文本.text-danger/success/warning/info/primary 文字颜色.bg-danger/success/warning/info/primary 背景颜色.text-left/center/right/justify 对齐方式.text-uppercase/lowercase/capitalize8.6:Bootstrap 全局样式—列表.list-unstyle 去除提示符号.list-inline 行内列表9:Bootstrap 全局样式-(屏幕分类)(1)大型PC屏幕 lg w>=1200px(2)中等PC屏幕 md 1200px>w>992px(3)小型PAD屏幕 sm 992px>w>768px(4)超小PHONE屏幕 xs 768px>x9.1:Bootstrap 全局样式-表格.table.table-bordered 带边框的表格.table-striped 隔行变色.table-hover 带悬停变色.table-responsive 响应式表[添加特殊要求]Bootlint 是Bootstrap官方提供HTML检测工具，检测出网页中常见的HTML/CSS错误，还能检测class层级结构错误!9.2：Bootstrap 全局样式-栅格(重点)网页布局可用方法:(1) TABLE布局好处：简单易控制不足: 语义错误,页面渲染效率低(2) DIV+CSS布局好处: 语义正确,页面渲染效率高不足: 不容易控制(3)Bootstrap 栅格 好处:相对简单易于控制，渲染效率高，支持响应式 不足:页面简单使用方法:(1) 最外层必须使用容器div.container和div.container-fluid(2) 容器里可以放置任何内容，若想使用栅格，必须div.row.container > .row [行](3) 一个.row中不能放置其他内容,只能放置 .col,列中可以放置其它内容.container > .row > .col(4) Bootstrap中行默认12均等分，每个列必须指定行中占比(5) 栅格系统针对不同屏幕提供不同列.col-lg-1/2/3.../12.col-md-1/2/3../12 .col-sm-1/2./3../12 .col-xs-1/2./...12 (6) 可以使用”列偏移”实现指定列及其后的列向右偏移的效果.如果不足12列居右对齐 .col-lg-offset-1/2...12 .col-md-offset-1/2...12 .col-sm-offset-1/2...12 .col-xs-offset-1/2...12 (7) 需要注意不同屏幕下列的适全性问题.col-xs-* 适用于xs/sm/md/lg 屏幕 .col-sm-* 适用于 sm/md/lg 屏幕 .col-md-* 适用于 md/lg 屏幕 .col-lg-* 适用于 lg 屏幕 (8) 一个列可以指定在不同屏幕下的宽度占比div.col-xs-12/.col-sm-9/.col-md-6 div.col-xs-12/col-md-6 常见错误: div.col-xs-6/.col-md-6 (9) 一个列可以指定特定的屏幕隐藏 .hidden-xs 仅在xs屏幕下隐藏 .hidden-sm 仅在sm屏幕下隐藏 .hidden-md 仅在md屏幕下隐藏 .hidden-lg 仅在lg 屏幕下隐藏 .hidden10:Bootstrap 栅格式系统10.1:Bootstrap 表单 (1)默认表单 <form> <div class=”form-group”> <label class=”control-label”>用户名</label> <input type=”text” class=”form-control”/> <span class=”help-block”>用户名格式:6~12位</span> </div> </form>(2)行内表单 <form> <div class=”form-inline”> <input type=”text” class=”form-control”/> <span class=”sr-only”>用户名格式:6~12位</span> </div> </form>(3)水平表单 水表表单=表单+栅格系统 默认栅格系统 水平表单最外层元素 div.container form.form-horizontal行 div.row div.form-group列 div.col-- div.col-- <form class=” form-horizontal”> <div class=”form-group”> <div class=”col-*-*”> <label class...</div> </div></form>10.2:Bootstrap 组件—(下拉菜单:字体图标:导航条-重点)下拉菜单三级结构 <div class=”dropdown”> <a href=”#” data-toggle=”dropdown”>触发元素</a> <div/ul class=”dropdown-menu”>隐藏元素</div/ul></div>10.3: Bootstrap 组件—(字体图标)web项目中常用图标字体 (1)FontAwesome – 675 个免费图标 (2)Glyphicons - 800 个收费图标 服务器字体使用 (1)web 服务器项目目录下必需有字体文件 (2)css中声明一个新的字体文件，并且指定下载位置 @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') } (3)声明一个基础class 使用字体 .glyphicon{ font-family: 'Glyphicons Halflings';} (4)在html页面中输入图标对应编码10.4: Bootstrap 组件—(进度条).progress > .progress-bar10.5: 面包屑 .bread-crum /徽章/巨幕/水井11:Bootstrap第四部分:jquery插件---折叠(手风琴) <a data-toggle=”collapse” href=”my-target1”>触发元素</a> <button data-toggle=”collapse” data-target=”my-target1”>触发元素</button> <div id=”my-target1” class=”collapse in”>展开收起元素</div>12:弹幕1:html <canvas id=”can1”/> 显示弹幕文字 <canvas id=”can2”/> 视频画在画布上 (1)视频按照图片绘制画布上 ctx2.drawImage(); (2)创建定时器[]/循环绘制视频 (3)视频元素动态创建追加 body最后子元素并且隐藏2:js 3:目录结构 index.html js/ video.js 完成:视频显示 data.js 完成:弹幕 公共函数库文件 res/1.mp4 视频文件13:Bootstrap js插件---(导航条).navbar-toggle 媒体查询:屏幕宽度大于768px 就隐藏.navbar-collapse 媒体查询:屏幕宽度大于768px 绝对定位在.navbar-header内;否则相对定位.navbar-header14:视频项目<video src=”” autoplay loop controls muted poster=””preload=””></video>video 弱 [不能对视频加密/视频丢失]video 弱 直播不行强 微信 小程序 公众号 [pc/pad/ios/android]14.1:同层播放 (苹果手机)当点击视频播放,IOS手机默认行为,自动将视频弹出在一个独立，窗口播放.(二个窗口)解决问题:同一层窗口播放视频在<video>标签中添加二个属性webkit-playsinline="true" (IOS)让频视在小窗口内播放，能不同跳出全屏播放playsinline="true" (IOS)微信浏览?支持小窗口内播放x5-video-player-type="h5" (Android)同层播放示例:<video webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" ></video>解决问题: 全屏设置如果不设置如下属性，横屏会错位x5-video-player-fullscreen="true" 全屏设置对过监听resize事件实现 (Android )x5-video-orientation="portraint">14.2:video 专用样式object-fit:选项 (1) fill默认 失真(2) contain 包含(留白)(3) conver 覆盖(调整视频比例)14.3:video 事件 (1)canplaythought 可以播放视频，视频全部加载完成 #iphone 点击播放 #android 可以加完成触发事件 (2)ended 播放结束15:less两种使用方法(1)在客户端使用—学习(效率差)编写一个x.less在HTML中引入x.less文件，同时再引入LESS编译程序:less.js客户端请求html,下载x.less以及less.js 在客户端运行js文件less编译为css会减慢客户端样式的呈现速度(2)在服务器端使用-Less(必需掌握)编写x.less在开发电脑安装less编译环境(Nodejs/lessc),执行x.less编译x.css再编写html文件，引入编译x.css客户端发出请求html/下载css15.1:LESS语法(1)Less支持所有CSS语法(2)Less支持多行/单行注释 /**/ 多行注释 // 单行注释—推荐使用(注释内容不会编译css文件)(3) Less 支持(变量) 定义:@变量名:值; 使用:color:@变量名; 变量可以取值为任何合法样式值(4)Less 支持变量和常量算术运算/ %(5)less支持一个选择器中”混入”另一个选择器的样式 选择器1{...} 选择器2{.. 选择器1}(6)less在样式混入时可以指定参数 选择器1(@参数1,@参数2..){} 选择器2{选择器1(值1,值2...)}(7)less支持样式嵌套(*) 选择器1{选择器2{}} 上述代码会被编译为: 选择器1{} 选择器 2{}15.2:通过修改Bootstrap的less源文件实现定制达到三个目标 (1)瘦身:删除不需要样式 (2)粗粒度定制 只需要修改variables.less中定的变量值即可(3)细粒度定制 针对某个组件细节修改 修改组件对应less文件. dropdown.less15.3:如何实现定制(1)下载并且安装nodejs – (js解析器) 在命令行 node –v 可以看到版本信息(2)下载less编译程序 e:\node_modules\less\bin\lessc 示例: e:\node_modules\less\bin\lessc x.less x.css15.4: 定制Bootstrap(1) 查找software/bootstrap/less (2) e:node_moduleslessbinlessc less/bootstrap.less bootstrap.css
