By zhpooer

更新日期:

文章目录
  1. 1. 入门
  2. 2. HTML5
    1. 2.1. 结构标签
    2. 2.2. 视频标签
    3. 2.3. 其他标签
  3. 3. CSS3
    1. 3.1. 选择器
    2. 3.2. 浏览器私有前缀
    3. 3.3. 2D 转换
    4. 3.4. 动画
    5. 3.5. 渐变背景色
    6. 3.6. 内减属性
    7. 3.7. 自定义动画
    8. 3.8. 跳转链接
    9. 3.9. 图标字体
    10. 3.10. 构建3D
  4. 4. 响应布局
    1. 4.1. 百分比
    2. 4.2. 设备长宽
  5. 5. Phonegap
  6. 6. Swipe 手机滑动轮播图
  7. 7. rem and em
  8. 8. Jquery-mobile

入门

响应式, 可以适应不同尺寸的屏幕, 自动响应变化自己的外观的网站.使用html5和css3

HTML5

HTML5 由全球五大浏览器厂商共同指定

<!doctype html>, 包含了以往所有版本的文档dtd功能

1
2
3
4
5
6
7
8
9

<!doctype html>
<html>
  <head>
    <meta charset='utf-8'/>
    <meta name=”renderer” content=”webkit|ie-comp|ie-stand”>
  </head>
  <body>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/* 禁用iPhone中Safari的字号自动调整 */
html {
  -webkit-text-size-adjust: 100%;   /*让谷歌浏览器可以设定字体大小*/
  -ms-text-size-adjust: 100%;
}
/* 设置HTML5元素为块 */
article,aside, details, figcaption,figure, footer, header, hgroup,menu, nav, section {
  display:block;
}
/* 设置图片视频等自适应调整 */
img {
  max-widthL: 100%;
  height:auto;
  width:auto\9; /* ie8 */
}
.video embed, .video object, .video iframe {
  width: 100%;
  height: auto;
}

ie9+对html5支持, 检测浏览器支持html5. 任何浏览器对不能识别的标签, 都能显示里面的内容

1

<canvas> 您的浏览器版本过低, 请更新浏览器 </canvas>

结构标签

用来布局

  • <header> </header>
  • <nav></nav>
  • <section></section>, 分区标签, 语义上大于 div
    • <aside></aside>
    • <article></article>
  • <footer></footer>
  • hgroup 定义比标题标记的组
  • figure 定义一组媒体内容及其标题
  • figcaption 定义figure元素的标题

h5新增的标签本质是div制作的, 最大的意义在于嵌套使用. 比如 header, hgroup>h2

视频标签

早在html4, 或者 xhtml1.0 是没有处理视频的能力的, 只能通过某些插件来实现.

1
2
3
4

<video src="" controls="controls"></video>
<video src="" autoplay ="autoplay"></video>
<!-- 设置视频循环播放 -->
<video src="" loop="loop"></video>

支持的格式, ogg, mpeg4, webm(w3c推荐格式), 但是不是所有浏览器都支持. 可以放两个视频来全部支持如 ogg组合mp4, webm组合mp4

1
2
3
4
5

<video width="" height="" controls="controls">
  <source src="" type="video/ogg"></source>
  <source src="" type="video/mp4"></source>
  Your browser dont support this tag
</video>

1
2
3
4
5
6

video.play();
video.pause();
// 快进
video.currentTime += 10;
// 加速
video.playbackRate = 2;

1

<audio src="" controls="controls" autoplay loop> </audio>

其他标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!-- 温度计标签 -->
<meter low="15" value="23" hight="" min="" max=""></meter>
<!-- 进度条 -->
<progress max='100' value='0'> </progress>

<input type="text" list="car"/>
<datalist id='car'>
  <option> one </option>
  <option> two </option>
  <option> three</option>
</datalist>

<details>
  <summary>概要</summary>
  详情内容
</details>

<!-- 新增表单元素 -->
<input type="email"/>
<input type="color"/>
<input type="range" min="0" max="100"/>
<input type="search"/>

<script>
$().change(function(){})
</script>

CSS3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// 新增了选择器 nth-of-type 等同于 eq(), 从 1 开始
ul li:nth-of-type(1) {
  border-radius: 10px;
  border-radius: 5  0%;
  /**上右下左**/
  border-radius: 10px 10px 10px 10px;
}

div {
  /*水平偏移 纵向偏移 羽化程度*/
  box-shadow: 0 0 10px #000;
  /*内阴影*/
  box-shadow: 0 0 10px #000 inset;
  /*透明*/
  background: rgba(0, 0, 0, 0.5)
  /*文字投影*/
  text-shadow: 0 0 10px #000;
}
/*转换为内联级元素*/
section {
  display: box;
  display: -webkit-box;
}
article {-webkit-box-flex: 3;} /* 3/8 */
article {-webkit-box-flex: 5;} /* 5/8 */

