css进阶学习

我们在看一个页面的时候常常会被页面里面炫酷的效果所震撼，而不少效果其实并不需要js来完成，我们学习的css也可以实现很多效果，尤其是css3。

1.多背景设置

标签里的背景颜色和背景图片常常会出现互相覆盖的情况，但其实背景图片可以不止设置一张图，可以多图片设置，而且图片之前的位置是互不影响的，具体代码如下，像这样就是设置了三个背景图，而url里面就是图片的位置，但是这些图不要太大，不然也是会相互重叠，这样的多背景适合把一些小图标加进背景里面。

background: 
url("./img/商城.png") no-repeat 0px 440px, 
url("./img/运营商管理.png") no-repeat 200px 450px, 
url("./img/云.png") no-repeat 420px 440px;

2.多媒体查询

媒体查询可用于检测很多事情，例如：

• viewport(视窗) 的宽度与高度
• 设备的宽度与高度
• 朝向 (智能手机横屏，竖屏) 。
• 分辨率

目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询，下方代码是一些简单的多媒体查询实例，这样就是说，当屏幕可视尺寸小鱼480像素是，就修改页面中的背景颜色

@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}