不一样的花朵的博客

移动端WEB开发之响应式布局1.0 响应式开发原理1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备的划分情况：小于768的为超小屏幕（手机）768~992之间的为小屏设备（平板）992~1200的中等屏幕（桌面显示器）大于1200的宽屏设备（大桌面显示器）1.2 响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和

移动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:

移动web开发——flex布局1.0传统布局和flex布局对比1.1传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局1.2 flex布局操作方便，布局极其简单，移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3 建议如果是pc端页面布局，还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex2.0 flex布局原理flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活

移动web开发流式布局1.0 移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。总结：兼容移动端主流浏览器，处理Web

一、 认识 3D 转换3D 的特点近大远小物体和面遮挡不可见三维坐标系x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值二、3D 转换3D 转换知识要点3D 位移：translate3d(x, y, z)3D 旋转：rotate3d(x, y, z)透视：perspctive3D呈现 transfrom-style

一、rotate2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤：给元素添加转换属性 transform属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度div{ transform: rotate(0deg);}二、三角代码演示二、设置元素旋转中心点(transform-origin)transform-origin 基础语法transform-origin: x y;重要知

一、什么是 HTML5HTML5 的概念与定义定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML两个概念：是一个新版本的 HTML 语言，定义了新的标签、特性和属性拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5HTML5 拓展了哪些内容语义化标签本地存储兼容特性2D、3D动画、过渡CSS3 特性性能与集成HTML5 的现状绝对

1. 品优购项目(四)1). 详情页 detail.html 常用单词名称说明主体de_container面包屑导航crumb_wrap产品介绍product_intro （ introduction介绍）预览包preview_wrap（左侧部分）预览缩略图preview_img预览列表preview_list左按钮arrow_prev右按钮arrow_next小图列表preview_items产品详细信息

品优购项目(三)1. 首页制作1). 楼层区 floor注意这个floor 一个大盒子 包含， 不要给高度，内容有多少，算多少2). 家用电器模块这个模块 jiadian 不需要写样式版心居中对齐 因为这些模块 基本相同，下面的 模块基本用这些样式 所以 咱们下面两个盒子的命名是：1号盒子 box-hd 给一个高度， 有个下边框 里面分为左右2个盒子2号盒子 box-bd 不要给高度。3). box-hd 模块有高度左边 h3 盒子

品优购项目(二)目标：能课堂跟上pink老师的节奏完成品优购项目1. 品优购首页布局命名集合：名称说明快捷导航栏shortcut头部header标志logo购物车shopcar搜索search热点词hotwrods导航nav导航左侧dropdown 包含 .dd .dt导航右侧navitems页面底部footer页面底部服务模块mod_service页面底部帮助模块mod_hel

品优购项目(一)目标：能会引入ico图标能简单看懂网站优化的三大标签能使用字体图标 ( 重点 )能说出我们css属性书写顺序能课堂跟上pink老师的节奏完成品优购项目1. 品优购项目介绍项目名称：品优购项目描述：品优购是一个电商网站，我们要完成首页、列表页、详情页、注册页面的制作2. 项目背景现阶段电商类网站很流行，很多同学毕业之后会进入电商类企业工作，同时电商类网站需要的技术也是较为复杂的，复习、总结、提高前面所学布局技术。3. 设计目标保证浏览器 ie7及以上,

代码规范1. 概述欢迎使用品优购代码规范， 这个是我借鉴京东前端代码规范，组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范，以下规范是团队基本约定的内容，必须严格遵循。HTML规范基于 W3C、苹果开发者 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。图片规范了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。CSS规范统一规范团队 CSS 代

第01阶段.前端基础.列表和表单1. 列表标签（重点）学习目标理解无序列表的应用场景自定义列表的应用场景应用无序列表语法自定义列表语法问？前面我们知道表格一般用于数据展示的，但是网页中还是有很多跟表格类似的布局，如下图~~ 我们用什么做呢？答：答案是列表， 那什么是列表？ 表格是用来显示数据的，那么列表就是用来布局的。 因为非常整齐和自由概念：容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表特点：列表最大的特点就是 整齐 、整洁、.

HTML 第二天目标能够利用表格、列表和表单完成注册页面的综合案例能出说表格用来做什么的能说出列表用来做什么的能说出表单用来做什么的为了让我们页面显示的更加整齐，我们需要学习三个表（表格、表单、列表）表格 table(会使用)目标：理解：能说出表格用来做什么的表格的基本结构组成应用：能够熟练写出n行n列的表格能简单的合并单元格​表格作用：存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显

学习目标:了解常用浏览器掌握WEB标准理解标签语义化掌握常用的排版标签掌握常用的文本格式化图像链接等标签掌握三种列表标签掌握表格标签掌握表格标签掌握表单标签掌握H5新增表单和表单属性typora-copy-images-to: media认识网页网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。思考： 网页是如何形成的呢?常见浏览器介绍浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷.