ホームページ > 記事 > ウェブフロントエンド > CSS3でレスポンシブレイアウトを作る方法

CSS3でレスポンシブレイアウトを作る方法

php中世界最好的语言オリジナル: 2017-11-24 11:23:082770ブラウズ

今日は、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>

上記はレスポンシブレイアウトの例です。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注目ください。