CSS3でレスポンシブレイアウトを作る方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

php中世界最好的语言

Nov 24, 2017 am 11:23 AM

csscss3

今日は、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 サイトの他の関連記事にご注目ください。

関連書籍:

属性セレクターと疑似クラスセレクターの使用方法

CSS3 box-shadow の使用方法

適切な HTML タグの選択方法

以上がCSS3でレスポンシブレイアウトを作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

マージンは何ですか：40px 100px 120px 80pxは意味しますか？Apr 28, 2025 pm 05:31 PM

記事では、CSSマージンプロパティ、特に「マージン：40px 100px 120px 80px」、そのアプリケーション、およびWebページレイアウトへの影響について説明します。

さまざまなCSSボーダープロパティとは何ですか？Apr 28, 2025 pm 05:30 PM

この記事では、カスタマイズ、ベストプラクティス、および応答性に焦点を当てたCSSボーダープロパティについて説明します。主な議論：Border-Radiusは、レスポンシブデザインに最も効果的です。

CSSの背景とは何ですか、プロパティをリストしますか？Apr 28, 2025 pm 05:29 PM

この記事では、CSSのバックグラウンドプロパティ、Webサイトの設計の強化における使用、および避けるべき一般的な間違いについて説明します。重要な焦点は、バックグラウンドサイズを使用したレスポンシブデザインです。

CSS HSLの色とは何ですか？Apr 28, 2025 pm 05:28 PM

記事では、CSS HSLの色、Webデザインでの使用、およびRGBよりも利点について説明します。主な焦点は、直感的な色の操作を通じて設計とアクセシビリティを向上させることです。

CSSにコメントを追加するにはどうすればよいですか？Apr 28, 2025 pm 05:27 PM

この記事では、CSSでのコメントの使用について説明し、シングルラインとマルチラインのコメント構文を詳述しています。コメントはコードの読みやすさ、保守性、コラボレーションを強化するが、適切に管理されていないとウェブサイトのパフォーマンスに影響を与える可能性があると主張しています。

CSSセレクターとは何ですか？Apr 28, 2025 pm 05:26 PM

この記事では、HTML要素のスタイリングのCSSセレクター、その種類、および使用法について説明します。 IDとクラスのセレクターを比較し、複雑なセレクターでパフォーマンスの問題に対処します。

どのタイプのCSSが最優先事項を保持していますか？Apr 28, 2025 pm 05:25 PM

この記事では、CSSの優先順位について説明し、特異性が最も高いインラインスタイルに焦点を当てています。 CSS競合を管理するための特異性レベル、オーバーライド方法、およびデバッグツールを説明します。

CSSの構文は何ですか？Apr 28, 2025 pm 05:23 PM

記事では、CSS構文、学習戦略、一般的な間違い、検証ツールについて説明します。主な焦点は、実践と理解を通じてCSSをマスターすることです。

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、