移动端内容
小涛涛啊!
这个作者很懒,什么都没留下…
展开
-
移动端 第十六章 flexbjs+rem
第十六章 flexbjs+rem1:rem+@media+less是我们移动端布局的第一种方案。2:flexible.js+rem是我们移动端布局的第二种方案。3:flexible.js库简介:–flexible.js库是淘宝研发的一种解决移动端页面适配不同手机尺寸的方法。–flexible.js库的优点就是可以节省我们的@media标签和less文件。–但是flexible.js库把当前页面划分了10等份,所以在计算页面基准值的时候–在750px的设计稿下面的html{font-size原创 2020-09-28 08:56:55 · 167 阅读 · 0 评论 -
移动端 第十五章less+rem+media项目
第十五章less+rem+media项目1:移动端页面设计稿尺寸:--安卓手机尺寸:320px 360px 375px 384px 400px 414px 500px 720px--苹果手机尺寸:640px 750px2:通过less+rem+@media 技术完成页面在各个手机尺寸上的显示3:手机页面的准备工作:--UI设计师会先给移动端页面设计一个尺寸 如:苏宁的尺寸是 750px--前端开发人员再人为的把设计稿分为若干份 如:苏宁分为 15等份 --(划分页面的份数的目的,只是为了求原创 2020-09-28 08:46:32 · 170 阅读 · 0 评论 -
移动端 第十四章 less功能
第十四章 less 功能1:less 变量--css中的颜色和字号使用less 变量来存储--less 变量的命名 @color:red;--变量命名的规则: 1):必须@符号开头 2):名字不能是数字 3):名字不能包含特殊字符 @a#! @~col 4) :区分大小写--@color:red; @n:100px; @font:font-szie:100px; 2:less 嵌套–css写法: #header { color: black; } #heade原创 2020-09-28 08:42:35 · 154 阅读 · 0 评论 -
移动端 第十三章 rem适配布局
第十三章 rem适配布局前期讲了2种布局方案,但是只能解决项目中宽可以根据设备尺寸的不同有变化,但是项目中的高固定死,没有办法改变。为了解决项目中元素的宽高根据设备尺寸的不同,宽高都有变化的目的,那么我们就来认识一下,rem布局。1:单位介绍px、em、rem区别介绍2: px像素(Pixel)是绝对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX特点1. IE无法调整那些使用px作为单位的字体大小;2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;3:原创 2020-09-28 08:22:35 · 184 阅读 · 0 评论 -
移动端第十二章 媒体查询
第十二章 媒体查询1:什么是媒体查询:媒体查询是css3新的语法:@media only screen and (min-width: ) { 属性:属性值; }@media only screen and (min-width: 100px) and (max-width: 640px) { 属性:属性值; }screen 用于电脑屏幕,平板电脑,智能手机等。only 唯一(忽略)and 并且(不常用)min-width 屏幕最小宽度值max-width 屏幕最原创 2020-09-28 08:06:32 · 324 阅读 · 0 评论 -
移动端 第十一章 弹性盒子
第十一章 弹性盒子1:什么是弹性盒子布局?2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。ie10以上浏览器支持Flex是Flexible Box的缩写,意为‘弹性布局’,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。举例:.box{ display: flex;}**注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。**原创 2020-09-27 20:12:50 · 228 阅读 · 0 评论 -
移动端 第十章 动画
第十章动画动画属性animationanimation-name:动画的名字animation-duration:动画完成一个周期所花费的时间(秒/毫秒)animation-timing-function:动画的速度曲线(linear ease ease-in ease-out ease-in-out 贝塞尔曲线)animation-delay:动画何时开始animation-iteration-count:动画被播放的次数 number/infinite(无限循环) animation-原创 2020-09-27 20:01:52 · 79 阅读 · 0 评论 -
移动端 第九章 过渡
第九章 过渡transition:过渡过渡时间transition-duration: 3s;过渡属性(定义宽还是高)transition-property: all;过渡函数(运动的方式)transition-timing-function: ease;过渡延迟时间transition-delay: 4s;<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <tit原创 2020-09-27 19:56:40 · 89 阅读 · 0 评论 -
移动端 第八章变形
第八章 变形 transform:变换/变形 translate:移动 translate(X px,Y px);移动<style type="text/css"> div{ width: 200px; height: 200px; background: red; margin: 100px auto; /*过渡属性*/ transition: 1s; } div:hover{原创 2020-09-27 19:47:35 · 186 阅读 · 0 评论 -
移动端第六章 背景渐变
第六章 背景渐变1:背景渐变: 分为2种:线性渐变 linear径向渐变 radialbackground:-webkit-linear-gradient(top,yellow,blue);background:-webkit-linear-gradient(left,yellow,blue,green,pink);background:-webkit-linear-gradient(top right,yellow,blue,green,pink);background:-web原创 2020-09-27 19:43:31 · 205 阅读 · 0 评论 -
移动端第五章字体
第五章字体1:文字阴影text-shadow:x y blur color, …参数x 横向偏移y 纵向偏移blur 模糊距离color 阴影颜色文本阴影如果加很多层,会很卡很卡很卡例子:层叠:color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;光晕:color:white; font-size:100px; text-shadow:0 0 10原创 2020-09-27 19:38:25 · 116 阅读 · 0 评论 -
移动端第四章 选择器
第四章 选择器1:新增选择器: 选择器: 例子 描述 element>element div>p 选择 <div>的 子元素<p> 。 element+element div+p 选择在 <div> 元素之后的相邻的 <p> 元素。 element~element div~p 选择在 <div> 元素之后的所有 <p> 元素。 属性伪类: [attribu原创 2020-09-27 10:21:24 · 123 阅读 · 0 评论 -
移动端第三章新增表单控件
第三章新增表单控件1:表单中新增的控件(type属性)email: 提交表单时检测值是否是一个电子邮件格式url: 提交表单时检测值是否是一个url格式date: 年-月-日格式的控件time: 时:分格式的控件datetime: 年-月-日 时:分 格式的控件(UTC时间)datetime-local: 年-月-日 时:分 格式的控件(本地时间)month: 年-月格式的控件week: 年-周数格式的控件number: 数字输入框 <input type="number" n原创 2020-09-27 10:12:12 · 163 阅读 · 0 评论 -
移动端第二章html5新增标签
第二章html5新增标签1:新增结构标签:(我们以前布局页面经常用到的是div或者span等,但是这些没有语义化)标签名 标签 案例页面头部标签 header页脚底部标签 footer导航 nav <nav> <a href=''>首页</a> <a href=''>首页</a>原创 2020-09-27 09:38:42 · 197 阅读 · 0 评论 -
移动端 第一章课程概要
第一章课程概要1:html5是什么?HTML5 技术结合了 HTML4.01 的相关标准并革新,符合现代网络发展要求,在 2008 年正式发布。HTML5 由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。与传统的技术相比,HTML5 的语法特征更加明显,并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容,而且 HTML5中还结合了其他元素,对原有的功能进行调整和修改,进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。*原创 2020-09-27 09:30:52 · 227 阅读 · 0 评论