选择器

  • :nth-child, 表示过滤当前容器中的第几个
  • :nth-of-type 表示过滤当前容器中同类型的第几个, 相当于 eq()
  • :first-child, :last-child
  • :not() 排除指定的元素
  • :empty 空元素
  • [key=value], 过滤拥有指定属性值的元素, 例如 input[type=button]
  • :before :after
    1
2

    div:before { content: '你好'; display: block;}
div:after {content: '';}

浏览器私有前缀

  • IE: -ms-
  • Firefox: -moz-
  • Chrome, Safari: -webkit-
  • Opera: -0-

2D 转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

div{
  /* 顺时针旋转, 旋转的是整个坐标系 */
  transform: rotate(45deg);
  transform: scale(0.5, 2);
  /* 移动横向, 纵向 */
  transform: translate(100px, 0) scale(2, 2);
  transform-origin: 0, 10px; /*设置旋转原点*/
  transform-origin: 50%, top;
  transform-origin: left, center;
  transform-origin: right, bottom;
  /*沿着y轴转*/
  transform: rotateY(45deg);
  /*沿着X轴转*/
  transform: rotateX(45deg);
  /*沿着Z轴转*/
  transform: rotate(45deg);
}

动画

1
2
3
4
5
6
7

/*方式一*/
div {transition: width 1s, height 2s;} /*默认样式*/
div:hover {width: 400px; height: 300px;}

/*方式二 linear */
div{transition: all 2s ease 2s;}
/*transition-timing-function transition-delay*/
  • linear 匀速度
  • ease 逐渐慢下来
  • ease-in 加速
  • ease-out 减速
  • ease-in-out 先加后减

渐变背景色

1
2
3
4
5
6
7
8
9
10
11
12
13
14

div {
  /*角度*/
  background: linear-gradient(180deg, red, green 30%, blue);
  background-size: cover; /*拉申*/
  background-size: 100% 100%; /* 背景盒子永远一样大*/
  background-size: contain; /* 等比例拉申*/
  background-image:url(), url(); /*设置两张背景图片*/
}

/*精灵图的缩放*/
div {
  /*使用背景缩放*/
  background-size: 80px 283px; 
}

内减属性

排除 border和padding 对宽高的影响

1

box-sizing: border-box;

自定义动画

animation, 让指定的元素实现自动运行的动画

1
2
3
4
5
6
7
8
9
10

div {
  /*linear ease-in*/
  /*正常播放, 轮流反向播放*/
  -webkit-animation: sport 2s ease-out 4s infinite|n normal|alternate running|paused;
}
div:hover {animation-play-state: paused;}
@-webkit-keyframes sport {
  %0{left:0}
  %100{left:500}
}

跳转链接

通过跳转域名的方式来制作手机, 使用device.js判断手记设备

1
2

window.location = '';
window.location.href = '';

图标字体

icomoon.io iconfont.cn2

1
2
3
4

/* 声明字体 */
@font-face {}
/* 引用 */
div{ font-family: ; }

构建3D

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<style>
body{
  /*设置透视效果*/
  perspective: 1000px;
  transform: translate3d(100%, 100%, 100%);
}

/*transform-style:preserve-3d|flat*/
ul{
  transform-style: preserve-3d;
  width: 200px;height:200px;
  border: 1px dashed;
  position: relative;
  transition: all 4s;

}
ul:hover {
  transform:rotateX(360deg) rotateY(360deg);
}  
ul li{
  width: 200px; height: 200px;
  border: 1px; position: absolute;
}
/*可以通过设置 scale 来设置成长方体*/  
li:nth-of-type(1){ background: red; transform: rotateY(90deg) translateZ(100px);} 
li:nth-of-type(2){ background: green; transform: rotateY(270deg)  translateZ(100px);}
li:nth-of-type(3){ background: gold; transform: rotateX(0deg)  translateZ(100px);}
li:nth-of-type(4){ background: blue; transform: rotateX(90deg)  translateZ(100px);}
li:nth-of-type(5){ background: purple; transform:rotateX(180deg) translateZ(100px);}
li:nth-of-type(6){ background: pink; transform:rotateX(270deg) translateZ(100px);}

</style>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

响应布局

响应式布局实现基本上是通过百分比来完成的, 必须了解设备的长 宽.

百分比

1
2
3

min-height: 300px;
width: 70%; min-width: 20px;
box-sizing: border-box;

