移动端开发预备篇

作者:日期:2017-11-24 13:59:59 点击:8

 

移动端开发预备篇

 

一.H5新特性

 

1.H5新标签

header、footer、nav、section、main、article、aside、figure、figcaption、hgroup、progress、time、mark(高亮选中)、datalist、details、summary…-->

 
  1. <header>头部</header>
  2. <nav>导航</nav>
  3. <footer>底部</footer>
  4. <section>区域<section/>
  5. <main>主体部分<main/>
  6. <article>文章<article/>
  7. <aside>侧边栏,广告位<aside/>
  8. <figure>
  9. <img src='img/1.jpg'/>
  10. <figcaption>配图说明<figcaption/>
  11. <figure/>
  12. <hgroup>一组标题<hgroup/>
  13. <progress max="100" value="50"><progress/>滚动条
  14. <time>时间<time/>
  15. <mark>高亮选中<mark/>
  16. <input list="dataList"/>
  17. <datalist id="dataList">
  18. <option value='珠峰js'>珠峰js<option/>
  19. <option value='珠峰vue'>珠峰vue<option/>
  20. <option value='珠峰node'>珠峰node<option/>
  21. <datalist/>
  22. <details>
  23. <summary>珠峰前端课程<summary/>
  24. <ul>
  25. <li>HTML+CSS<li/>
  26. <li>JS<li/>
  27. <li>VUE+React+NODE<li/>
  28. <ul/>
  29. <details/>
  30. <></>
 

2.表单元素的新属性

 
  1. 1.autocomplete: 自动完成填充,会记录之前输入的内容,给你自动提示
  2. 2.autofocus 打开页面自动获取鼠标的焦点
  3. 3.form='form的id':一个form之外的表单元素也让其属于这个form
  4. 4.width height :只存在域input typeimage的表单元素
  5. 5.multiple:可以选择多个文件
  6. <input type="file" multiple>
  7. 6.required:必填的
  8. 7.input的新type
  9. 文字:
  10. <input type="text"> <br>
  11. 网址:
  12. <input type="url"> <br>
  13. 邮箱:
  14. <input type="email"> <br>
  15. 密码:
  16. <input type="password"> <br>
  17. 数字:
  18. <input type="number" max="10" min="0" step="3"/><br>
  19. 色卡:
  20. <input type="color"> <br>
  21. 电话:
  22. <input type="tel"> <br>
  23. 日期:
  24. <input type="date"><br>
  25. 日期:
  26. <input type="time"><br>
  27. 日期:
  28. <input type="datetime-local"><br>
  29. 日期:
  30. <input type="month"><br>
  31. 日期:
  32. <input type="week"><br>
  33. 范围:
  34. <input type="range"><br>
  35. 重置:
  36. <input type="reset"><br>
  37. 提交:
  38. <input type="submit">
  39. pattern="":正则进行校验
  40. novalidate:不做校验
 

3.音频视频的处理

音频视频的常用属性和方法

 
  1. <video src="movie.ogg" controls="controls">
  2. 如果浏览器不支持 video 标签。就会显示这里面的内容
  3. </video>
  4. *下是属性和方法*
  5. play() 播放视频音频
  6. pause() 暂停播放
  7. autoplay 设置或返回是否在加载完成后随即播放音频/视频
  8. controller 返回表示音频/视频当前媒体控制器的 MediaController 对象
  9. controls 设置或返回音频/视频是否显示控件(比如播放/暂停等)
  10. currentSrc 返回当前音频/视频的 URL
  11. currentTime 设置或返回音频/视频中的当前播放位置(以秒计)
  12. defaultMuted设置或返回音频/视频默认是否静音
  13. defaultPlaybackRate 设置或返回音频/视频的默认播放速度
  14. duration 返回当前音频/视频的长度(以秒计)
  15. ended 返回音频/视频的播放是否已结束
  16. loop 设置或返回音频/视频是否应在结束时重新播放
  17. muted 设置或返回音频/视频是否静音
  18. paused 设置或返回音频/视频是否静音是否暂停
  19. playbackRate设置或返回音频/视频播放的速度
  20. played 返回表示音频/视频已播放部分的 TimeRanges 对象
  21. preload 设置或返回音频/视频是否应该在页面加载后进行加载
  22. readyState 返回音频/视频当前的就绪状态
  23. seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象
  24. seeking 返回用户是否正在音频/视频中进行查找
  25. src 设置或返回音频/视频元素的当前来源
  26. startDate 返回表示当前时间偏移的 Date 对象
  27. volume 设置或返回音频/视频的音量
 

