CSS3怎么做出响应式布局

2020-11-27 来源：爱够旅游网

今天给大家带来一个用CSS3做出来的响应式布局的案列，需要的朋友可以拿去借鉴使用，响应式是CSS3的一个特色，我们熟练掌握后手机端和PC端都可以熟练的使用。

<!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怎么做出响应式布局