满天鑫

移动端WEB开发之响应式布局响应式开发原理响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备的划分情况： 小于768的为超小屏幕（手机） 768~992之间的为小屏设备（平板） 992~1200的中等屏幕（桌面显示器） 大于1200的宽屏设备（大桌面显示器） 响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。 父容器版心的尺寸划分 超小屏幕（手机，小于 768px）：设置宽度为 100% 小屏幕（平板，大于等于 768px）：设置宽度为 750px 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px 但是我们也可以根据实际情况自己定义划分 bootstrap的介绍Bootstrap简介Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Boot ...

移动web开发之rem布局rem基础rem单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */html { font-size: 12px;}/* 此时 div 的字体大小就是 24px */ div { font-size: 2rem;} rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。 媒体查询什么是媒体查询媒体查询（Media Query）是CSS3新语法。 使用 @media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询 ...

移动web开发——flex布局传统布局和flex布局对比传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 flex布局 操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 建议 如果是pc端页面布局，还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex flex布局原理 flex 是 flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。 总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 父项常见属性 flex-dire ...

一、Promise的理解与使用1、概念: ​ Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 通俗讲，Promise是一个许诺、承诺,是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。 Pending 正在做。。。 Resolved 完成这个承诺 Rejected 这个承诺没有完成，失败了 ​ Promise 用来预定一个不一定能完成的任务，要么成功，要么失败 ​ 在具体的程序中具体的体现，通常用来封装一个异步任务，提供承诺结果 Promise 是异步编程的一种解决方案，主要用来解决回调地狱的问题，可以有效的减少回调嵌套。真正解决需要配合async/await 2、特点: ​ (1)对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当 ...

SassScript在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。 弱类型语言, 对语法要求没那么严格 一、注释 Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会被完整输出到编译后的 CSS 文件中，而后者则不会。 将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。 插值语句 (interpolation) 也可写进多行注释中输出变量值 例如： // compile scss files to css// it's ready to do it.$pink: #f3e1e1;html{ background-color: $pink;}$author: 'gdream@126.com';/*! Author: #{$author}.*/ 开发模式编译后: /* hello world!*/ht ...

一、TypeScript安装TypeScript 的命令行工具安装方法如下： npm install -g typescript//使用ts的nodenpm i -g ts-node 以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了。 编译一个 TypeScript 文件很简单： tsc hello.ts 我们约定使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀。 二、Hello TypeScript我们从一个简单的例子开始。 将以下代码复制到 hello.ts 中： function sayHello(person: string) { return 'Hello, ' + person;}let user = 'Tom';console.log(sayHello(user)); 然后执行 tsc hello.ts 这时候会生成一个编译好的文件 hello.js： function sa ...

一、ECMAScript引出1、什么是 ECMA和ECMAScriptECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制 造商协会, 这个组织的目标是评估、开发和认可电信和计算机标准. 1994 年后该 组织改名为 Ecma 国际. ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言. 2、ECMA-262Ecma 国际制定了许多标准, 而 ECMA-262 只是其中的一个, 所有标准列表查看 –点我传送 Ⅰ-ECMA-262 历史ECMA-262（ECMAScript）历史版本查看网址: –>点我传送 版数 年份 内容 第 1 版 1997 年 制定了语言的基本语法 第 2 版 1998 年 较小改动 第 3 版 1999 年 引入正则、异常处理、格式化输出等. IE 开始支持 第 4 版 2007 年 过于激进, 未发布 第 5 版 2009 年 引入严格模式、JSON , 扩展对象、数组、原型、字符串、日期方法 第 6 版 201 ...

移动web开发流式布局移动端基础浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。 总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。 手机屏幕的现状 移动端设备屏幕尺寸非常多，碎片化严重。 Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。 近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。 常见移动端屏幕尺寸 移动端调试方法 Chrome DevTool ...

目标 能够写出列表页 能够写出注册页 能够把品优购网站部署到本地服务器 能够把品优购网站上传到远程服务器 品优购项目首页制作main 主体模块制作以前书写的就是模块化中的公共部分。 main 主体模块是 index 里面专有的，注意需要新的样式文件 index.css main 盒子宽度为 980 像素，高度是455像素，位置距离左边 220px (margin-left ) ，给高度就不用清除浮动 main 里面包含左侧盒子，宽度为 721像素，左浮动，focus 焦点图模块 main 里面包含右侧盒子，宽度为 250像素，右浮动，newsflash 新闻快报模块 结构代码 <div class="w"> <div class="main"> <div class="focus"> ... </div> <div class="newsflash"> ...

品优购项目-上目标 能够遵循品优购代码规范 能够在品优购首页中引入 favicon 图标 能够说出三大标签 SEO 优化 能够在品优购首页中使用字体图标 能够说出 LOGO 需要哪些 SEO 优化 品优购项目规划网站制作流程 原型图： 页面的布局，告知我们开发人员，整个页面的结构是怎样的，说白了就是什么地方放什么内容 效果图：告知我们开发人员，最终做出来的成品应该是什么样子，相比原型图，效果图里面包含内容，风格，字体大小等等 品优购项目介绍 项目名称：品优购 项目描述：品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作 主页 列表页 注册页 品优购项目的学习目的 电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术 品优购项目能复习、总结、提高基础班所学布局技术 写完品优购项目，能对实际开发中制作 PC 端页面流程有一个整体的感知 为后期学习移动端项目做铺垫 开发工具以及技术栈开发工具VScode 、Photoshop（fw）、主流浏览器（以Chrome浏览器为主） 技术栈 利用 HTML5 + CSS3 手动布局，可以大量 ...

学习目标: 理解BFC 了解渐进增强和优雅降级 BFC(块级格式化上下文)BFC(Block formatting context) 直译为”块级格式化上下文”。 元素的显示模式我们前面讲过 元素的显示模式 display。 分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。 那些元素会具有BFC的条件不是所有的元素模式都能产生BFC，w3c 规范： display 属性为 block, list-item, table 的元素，会产生BFC. 大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。 注意其他的，display属性，比如 line 等等，他们创建的是 IFC ，我们暂且不研究。 这个BFC 有着具体的布局特性： 有宽度和高度 ， 有 外边距margin 有内边距padding 有边框 border。 就好比，你有了练习武术的体格了。 有潜力，有资质。 什么情况下可以让元素产生BFC以上盒子具有BFC条件了，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？ 在好比，你光有资 ...

课程目标: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 熟练掌握CSS定位 熟练掌握CSS高级技巧强化CSS CSS的发展历程从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。 CSS 网页的美容师CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。 让我们的网页更加丰富多彩。 CSS的最大贡献就是： 让 HTML 从样式中解脱苦海， 实现了 HTML 专注去做 结构呈现。 而样式交给 CSS 后，你完全可以放心的早点洗洗睡了！ 而且。。。。。 CSS 做的很出色，如果JavaScript是网页的魔法师，那么CSS ...