一、响应式布局
当我们在利用浏览器的放大缩小的时候，经常会面临一些问题就是如何将浏览器中的内容缩放到我们适合观看的程度，这时候我们就引入一个概念叫做响应式布局（Responsive layout）。它的存在解决了很多浏览器在不同场景下浏览大小规模问题，增加用户的体验。同样，在移动互联网上的响应式布局也能够作用于手机端，增加手机的浏览体验。
@media screen：css3加入一个响应式布局的媒体屏幕的自动调整，实现了响应式布局结构。
<head>
<!--手机端简单响应-->
<meta name="viweport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"/>
<title>针对浏览器</title>
<style>
#container{
text-align:center;
margin:auto;
width:750;
}
#container>div{
border:1px solid #aaf;
text-align:left;
box-sizing:border-box;
border-radius:12px 12px 0px 0px;
padding:5px;
}
div#left{
width:300px;
height:260px;
float:left;
/*让该元素的右边*/
}
div#main{
width:450px;
height:260px;
float:left;
/*让该元素原始*/
clear:right;
}
div#right{
width:750px;
float:left;
}
@media screen and (min-width:1000px){
#container{
text-align:center;
margin:auto;
width:960;
}
#container>div{
border:1px solid #aaf;
box-sizing:border-box;
border-radius:12px 12px 0px 0px;
padding:5px;
}
div#left{
width:240px;
height:260px;
float:left;
/*让该元素的右边*/
}div#main{
width:450px;
height:260px;
float:left;
/*让该元素原始*/
clear:none;
}
div#right{
width:260px;
float:left;
height:260px;
}
}
@media screen and (max-width:480px){
#container{
text-align:center;
margin:auto;
width:450px;
}
#container>div{
border:1px solid #aaf;
/* 设置HTML大小框*/
box-sizing:border-box;
border-radius:12px 12px 0px 0px ;
padding:5px;
}
div#left{
width:450px;
float:left;
}
div#main{
width:450px;
height:260px;
float:left;
/*让该元素原始*/
clear:both;
}
div#right{
width:450px;
float:left;
height:170px;
}
}</style>
</head>
<body>
<div id="container">
<div id="left">
<h2>开班信息</h2>
C++难,原因,具有C语言底层特性,具有面向对象语言的抽象特性,因此同时具备
了底层和抽象的两个复杂维度,最终造成复杂度成倍提升.C++的复杂设计导致编程过
程中有许多陷阱和晦涩的含义,许多经验丰富的C++程序员也无法解决一些调试问题.
最致MFC发展也不大了.
</div>
<div id="main">
<h2>疯狂软件介绍</h2>
C++由于语言本身过度复杂，这甚至使人类难于理解其语义。
更为糟糕的是C++的编译系统受到C++的复杂性的影响，非常难
于编写，即使能够使用的编译器也存在了大量的问题，这些问题大多难
于被发现。
</div>
<div id="right">
<h2>公司动态</h2>
雷蒙德是自由党的成员。他是枪支权利倡导者。他赞同开源枪支组性的，而不是种
族主义。“ 渐进式竞选大石板成功地为候选人筹集资金，部分原因是要求科技工作
者提供捐款，以换取雷蒙德不发布类似的报价。
</div>
</div>
</body>
<script>
alert(document.body.clientWidth);
</script>
二、css3中简单的动画效果
css3真是前端的一大新革命！博主如是道。= =
@keyframe规则：css3中引入动画的效果，利用keyframe规则可以实现多类动画的前端制作，可以让动画动起来噢~。
linear线性速度
<head>
<meta charset="utf-8">
<style>
1div{
width:400px;
height:50px;
border:1px solid black;
background-color:red;
padding:20px;
transition:background-color 1s linear;
}
div{
background-color:#f1f1f1;
boreder:1px solid black;
left:100px;
width:60px;
height:60px;
}
div:hover{
background-color:rgba(241,23,41,0.6);
display:block;
animation-name:fkjava;
animation-duration:5s;
animation-iteration-count:1;
}
img#target{
position:absolute;
transition:left 1s linear ,top 1s linear;
}
#target:hover{
transform:rotate(5deg);
}
@keyframes fkjava{
/*定义动画开始处的关键帧 */
0%{ top:101px;}
20%{ transform:rotate(30deg) scale(1);}
30%{ left:301px;}
40%{ top:301px;}
50%{ right:200px;}
60%{ top:251px;}
80%{ left:400px; }
100%{ top:400px;}
}
</style>
</head>
<body>
<!--<div>鼠标移上来会发生颜色渐变</div>
<hr>
<img id="target" src="../1.jpg" style="width:70px;height:80px;"alt="1"/>
<hr>
<button onclick="zoom(2, 'blue');">放大</button>
<button onclick="zoom(0.5,'green');">缩小</button>
<button onclick="zoom(1,'red');">恢复</button>
<div id="target1" style="width:200px;height:160px;background-color:red;transition:background-color 2s linear 2s,width 2s linear 2s,height 2s linear 2s;"></div>
--><hr>
<div>鼠标悬停、开始动画</div>
</body>
<script>
var target = document.getElementById("target");
target.style.left = "0px";
target.style.top = "0px";
document.onmousedown = function(evt)
{
//将鼠标事件XY坐标赋给气球图片的left、top
target.style.left = evt.pageX + "px";
target.style.top = evt.pageY + "px";
}
//事件2
var originWidth = 200;
var originHeight = 160;
var zoom = function(scale,bgColor){
var target1 = document.getElementById("target1");
//设置缩放高宽
target1.style.width = originWidth *scale + "px" ;
target1.style.height = originHeight *scale + "px" ;
target1.style.backgroundColor = bgColor;
}</script>
其中利用css中的transform的属性可以达到一些转换效果，如上例旋转、平移等等。
鱼眼动画效果*
此类动画效果可以在前端的美观设计上更添一筹。
<head>
<meta name="author">
<meta charset="utf-8">
<style>
a:link{
text-decoration:none;
}div>a{
display:inline-block;
text-align:center;
width:120px;
pdding:8px;
background-color:#eee;
border:2px solid black;border-radius:20px;
position:absolute;
}
@keyframes fisheye{
0%{
transform:scale(1);
background-color:#eee;
border-radius:10px;
}
40%{
transform:scale(1.5);
background-color:red;
border-radius:10px;
}
100%{
transform:scale(1.5);
background-color: white;
border-radius:10px;
}
}
div>a:hover{
animation-name:fisheye ;
animation-duration:3s;
animation-iteration-count:infinite;}
@keyframes fkjava{
/*定义动画开始处的关键帧 */
0%{ top:101px;}
20%{ transform:rotate(30deg) scale(1);}
30%{ left:301px;}
40%{ top:301px;}
50%{ right:200px;}
60%{ top:251px;}
80%{ left:400px; }
100%{ top:400px;}
}
</style>
</head>
<body>
<div>
<a id="div" href="http://baidu/com" alt="1">aaaa</a></div>
</body>
<script>
var a=document.getElementById("#div");
when("a.style.hover"==){}
</script>