20150806
HelloWorld!
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