HTML の Web ページコードの例。この例は、HTML の初心者に適しています。この例では、css スタイルの設定と div スタイルのパターンがあります。この例は、より包括的で学生の学習に役立ちます。この記事では、個人の Web サイトを一からデザインし、それをコードに変換することでデザインを練習する方法を紹介します。

記事ディレクトリ

1. Webページの紹介
1. Webページの効果
2. コード表示
- 1.HTMLコード
- 2.CSSコード
3. 個人的な概要
4、素晴らしい推薦

1. Webページの紹介

1 Web ページの紹介: この作品は学生の個人ホームページの Web デザイン、HTML + CSS レイアウトの制作、Web フロントエンドの最終課題、大学生の Web デザインの宿題のソースコードをテーマとしています。これは良い Web ページの制作で、写真はスマートです。、コードは簡単な学生レベルであり、初心者が使い方を学ぶのに非常に適しています。

2. Web ページの編集: Web ページのコードはシンプルで、任意の HTML 編集ソフトウェアを使用できます ( Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++など)。その他の任意の HTML 編集ソフトウェアを実行、変更、編集できます。編集など）。

3.知識の適用: テクノロジーに関しては、主に Web ページの知識を適用します: Div+CSS、マウスオーバー効果、テーブル、ナビゲーションバー効果、バナー、フォーム、二次および三次ページなど、ビデオ、オーディオ要素、Flash、ロゴ（ソースファイル）に必要な知識ポイントを同時にデザインします。

1. Webページの効果

ここに画像の説明を挿入

2. コード表示

1.HTMLコード

コードは以下の通りです(例)。以下は参考までにコードの一部のみを示します~

<nav class="navbar navbar-expand-lg navbar-light fill px-lg-0 py-0 px-3">
		<div class="container">
			<h1><a class="navbar-brand" href="index.html"><span class="fa fa-play icon-log" aria-hidden="true"></span>
				专业展会 </a></h1>
			<!-- if logo is image enable this   
					<a class="navbar-brand" href="#index.html">
						<img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
					</a> -->
			<button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
				data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
				aria-label="Toggle navigation">
				<!-- <span class="navbar-toggler-icon"></span> -->
				<span class="fa icon-expand fa-bars"></span>
				<span class="fa icon-close fa-times"></span>
			</button>

			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item">
						<a class="nav-link" href="index.html">家</a>
					</li>
					<li class="nav-item active">
						<a class="nav-link" href="about.html">关于</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="genre.html">类型</a>
					</li>
					
					<li class="nav-item">
						<a class="nav-link" href="contact.html">接触</a>
					</li>
				</ul>

				<!--/search-right-->
				<!--/search-right-->
				<div class="search-right">
					<a href="#search" class="btn search-hny mr-lg-3 mt-lg-0 mt-4" title="search">搜索 <span
							class="fa fa-search ml-3" aria-hidden="true"></span></a>
					<!-- search popup -->
					<div id="search" class="pop-overlay">
						<div class="popup">
							<form  method="post" class="search-box">
								<input type="search" placeholder="请输入关键字" name="search"
									required="required" autofocus="">
								<button type="submit" class="btn"><span class="fa fa-search"
										aria-hidden="true"></span></button>
							</form>
							<div class="browse-items">
								<h3 class="hny-title two mt-md-5 mt-4">浏览全部：</h3>
								<ul class="search-items">
									<li><a href="genre.html">行动</a></li>
									<li><a href="genre.html">戏剧</a></li>
									<li><a href="genre.html">家庭</a></li>
									<li><a href="genre.html">惊悚</a></li>
									<li><a href="genre.html">喜剧</a></li>
									<li><a href="genre.html">浪漫的</a></li>
									<li><a href="genre.html">电视剧</a></li>
									<li><a href="genre.html">恐怖</a></li>
									<li><a href="genre.html">行动</a></li>
									<li><a href="genre.html">戏剧</a></li>
									<li><a href="genre.html">家庭</a></li>
									<li><a href="genre.html">惊悚</a></li>
									<li><a href="genre.html">喜剧</a></li>
									<li><a href="genre.html">浪漫的</a></li>
									<li><a href="genre.html">电视剧</a></li>
									<li><a href="genre.html">恐怖</a></li>
								</ul>
							</div>
						</div>
						<a class="close" href="#close">×</a>
					</div>
					<!-- /search popup -->
					<!--/search-right-->
				</div>


			</div>
			<!-- toggle switch for light and dark theme -->
			<div class="mobile-position">
				<nav class="navigation">
					<div class="theme-switch-wrapper">
						<label class="theme-switch" for="checkbox">
							<input type="checkbox" id="checkbox">
							<div class="mode-container">
								<i class="gg-sun"></i>
								<i class="gg-moon"></i>
							</div>
						</label>
					</div>
				</nav>
			</div>
			<!-- //toggle switch for light and dark theme -->
		</div>
	</nav>

