<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{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%; } } </style> </head> <body> <div id="nav"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
以上就是一个响应式布局的案例，更多精彩请关注其它相关文章！
相关阅读：
属性选择器和伪类选择器的使用方法
css3的box-shadow怎么使用
怎么选择合适的html标签
以上就是css3怎么做出响应式布局的详细内容。