欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS3 >

Css3做响应式布局案列

Css3操作响应式布局

<!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 class="list">

                      <li></li>

                      <li></li>

                      <li></li>

                      <li></li>

                      <li></li>

                      <li></li>

                      <li></li>

                      <li></li>

                     

                 </ul>

           </div>

      </body>

</html>

效果截图

 

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c14358.shtml

我要分享到:
上一篇: Css3过渡渐变
下一篇:CSS3运动体系

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2016-11-14 21:08 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。