大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容介绍了“ Css3怎么做响应式布局”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
创新互联主要从事成都网站建设、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务衡南,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
Css3操作响应式布局
*{padding: 0;margin: 0;}
html,body{width: 100%;height: 100%;background:url(img/bj.jpg) ;background-size: 100% 100%;}
#nav{width: 560px;height:40px ;margin: 10px auto;}
ul,li{list-style: none;}
.list{width: 560px;height: 40px;background: #fff;}
.list li{width: 50px;height: 40px;margin: 0 10px;float: left;
transition: all 1s;
}
.list li:nth-child(1){
background: url(img/1.png) top;
}
.list li:nth-child(2){
background: url(img/2.png) top;
}
.list li:nth-child(3){
background: url(img/3.png) top;
}
.list li:nth-child(4){
background: url(img/4.png) top;
}
.list li:nth-child(5){
background: url(img/5.png) top;
}
.list li:nth-child(6){
background: url(img/6.png) top;
}
.list li:nth-child(7){
background: url(img/7.png) top;
}
.list li:nth-child(8){
background: url(img/8.png) top;
}
.list li:hover{
background-position: bottom;
}
@media only screen and (min-width: 640px) and (max-width: 980px) {
#nav{position: fixed;top:100px;left:10px;width: 50px;height:400px ;margin: 10px auto;}
ul,li{list-style: none;}
.list{width: 67px;height: 400px;background: #fff;}
.list li{width: 50px;height: 40px;margin: 0 10px;float: left;
transition: all 1s;
}
}
@media only screen and (min-width: 100px) and (max-width: 640px) {
#nav{position: fixed;top:100px;left:10px;width: 50px;height:400px ;margin: 10px auto;}
ul,li{list-style: none;}
.list{width: 67px;height: 400px;background: red;}
/*.list li{width: 50px;height: 40px;margin: 0 10px;float: left;
transition: all 1s;
background: #fff;
}*/
.list li:nth-child(1){
background: url(img/1.png) top;
}
.list li:nth-child(2){
background: url(img/2.png) top;
}
.list li:nth-child(3){
background: url(img/3.png) top;
}
.list li:nth-child(4){
background: url(img/4.png) top;
}
.list li:nth-child(5){
background: url(img/5.png) top;
}
.list li:nth-child(6){
background: url(img/6.png) top;
}
.list li:nth-child(7){
background: url(img/7.png) top;
}
.list li:nth-child(8){
background: url(img/8.png) top;
}
.list li:hover{
background-position: bottom;
}
.list li{width: 50px;height: 40px;margin: 0 10px;float: left;
transition: all 1s;
border-radius: 50%;
}
}
效果截图
“ Css3怎么做响应式布局”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!