摘要：
一、技术选型 二、需求分析 1.页面布局分析 2. 屏幕划分 三、页面制作 1. 项目前期准备 搭建项目结构 创建 html 骨架结构以及引入相关样式 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device- 阅读全文
摘要：
一、Bootstrap简介 Bootstrap 是目前受欢迎的前端框架之一，是基于HTML，CSS，JavaScript的，它简洁灵活，使web开发更加快捷 中文官网：http://www.bootcss.com/ 官网：http://getbootstrap.com/ 推荐：https://v3. 阅读全文
摘要：
一、flex布局体验 1.1 传统布局 flex 布局 1. 2 初体验 1. 搭建 HTML 结构 <div> <span>1</span> <span>2</span> <span>3</span> </div> 2. 添加样式 <style> div { width: 80%; height: 阅读全文
摘要：
1. 技术选型 2. 搭建相关文件夹结构 3. 引入视口标签以及初始化样式 4. 常用初始化样式 5. 首页布局分析以及搜索模块布局 index.css /*搜索模块*/ .search-index{ /*固定定位跟父级没有关系，它以屏幕为准*/ position: fixed; top: 0; l 阅读全文
摘要：
一、rem 基础 1. rem 单位 **em 😗* 相对于父元素的字体大小来说的 <div> <p></p> </div> div { font-size: 12px; } p { width: 10em; height: 10em; background-color: pink; } rem: 阅读全文
摘要：
一、技术选型 二、搭建相关文件夹 三、设置视口标签以及引入初始化样式文件和js文件 四、body 样式 五、rem 适配方案二 body样式修改 index.css body { min-width: 320px; max-width: 750px; /* flexible 给我们划分了 10 等份 阅读全文
摘要：
一、技术选型 二、搭建相关文件夹结构 三、设置视口标签以及引入初始化样式 四、设置公共common.less 文件 common.less //设置常见的屏幕尺寸大小，修改里面的html 文字大小 //因为在 pc 端也可以打开苏宁的移动端网页 //我们默认字体大小为 50 px html { fo 阅读全文
摘要：
一、响应式简介 一个页面布局兼容了 PC端 ，iPad端 和 移动端 所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型 特点： 响应式布局是不需要单独写移动端页面的 响应不同的设备来发生变化的 二、 响应式开发原理 三、响应式布局容器 栗子： <style> .co 阅读全文