简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

HTML で単純な単一ページ レイアウトを作成する方法 (コード共有)

奋力向前
リリース： 2021-08-09 16:37:09
オリジナル
8623 人が閲覧しました

前回の記事「CSSを使ってシンプルで美しいナビゲーションバーを作る方法をステップバイステップで教えます(詳細コード解説)」では、CSSを使ってナビゲーションバーを作成する方法を紹介しました。シンプルで美しいナビゲーションバー。次の記事では、HTML を使用して簡単なページ レイアウトを作成する方法を紹介しますので、一緒に見てみましょう。

HTML で単純な単一ページ レイアウトを作成する方法 (コード共有)

インターネット上のほとんどの Web ページは HTML で書かれており、HTML と CSS レイアウトを組み合わせることで、シンプルで美しい Web ページが作成されます。

#コード例

<!DOCTYPE html>
<html>
<head>
<title>css网页布局 </title>
<meta charset="utf-8">

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.header {
  background-color: #f1f1f1;
  }

.topnav {
  overflow: hidden;
  background-color: #f61137;
}

.topnav a {
  float: left;
  color: #0017f9;
  padding: 10px 100px;
  text-decoration: none;
}

.topnav a:hover {
 background-color:#7efe51;
 

</style>
</head>
	
	
<body>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo1.jpg">
      <img src="//static.runoob.com/images/demo/demo1.jpg" alt="#" width="800"    style="max-width:90%">
    </a>
	  </div>
	</div>
 <div class="topnav">
  <a href="#">图片</a>
  <a href="#">视频</a>
  <a href="#">关于</a>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo4.jpg">
      <img src="//static.runoob.com/images/demo/demo4.jpg" alt="#" width="800"    style="max-width:90%">
	</a>
	</div>
</div>
</body>
</html>
ログイン後にコピー

コードのレンダリングは次のとおりです:

HTML で単純な単一ページ レイアウトを作成する方法 (コード共有)

## コードの手順:


1. HTML ソース コードを開始します。

タグ言語には [開始タグ] と [終了タグ] が含まれます。真ん中がタグの内容で、最初にheadとtailを入力します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;html&gt; &lt;/html&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>2. 最も基本的な必要な要素を備えた単純な HTML ドキュメント

。途中にtitle <title>タグを追加し、title内にページタイトル名を追加します title:cssページレイアウトは記述する必要はありません。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;html&gt; &lt;head&gt; &lt;title&gt;css网页布局 &lt;/title&gt; &lt;/head&gt; &lt;/html&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>3. Web ページ レイアウト