CSS3로 반응형 레이아웃을 만드는 방법-CSS 튜토리얼-php.cn

CSS3로 반응형 레이아웃을 만드는 방법

php中世界最好的语言

풀어 주다： 2017-11-24 11:23:08

원래의

2765명이 탐색했습니다.

오늘은 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 중국어 홈페이지의 다른 관련 글도 주목해주세요!