今天给大家带来一个用css3做出来的响应式布局的案列，需要的朋友可以拿去借鉴使用，响应式是css3的一个特色，我们熟练掌握后手机端和pc端都可以熟练的使用。
nbsp;html>*{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怎么做出响应式布局的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3121473.html
