随笔分类 - 前端开发
摘要:6.移动端常见布局 移动端技术选型 移动端布局和以前我们学习的PC端有所区别: 单独制作移动端页面(主流) 流式布局(百分比布局) flex弹性布局(强烈推荐) less+rem+媒体查询布局 混合布局 响应式页面兼容移动端(其次) 媒体查询 bootstarp
阅读全文
摘要:5.移动端技术解决方案 5.1移动端浏览器 移动端浏览器基本以webkit内核为主,因此我们就考虑webkit兼容性问题。 我们可以放心使用H5标签和CSS3样式。 同时我们浏览器的私有前缀我们只需要考虑添加webkit即可 5.2 CSS初始化normalize.css 移动端CSS初始化推荐使用
阅读全文
摘要:4. 移动端开发选择 4.1 移动端主流方案 1.单独制作移动端页面(主流) 京东商城手机版 淘宝触屏版 苏宁易购手机版 … 2.响应式页面兼容移动端(其次) 三星手机官网 4.2 单独移动端页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动端。通过判断设备,如果是移动设备打开,
阅读全文
摘要:3. 二倍图 3.1 物理像素&物理像素比 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750*1334 我们开发时候的1px不是一定等于1个物理像素的 PC端页面,1个px等于1个物理像素的,但是移动端就不尽相同 一个px的能显示的物理像素
阅读全文
摘要:2. 视口 视口( viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口 2.1布局视口layout viewport 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。 iOS,Android基本都将这个视口分辨率设置
阅读全文
摘要:1. 移动端基础 1.1 浏览器现状 PC端常见浏览器 360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器 UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。 国内的
阅读全文
摘要:3. 浏览器私有前缀 浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无须添加。 1.私有前缀 -moz-∶代表firefox浏览器私有属性 -ms-:代表ie浏览器私有属性 -webkit-:代表safari、chrome私有属性 -o-︰代表Opera私有属性 2.提倡的写法 -moz-
阅读全文
摘要:1.4 HTML5新增的表单属性 属性值说明 required required 表单拥有该属性表示其内容不能为空,必填 placeholder 提示文本 表单的提示信息,存在默认值将不显示(修改文字颜色input::placeholder{color:#fff}) autofocus autofo
阅读全文
摘要:1.3 HTML5新增的input类型 属性值说明 type="email" 限制用户输入必须为Email类型 <br/> type="url" 限制用户输入必须为URL类型 type="date" 限制用户输入必须为日期类型 type="time" 限制用户输入必须为时间类型 type="mont
阅读全文
摘要:1.2 HTML5新增的多媒体标签 新增的多媒体标签主要包含两个∶ 音频: <audio> 视频: <video> 使用它们可以很方便的在页面中嵌入音频和视频,而不再去使用flash和其他浏览器插件。 1.2.1 视频 <video> HTML5在不使用插件的情况下,也可以原生的支持视频格式文件的播
阅读全文
摘要:1.1 HTML5新增的语义化标签 语义化是指用HTML写出符合内容的结构化(内容语义化),选择合适的标签(代码语义化),能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 以前布局,我们基本用div来做。div对于搜索引擎来说,是没有语义的。 <div class="hea
阅读全文
摘要:HTML5的新特性 HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。 声明︰ 1.新特性增加了很多,但是我们专注于开发常用的新特性。 ⒉基础班我们
阅读全文
摘要:「1. 什么是HTML5」 定义:HTML5定义了HTML标准的最新版本,是对HTML的第五次重大修改,号称下一代的HTML。 两个概念: 是一个新版本的HTML语言,定义了新的标签、特性和属性 拥有一个强大的技术集,这些技术集是指:HTML5、CSS3、JavaScript,这也是广义上的HTML
阅读全文
摘要:2.10 3D转换 2.10.1 三维坐标系 三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。 x轴:水平向右―注意∶×右边是正值,左边是负值 y轴:垂直向下注意:y下面是正值,上面是负值 z轴:垂直屏幕注意:往外面是正值,往里面是负值 3D 转换知识要点 3D 位移:translate
阅读全文
摘要:2.9 动画(animation) 「动画」是CSS3中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果。 相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。 2.9.1「动画的使用」 先定义动画 再调用定义好的动画 /*1. 定义动画*/@
阅读全文
摘要:2.8 2D 转换 转换(transform )是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果 转换( transform )你可以简单理解为变形 2D转换:是改变标签在二维平面上的位置和形状 移动:translate 旋转:rotate 缩放:scale 2.8.1 二维坐
阅读全文
摘要:2.7 CSS3过渡(重点) 过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用Flash 动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画︰是从一个状态渐渐的过渡到另外一个状态 可以让我们页面更好看,更动感十足,虽然低版本
阅读全文
摘要:2.6 CSS3其他特性(了解) 2.6.1 CSS3滤镜filter: filter CSS属性将模糊或颜色偏移等图形效果应用于元素。 filter:函数(); /*例如: filter: blur(5px); blur模糊处理数值越大越模糊*/ 2.6.2 CSS3 calc函数: calc()
阅读全文
摘要:2.5 CSS3盒子模型 CSS3中可以通过box-sizing来指定盒模型,有2个值:即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。 可以分成两种情况︰ box-sizing:content-box盒子大小为width + padding + bo
阅读全文
摘要:2.4 伪元素选择器(重点) 伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。 选择符简介 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 注意︰ before和after创建一个元素,但是属于行内元素 新创建的这个
阅读全文

浙公网安备 33010602011771号