设备长宽

1
2
3
4
5
6
7
8
9
10

/* 内嵌 */
@media (max-width: 620px) {/* mobile css */}
@media (min-width:621px) and (max-width: 980px) {/* pad css */}
@media (min-width:981px) {/* desktop css */}

/* 链接式 */
<link rel="stylesheet" type="text/css" href="css/phone.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/phone.css" media=" screen and (max-width:620px)"/>1
<link rel="stylesheet" type="text/css" href="css/pad.css" media="(min-width:621px) and (max-width:980px)"/>
<link rel="stylesheet" type="text/css" href="css/pc.css" media="(min-width:981px)"/>

pad和手机 正文文字一般都是 14 加粗.

1
2
3
4

body>*{min-width: 400px}

<meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Phonegap

将制作的网页封装成手机app, 可以安装到手机里面

Swipe 手机滑动轮播图

1
2

rem and em

root em 就是以根 html

1

height: 2rem;

em 默认以父级大小

Jquery-mobile

需要导入CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<div data-role="page">
  <div data-role="header">
     <!-- 添加图标， 在image中找 arrow-l-black  -->
     <a href="#" data-icon="arrow-l">后退</a>
     <h1>我的手机网站</h1>
     <!-- 设置图片的位置 top （notext没有文字））-->
     <a href="#" data-icon="arrow-r" data-iconpos="right">后退</a>
  </div>
  <div data-role="content">
     <!-- 内部连接 #ID -->
     <a href="#page1" data-role='button'>订阅</a>
     <!-- 外部链接 -->
     <a href="out.html" rel='external' >订阅</a>
     <!-- 转产效果 flip slide fade Slidedown Slideup  -->
     <a href="out.html" data-role='button' data-transition='pop'>订阅</a>
 </div>
 <!-- .ui-control-group{100%;}; a{width:25%; border-sizing: boder-box; } -->
     <div data-role="footer"
          data-role="controlgroup"
          data-type="horizontal"
          data-position='fixed'>
    <a href="#" data-role="button"></a>
    <a href="#" data-role="button"></a>
    <a href="#" data-role="button"></a>
    <a href="#" data-role="button"></a>
  </div>
</div>

<div data-role="page" id=’page1‘>
  <div data-role="header">
     <h1>我的手机网站</h1>
  </div>
  <div data-role="content">
    这里是第二部分内容
    <select name="''" id="''">
      <option> 选择 </option>
    </select>
  </div>
  <div data-role="footer" data-position='fixed'>
    <h4>版权信息</h4>
  </div>
</div>
  
<!-- 弹出对话框 -->
<a href="#page2" data-rel="dialog"></a>
<div data-role="page" id="page2">
  <div data-role="header">
    <h2>您确定要退出吗？</h2>
  </div>
  <div data-role="content">
    确定 返回
  </div>  
</div>
<div data-role="page" id="page2">
  <div data-role="header">
    <h2>您确定要退出吗？</h2>
  </div>
  <div data-role="content">
    <a href="#" data-role="button">重启</a>
    <a href="#">静音</a>
    <a href="#"></a>
  </div>  
</div>  

<!-- 列表 -->
<div dat-role="content">
  <ul data-role="listview"
      data-inset="true"
      data-filter="true"
      data-filter-placeholder="请输入名字">
      <li>
        <a>
          <img src=""/>
          <h3>刘德华</h3>
          <p>简介</p>
        </a>
      </li>
      <li><a>张学友</a></li>
      <li><a></a></li>
      <li><a></a></li>
  </ul>
</div>

<div data-role="content">
  <!-- ui-grid-a 两个子盒子排列
       ui-grid-b 三个子盒子排列 以此类推-->
  <div class="ui-grid-a">
      <div class="ui-block-a"> </div>
      <div class="ui-block-b"> </div>
  </div>
</div>
文章目录
  1. 1. 入门
  2. 2. HTML5
    1. 2.1. 结构标签
    2. 2.2. 视频标签
    3. 2.3. 其他标签
  3. 3. CSS3
    1. 3.1. 选择器
    2. 3.2. 浏览器私有前缀
    3. 3.3. 2D 转换
    4. 3.4. 动画
    5. 3.5. 渐变背景色
    6. 3.6. 内减属性
    7. 3.7. 自定义动画
    8. 3.8. 跳转链接
    9. 3.9. 图标字体
    10. 3.10. 构建3D
  4. 4. 响应布局
    1. 4.1. 百分比
    2. 4.2. 设备长宽
  5. 5. Phonegap
  6. 6. Swipe 手机滑动轮播图
  7. 7. rem and em
  8. 8. Jquery-mobile