响应式web设计——HTML5和CSS3实战

第2章 媒体查询：支持不同的视口

1.媒体查询能检测哪些特性

2.加载媒体查询的最佳方法

 

第3章 拥抱流式布局

1.百分比布局

2.em

3.图片的max-width属性

4.css网格系统 Columnal

 

第4章 HTML5

1.嵌入媒体

2.离线web应用  理解manifest文件

 

第5章 & 第6章

1.css3选择器first-child,last-child,

   多栏布局 

column-width:12em;
column-count:4;
column-rule:thin dotted #999;
column-gap:2em;

2.自定义网页字体 @font-face规则，使用@font-face嵌入字体

3.RGBA和HSLA 颜色格式和透明度

4.CSS3文字阴影，盒阴影，背景渐变，多重背景。

 

第7章  CSS3过渡，变形，动画

1.css3 3D变形效果，鼠标悬停在海报图片上，会看到图片翻转到背面并显示除了该电影的评判结果。

<section class="Qcontainer">
<div class="film">
<div class="face front">
<img src="image/goonies.jpg" alt="the goonies" />
</div>
<div class="face back"><h5>HOT!</h5></div>
</div>
</section>
.Qcontainer{
height:100%;
width:28%;
position:relative;
-webkit-perspective:800;/*父级元素上设置透视，开启3D场景。透视的值越大，就表示你的视点与3D场景之间的景深越大。*/
float:left;
margin-right:2%;
}
.film{
width:100%;
height:15em;
-webkit-transform-style:preserve-3d;/*父元素添加的透视声明只会应用到其第一个子元素上，为了延续父元素的透视，设置一个3D场景*/
-webkit-transition:1s;
}
.Qcontainer:hover .film{
-webkit-transform:rotateY(180deg);/*翻转效果*/
}
.face{
position:absolute;
-webkit-backface-visibility:hidden;
}
.back{
width:66%;
height:127%;
-webkit-transform:rotateY(180deg);
background:#3b3b3b;
background:-webkit-linear-gradient(top,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
padding:15%;
}

 

降级方案

z-index

2.css3动画由2部分组成：首先是关键帧声明@keyframes，然后在动画属性中使用该关键帧声明。

@-webkit-keyframes swing{/*关键帧*/
0%{
transform:rotate(3deg);
}
20%{
transform:rotate(7deg);
}
60%{
transform:rotate(10deg);
}
80%{
transform:rotate(7deg);
}
100%{
transform:rotate(3deg);
}
}
.using{/*引用*/
transform:rotate(3deg);
animation:swing 0.1s 5 ease-in;/*引用*/
}

第8章 HTML5表单

1.占位字符 placeholder

2.必填项  required

required aria-required="true"

range/color/button/hidden 类型的输入元素则不能使用required，因为这几种输入类型几乎都有默认值

3.表单域默认聚焦 autofocus

<div>
<label for="search">Search the site...</label>
<input id="search" name="search" type="search" placeholder="Wyatt Earp" autofocus>
</div>

 

有些用户会使用空格键让网页内容向下滚动。如果网页的表单中含有带autofocus属性的表单域，则会则只空格键的默认行为，这时敲击空格键会向已聚焦的输入框中输入空格。

4.自动完成 autocomplete

<div>
<label for="tel">Telephone</label>
<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required aria-required="true">
</div>

<form if="redemption" method="post" autocomplete="off">

5.输入框备选址   list 及对应的datalist元素

<div>
<label for="awardWon">Award Won</label>
<input id="awardWon" name="awardWon" type="text" list="awardWon">
<datalist id="awardWon">
<select>
<option value="Best Picture"></option>
<option value="Best Director"></option>
<option value="Best Adapted Screenplay"></option>
<option value="Best Picture"></option>
</select>
</datalist>
</div>　

6.新的输入类型

email,number,url,tel,search.pattern(正则表达式定义数据格式),color,date,month,week,time,datetime和datetime-local,range(滑动条)

7.给不支持的浏览器打补丁

   Webshims Lib(http://afarkas.github.com/webshim/demos)

8.针对表单的CSS3伪类选择器 增强交互效果

/*选择必填表单域*/
input:required{
border:1px solid raba(253,8,8,0.29);
}
/*当输入值不符合规范时，给当前的输入框加上一个红色叉号*/
input:focus:invalid{
background:url('../img/cross.png') no-repeat right;
padding-right:3px;
}
/*符合规范时，给当前的输入框加上一个绿色对号*/
input:focus:valid{
background:url('../img/tick.png') no-repeat right;
padding-right:3px;
}

HTML5验证工具 validator.nu或validator.w3.org/

工具 Modernizr