简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
余白を修正する方法
P粉893457026
P粉893457026 2023-09-05 12:35:23
0
1
525
<p><strong>これはゴールポスターです</strong></p> <p><strong>これは私のポスターです</strong></p> <p>私のコードを読んで、どこが間違っているのか教えてもらえますか/もっと簡単な方法があるかどうかを教えてください このプロジェクトは、モチベーションを高めるポスター Web サイトを作成することです。 </p> <ブロック引用> <p>TODO: モチベーションを高める投稿の Web サイトを作成します。 お好みのスタイルに仕上げてください。 インスピレーションを得るためにターゲットの画像を見てください。 ただし、次の特性が必要です: </p> <ol> <li>メインの h1 テキストには、Google Fonts の Regular Libre Baskerville フォントを使用する必要があります。 https://fonts.google.com/specimen/Libre Baskerville</li> <li>テキストは白、背景は黒でなければなりません。 </li> <li>独自の画像をアセット内の画像フォルダーに追加します。 5 ピクセルの白い境界線があるはずです。 </li> <li>テキストは中央揃えにする必要があります。 </li> <li>h1、p、image 要素を含む div を作成します。画像とテキストがページの中央に配置されるように余白を調整します。 ヒント: 幅を 50%、左マージンを 25% に設定して、div を水平方向の中央に配置します。 ヒント: div を埋めるには、画像の幅を 100% に設定します。 </li> <li>CSS を使用した大文字の h1 については、MDN ドキュメントの text-transform プロパティを参照してください。 https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform</li> </ol> </blockquote> <p> <pre class="ブラシ:css;ツールバー:false;">h1 { 色: 白; フォントファミリー: 'Libre Baskerville'、筆記体; } p { 色: 白 } 体 { 背景: 黒; } #テキスト { テキスト変換: 大文字; } #box1 { 境界線: 5 ピクセルの実線。 テキスト整列: 中央; 色: 白; 幅: 450ピクセル; 高さ: 500ピクセル; パディングトップ: 50px; } ディビジョン { 幅: 50%; 高さ: 100%; マージン左: 25%; マージントップ: 25%; }</pre> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html> <頭> <link rel="stylesheet" href="style.css" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <リンク rel="preconnect" href="https://fonts.gstatic.com"crossorigin /> <リンク href="https://fonts.googleapis.com/css2?family=リブレ バスカヴィル&display=swap" rel="スタイルシート" /> </head> <本体> <div id="box1"> <!-- <img src="max-harlynking-UdCNVHNgHdI-unsplash.jpg" alt="" width="100%" height="50%" /> --> <img src="https://picsum.photos/640/480" alt="" width="100%" height="50%" /> <h1 id="texts">いきましょう!!!</h1> <p id="texts">僕たちはやりました</p> </div> </ボディ> </html></pre> </p> <p>最小化すると画像は中央に配置され (画面の半分を占める)、見栄えがよくなりますが、フルにすると中央に配置されますが、下部に表示されます。 </p> <p><em>勉強し始めたばかりなので、HTML と CSS の基礎しか知りません</em>*</p>
P粉893457026
P粉893457026

全員に返信(1)
P粉155551728
P粉1555517282023-09-06 00:39:04 1棟

＃＃＃これは、あなたの望むことですか？

text-align: center; を #texts に追加して、2 つのテキスト要素を中央揃えにしました。親の

を #box1 に追加し、display: flex; justify-content: center; を追加したので、基本的には Flexbox を水平方向に Center ## に使用しました。 ##ボックス1。あなたが望むもののようです。

リーリー リーリー

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！