1. CSSは左の固定幅と右の適応幅を実現します 1. ポジショニング <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>適応型</title> <スタイル> *{ パディング: 0; マージン: 0; } 。左{ 背景: 赤; 幅: 200ピクセル; 高さ: 200px; position: absolute;/*位置決め*/ 左: 0; トップ:0; } 。右{ 背景: 青; 高さ: 200px; 左マージン: 210px; } </スタイル> </head> <本文> <div class="left"> 固定幅</div> <div class="right"> 適応型 </本文> </html> 2. 浮遊 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>適応型</title> <スタイル> *{ パディング: 0; マージン: 0; } 。左{ 背景: 赤; 幅: 200ピクセル; 高さ: 200px; フロート: 左;/*フロート*/ } 。右{ 背景: 青; 高さ: 200px; 左マージン: 210px; } </スタイル> </head> <本文> <div class="left"> 固定幅</div> <div class="right"> 適応型 </本文> </html> 3. マージン <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>適応型</title> <スタイル> *{ パディング: 0; マージン: 0; } 。左{ 背景: 赤; 幅: 200ピクセル; 高さ: 200px; } 。右{ 背景: 青; 高さ: 200px; margin-top: -200px;/*マージン*/ 左マージン: 210px; } </スタイル> </head> <本文> <div class="left"> 固定幅</div> <div class="right"> 適応型 </本文> </html> 2. CSS3の弾性ボックスモデルが適応を実現 1. 上部と下部の高さは固定、中間の高さは適応 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <タイトル></タイトル> <スタイル> *{ マージン: 0; パディング: 0; } 本文、html{ 高さ: 100%; } #含む{ ディスプレイ: フレックス; flex-direction: column;/*列の垂直方向*/ height: 100%;/*フルスクリーン効果: この要素とその親要素および html、本体 height: 100%*/ } #トップ{ 高さ: 200px; 背景: 赤; } #中心 { フレックス: 1; 背景: 青; } #底{ 高さ: 100px; 背景: 緑; } </スタイル> </head> <本文> <div id="contain"> <div id="top">こんにちは</div> <div id="center">こんにちは</div> <div id="bottom">こんにちは</div> </div> </本文> </html> 2. 左の幅は固定で右の幅は適応型 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <タイトル></タイトル> <スタイル> * { マージン: 0; パディング: 0; } #含む { display: flex; /*親要素がこの属性を設定します*/ } #左 { 幅: 100ピクセル; 高さ: 200px; 背景: #fff8a8; 右マージン: 10px; } #右 { flex: 1; /*割合/コピー数*/ 高さ: 200px; 背景: #ff9bad; } </スタイル> </head> <本文> <div id="contain"> <div id="left"></div> <div id="right"></div> </div> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: ウェブサイトデザインの基礎知識:初心者の方はぜひお読みください
>>: docker を使って sonarqube を構築する方法
よく知らないサーバーの場合や、かなり前にインストールした場所を忘れてしまった場合、構成ファイルの場所...
いわゆる才能(左脳と右脳)つまり、芸術的な才能があるかどうかは、人間の左脳と右脳の分業によって主に決...
この記事では、jQueryプラグインを使用したマインスイーパゲームの最初の記事の具体的なコードを参考...
Grid は 2 次元のグリッド レイアウト システムです。これを使用すると、本質的にはハック メソ...
BackUpMysql.sh スクリプト #!/bin/bash PATH=/bin:/sbin:/...
今日の Web デザインでは、非常に大きなフォントが表示される傾向があります。これらのオープンソース...
目次テーブルの競合を見つけて修正するインデックス統計の更新テーブルの競合を見つけて修正するデータ テ...
フロートはWebページのレイアウトでよく使用されますが、フローティングブロックレベル要素は標準のドキ...
docker パッケージング Python 環境の手順は次のとおりです。 1 pip listの下に...
1. 背景Sysbench は、システムのハードウェア パフォーマンスをテストできるストレス テスト...
この記事の例では、Vue の日付時刻ピッカーコンポーネントの具体的なコードを参考までに紹介します。具...
この記事では、接続エラー ECONNREFUSED を例に、Node.js がエラーを処理するプロセ...
1 ダウンロードして準備するまず、公式ウェブサイトからTomcatをダウンロードする必要があります。...
序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...
目次序文文章プリミティブ型プリミティブ値ラッパーオブジェクト物体コンストラクタ通常機能(関数)プリミ...