HTML5

20150806

 

CSS3侧边栏开发---慕课网

 

这个项目运用到两个CSS知识点：

1，CSS sprite雪碧图，也称CSS精灵，将背景图片集中在一张图片中，减少对服务器的请求，增强性能。

Background: url(图片的地址);

Background-position:所选图片在大图中的定位

 

2，动画三兄弟：animation，transform，transition

 

/*使用动画*/

Animation:       动画名 动画所用时间  动画播放方式         动画播放次数…；

 

 

/*定义动画*/

@keyframes 动画名{

         0%{

                   动画初始的CSS样式

}

         100%{

                   动画结束时的CSS样式

}

}

 

Transform:变化的css样式

Transition:使用过渡来平滑展现动画

：hover使用hover等伪类，进行动作描述。

 

3，Width:100%是继承父元素的样式；如果父类的width:400%，那么子类的width:25%就等于不在父类的Width:100%；（这个例子在慕课网有涉及到，学完html5的新标签，再看）

 

4，使用background-size控制背景图的大小

 

5，目前在看《响应式》这本书，今天学习到，媒体查询。

媒体查询：主要相关和控制的就是<meta viewport>这个标签，有三种viewport：

Layout-viewport：width=document.documentElement.clientWidth.

visual viewport:       width=window.innerWidth;

 ideal viewport:        移动设备的理想viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

5.1，利用meta标签对viewport进行控制

<meta name="viewport" content="width=device-width, initial-scale=1">

这个标签就能使当前的viewport变成idealViewport