4.H5本地存储

  • localStorage

    localStorage,只要使用浏览器打开,存在里面的内容会被永久存储,关闭页面再打开任然存在,在其他的网页也可以获取 
    localStorage.zf="珠峰培训"; 
    alert(localStorage.zf); 
    localStorage.setItem("QQ","1144709265"); 
    localStorage.removeItem("QQ"); 
    //实现一个查看当前浏览次数的方法 
    if(!localStorage.getItem("n")){ 
    localStorage.setItem("n",1) 
    }else {localStorage.setItem("n",parseInt(localStorage.getItem("n"))+1) 

    alert("这是第"+localStorage.getItem("n")+"次")

  • sessionStorage

      //sessionStorage:存储在浏览器上,只要浏览器不关闭,就会有,关闭浏览器就是消失,但是在其他的页面中获取不到 

    if(!sessionStorage.getItem("code")){ 
    sessionStorage.setItem("code",1) 
    }else { 
    sessionStorage.setItem("code",parseInt(sessionStorage.getItem("code"))+1) 
    }

 

5.案例

H5表单验证

 

二.CSS3

 

1.CSS3选择器

Alt text

 

2.border边框类

 
box-shadow
 
  1. box-shadow(x y a b c i)
  2. x:水平方向的偏移 正:右边 ,负:左边
  3. y:垂直反方的偏移 正:下, 负:上
  4. a:模糊半径
  5. b:延伸半径
  6. c:颜色
  7. i:inset 设置内阴影
  8. box-shadow: 1px 1px 1px rgba(0,0,0,.5),2px 2px 1px rgba(0,0,0,.3),3px 3px 1px rgba(0,0,0,.2),4px 4px 1px rgba(0,0,0,.1),5px 5px 1px rgba(0,0,0,.2),6px 6px 1px rgba(0,0,0,.3),7px 7px 5px rgba(0,0,0,.4) ;

效果 
Alt text

 
border-radius
 
  1. width: 200px;
  2. height: 200px;
  3. border:5px solid #000;
  4. border-top-right-radius: 100px 50px ;右上角

Alt text

 
border-image
 
  1. border: 27px solid orange;
  2. border-image: url() 展示方式 剪切方式;
  3. 展示方式 1.stretch 拉伸 默认值
  4. 2.round 平铺
  5. 3.repeat 复制
  6. 剪切方式: 1 2 3 4

对应下面的剪切方式 
Alt text
案例

 
  1. width: 100px;
  2. height: 100px;
  3. border: 27px solid orange;
  4. border-image: url(../img/border.png)stretch repeat 27;
  5. 只写一个代表四个值都一样

Alt text

 

3.background背景类

 
background-origin


不会改变图片大小,顾上不顾下,顾左不顾右,只要不超出border就可以 

 
  1. background-origin: border-box;
  2. /*从border的外边界算起,也就是包括border*/
  3. background-origin: padding-box;
  4. /*包括padding,不包括border*/
  5. background-origin:content-box
  6. /*只有内容部分不包括padding*/
 
background-clip


跟background-origin的区别:超出的部分会剪裁掉 

 
  1. background-clip: border-box;
  2. background-clip: padding-box;
  3. background-clip: content-box;
 
background-size
 
  1. background-size: auto;
  2. background-size: 100% 100%;
  3. background-size: cover;
  4. /*cover:放大图片以适应铺满整个容器,但是宽高比例不变,让图片失真*/
  5. ackground-size: contain;
  6. /*contain 将图片缩小,能在盒子中展示,原来宽高比例不变,也是会让图片失真*/
 
多张背景图片

/*既然背景图片可是复制,也就是说背景图片可以放多张*/ 
案例制作相框

 
  1. .box{
  2. width: 240px;
  3. font-size: 25px;
  4. line-height: 50px;
  5. text-align: center;
  6. border:20px solid rgba(104,104,142,0.5) ;
  7. padding: 60px 40px;
  8. border-radius: 10px;
  9. color: #f36;
  10. margin: 40px auto;
  11. background: url(../img/bg-tl.png)no-repeat top left,
  12. url(../img/bg-tr.png)no-repeat top right,
  13. url(../img/bg-br.png)no-repeat bottom right,
  14. url(../img/bg-bl.png)no-repeat bottom left,
  15. url(../img/bg-repeat.png) repeat left top;
  16. background-origin: border-box, border-box ,padding-box ,padding-box ,padding-box;
  17. }

Alt text

 

4.渐变类

 
线性渐变
 
  1. 下面的四中写法是一样的
  2. background: linear-gradient(red,yellow,green,blue);
  3. background: linear-gradient(top red,yellow,green,blue);
  4. background: linear-gradient(to bottom red,yellow,green,blue);
  5. background: linear-gradient(270deg red,yellow,green,blue);


可以在每个颜色后面加百分比 
background: linear-gradient(red 50%,green 50%); 
效果如下 

Alt text

 
径向渐变
 
  1. background: radial-gradient(#fff,yellow,orange,red,plum);
  2. 注意:* 00 盒子的左上角
  3. /*圆心的位置:50px 200px*/
  4. background: radial-gradient(50px 200px,#fff,yellow,orange,red,plum);
  5. /*circle强制圆形渐变*/
  6. background: radial-gradient(circle,#fff,yellow,orange,red,plum);
  7. /*长方形 :默认值ellipse椭圆形渐变*/
  8. background: radial-gradient(ellipse,#fff,yellow,orange,red,plum);
  9. /*渐变的圆心位置是0,200,半径是200*200的圆*/
  10. background: radial-gradient(200px 200px at 0px 200px,#fff,yellow,orange,red,plum);
  11. 还有例如:200px 200px at top
  12. 200px 200px at 0 50%
  13. circle at 0 50%
  14. 扩展知识:自己查
  15. 1.losest-side / farthest-side
  16. 2.closest-corner / farthest-curner
  17. 3.background: -repeating-radial-gradient(#ddd,#ddd 5px,yellow 10px,orange 15px);
  18. 3的效果如下

Alt text

 

5.文本类

 
制作字体图标

自己查看我们的课件关于如何制作字体图标

 
text-shadow
 
  1. text-shadow:x,y,a,b,c
  2. x:水平方向的偏移 正:右边 ,负:左边
  3. y:垂直反方的偏移 正:下, 负:上
  4. a:模糊半径
  5. b:延伸半径
  6. c:颜色
  7. text-shadow: 0 0 0 rgb(188,178,188),1px -1px 0 rgb(173,163,173),2px -2px 0 rgb(157,147,157),3px -3px 0 rgb(142,132,142),4px -4px 0 rgb(126,116,126),5px -5px 0 rgb(111,101,111), 6px -6px 0px rgb(95,85,95),7px -7px 0 rgb(79,69,79),8px -8px 7px rgba(0,0,0,.2);

Alt text

 
text-overflow:clip/ellipsis
    clip:对于文本内容超出容器会被裁剪,但是不会显示省略号     ellipsis:超出内容裁剪,显示省略号 必须配合使用overflow:hidden,white-space:nowarp,才有效果          
 
word-wrap:normal/break-word
    normal:默认值,控制连续文本换行(允许内容撑破容器边界,英文单词不断开)     break-word:在容器边界换行(截断英文单词)       
 
word-break:normal/break-all/keep-all
    normal 默认值 中文会换行,英文不会     break-all:可以强制截断英文换行     keep-all:不允许断开 中文会把标点符号前后的一个词或者短语整个换行 英文加上-会折行       
 

6.滤镜

 
  1. li:nth-child(1){
  2. /*grayscale灰度*/
  3. filter: grayscale(1);
  4. }
  5. li:nth-child(2){
  6. /*sepia:褐色*/
  7. filter: sepia(1);
  8. }
  9. li:nth-child(3){
  10. /*saturate() 饱和度*/
  11. filter: saturate(500%);
  12. }
  13. li:nth-child(4){
  14. /*hue-rotate() 色相反转*/
  15. filter: hue-rotate(180deg);
  16. }
  17. li:nth-child(5){
  18. /*invert(1):反色*/
  19. filter: invert(1);
  20. }
  21. li:nth-child(6){
  22. /*opacity() 透明度*/
  23. filter: opacity(.3);
  24. }
  25. li:nth-child(7){
  26. /*brightness(200%)亮度*/
  27. filter: brightness(250%);
  28. }
  29. li:nth-child(8){
  30. /*contrast(200%) 对比度*/
  31. filter: contrast(200%) drop-shadow(2px 3px 5px rgba(0,0,0,.5));
  32. }
  33. li:nth-child(9){
  34. /*blur(2px) 模糊度*/
  35. filter: blur(2px);
  36. }
  37. li:nth-child(10){
  38. /*drop-shadow(2px 3px 5px rgba(0,0,0,.5))阴影*/
  39. filter: drop-shadow(2px 3px 5px rgba(0,0,0,.5));
  40. }

效果分别是 
Alt text

 

7.transform变形

 
1.2D
 
  1. 每一次移动坐标改变了;
  2. 坐标是根据元素来画的,每个元素都有自己各自的坐标,各自之间没有关系,现有元素才会有坐标
  3. translate(X,Y)
  4. X:向X轴方向平移 正:右边,负:左边
  5. Y:向Y轴方向平移 正:下边,负:上边
  6. translate(X)====translateX(X)
  7. 如果你只传了一个值就代表 X轴方向平移
  8. translateX(X)
  9. translateY(Y)
  10. 缩小放大表示的是轴缩小放大## 标题 ##
  11. scale(n)整体放缩, n:(0-1)缩小 n>1放大,n=1不变
  12. scaleX(nX)x轴方向缩小、放大
  13. scaleY(nY)x轴方向缩小、放大
  14. rotate(20deg)绕着中心(元素中心)旋转20 正:顺时针 负:逆时针
  15. skew(Xdeg,Ydeg)只穿了一个就相当于skewX(Xdeg);
  16. skewX(Xdeg)
  17. skewY(Ydeg)
  18. 旋转中心:transform-origin: 50% 50 标签: CSS3 javascript

上一篇: 珠峰最新开课时间

下一篇: 字符串中常用的方法