2.CSSコード


body {
    
    
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

[tabindex="-1"]:focus:not(:focus-visible) {
    
    
  outline: 0 !important;
}

hr {
    
    
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    
    
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
    
    
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
    
    
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
    
    
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
    
    
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
    
    
  margin-bottom: 0;
}

dt {
    
    
  font-weight: 700;
}

dd {
    
    
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
    
    
  margin: 0 0 1rem;
}

b,
strong {
    
    
  font-weight: bolder;
}

small {
    
    
  font-size: 80%;
}

sub,
sup {
    
    
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
    
    
  bottom: -.25em;
}

sup {
    
    
  top: -.5em;
}

a {
    
    
  color: #df0e62;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
    
    
  color: #df0e62;
  text-decoration: underline;
}

a:not([href]) {
    
    
  color: inherit;
  text-decoration: none;
}

a:not([href]):hover {
    
    
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
    
    
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
    
    
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}

figure {
    
    
  margin: 0 0 1rem;
}

img {
    
    
  vertical-align: middle;
  border-style: none;
}

3. 個人的な概要

適格な Web ページのセットには以下を含める必要があります (具体的には、個々の要件に従って決定できます)。

このページは、ヘッダー、メニューナビゲーションバー (プルダウンが望ましい)、中央のコンテンツセクション、フッターの 4 つの部分に分かれています。
すべてのページは相互にハイパーリンクされており、5 ～ 10 ページで構成される第 3 レベルのページに移動できます。
ページスタイルの統一されたレイアウトは、Div+Css テクノロジーを使用しているため、乱雑ではなく正常です。
メニューは美しく人目を引くもので、二次メニューは通常どおりポップアップしてジャンプできます。
画像ニュースのタイミング切り替えや手動切り替えなどの JS 特殊効果が必要です。
ページには、GIF、ビデオ、音楽、フォームテクノロジの使用などのマルチメディア要素があります。
このページは清潔で美しく、寛大ですが、同じものはありません。
ウェブサイトのフロントエンドプログラムは、ユーザーが求めるコンテンツを提供するだけでなく、優れたレイアウト、美しいインターフェース、エレガントなカラーマッチング、さまざまな表現形式などの要件を満たさなければなりません。

4、素晴らしい推薦

1. これを見た方は【点赞收藏博文】3、皆さんの応援が創作の原動力です【观注作者 |获取更多源码| 优质文章】 。

2. 私に従って、さまざまなフロントエンドプラグイン、3Dクールエフェクト、画像表示、テキストエフェクト、サイト全体のテンプレート、大学卒業HTMLテンプレート、最終課題テンプレートなどを学びましょう！ - ここのエンド開発者の皆さん、一緒にフロントエンドノードの知識について話し合い、お互いに学びましょう!」

3. 上記のコンテンツとテクノロジー関連の問題は相互に学習し、コミュニケーションすることができます