博远动画长期承接各类flash动画制作设计!

新疆flash动画制作,网站制作,程序开发

44317016(微信同号) 13565936697
博远动画工作室--专业flash动画制作,交互课件动画制作,产品演示动画制作,动画课件等各类动画制作。
当前位置:主页 > 新闻资讯>响应式布局的简单方式需要的可以直接使用CSS
博远动画flash动画工作室长期承接各类flash动画,我们给客户的是高端的视觉体验,优质的售后服务...

响应式布局的简单方式需要的可以直接使用CSS


自从出现css3+h5的技术以后,很多站长朋友们最想做的就是网站响应式布局,下面就简单用代码的方式展示响应工布局,方便大家学习讨论。


/* 初始化---begin */
*{    
    margin: 0px;    
    padding: 0px;
}
.heading,
.container,
.footing{  
    margin: 10px auto;// 上下10px,左右自适应
}
.heading{   
    height: 100px;   
    background-color: chocolate;
}
.left,
.right,
.main{   
    background-color: cornflowerblue;
}
.footing{   
    height: 100px;   
    background-color: blue;
}
/* 初始化---end */

/* 自适应---begin */
/*屏幕宽度大于960*/
@media screen and (min-width: 960px){  
.heading,   
.container,  
.footing{       
    width: 960px;   
}   
.left,   
.main,  
.right{       
    float: left;      
    height: 500px;  
 }   
.left,   
.right{       
    width: 200px;   
}   
.main{       
    margin: 1px 5px;      
    width: 550px;   
}   
.container{      
    height: 500px;   
}
}

/*屏幕宽度大于600小于960*/
@media screen and (min-width: 600px) and (max-width:960px) {   
.heading,   
.container,   
.footing{       
    width: 600px;  
}   
.left,   
.main{       
    float: left;       
    height: 400px;   
}   
.right{       
    display: none;   
}   
.left{       
    width: 160px;  
}   
.main{       
    width: 435px;       
    margin-left: 5px;   
}   
.container{       
    height: 400px;   
}
}

/*屏幕宽度小于600*/
@media screen and (max-width:600px) {   
.heading,   
.container,  
.footing{       
    width: 400px;   
}   
.left,   
.right{       
    width: 400px;       
    height: 100px;   
}   
.main{       
    margin-top: 10px;       
    width: 400px;       
    height: 200px;  
}   
.right{       
    margin-top: 10px;   
}   
.container{       
    height: 420px;   
}
}
/* 自适应---end *

如果遇到技术问题,请尽快联系本站QQ:44317016 我们会尽快帮您解决
上一篇: ecshop如何在首页调用左侧广告
下一篇: 学习flash动画制作软件最常用的as2/3.0代码

新疆博远云创网络科技有限公司—专业flash动画制作