HTML の例の Web ページ コード。この例は、HTML の初心者である学生に適しています。この例では、css スタイルの設定と div スタイルのパターンがあります. この例は、より包括的で、学生が学習するのに役立ちます. この記事では、個人の Web サイトをゼロからデザインしてコードに変換することで、デザインを練習する方法を紹介します.
1.Webページ紹介
1 Webページの紹介: この作品は、学生の個人ホームページのWebデザイン、学生の個人の単一ページの宿題の課題です。
2. Web ページの編集: Web ページのコードはシンプルで、任意の HTML 編集ソフトウェアを使用できます ( Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++、およびその他の任意の HTML 編集ソフトウェアを実行、変更、および編集など）。
3.知識の適用: 技術的には、主に Web ページの知識を適用します: Div+CSS、マウス オーバー効果、表、ナビゲーション バー効果、バナー、フォーム、二次および三次ページなど、ビデオ、オーディオ要素、Flash、同時にデザイン ロゴに必要な知識ポイント（ソースファイル）。
1.Webページ効果
2.コード表示
1.HTMLコード
コードは次のとおりです (例): 以下は、参考のためにコードの一部のみを示しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HERO</title>
<link rel="icon" href="./font/marvel.png" type="image/x-icon" />
<link rel="stylesheet" href="./assets/reset.css">
<link rel="stylesheet" href="./assets/animate.css">
<link rel="stylesheet" href="./font/iconfont.css">
<link rel="stylesheet" href="./css/hero.css">
</head>
<body>
<div class="box">
<ul class="animated lightSpeedIn nav">
<li>
<a href="hero.html">
<img src="./font/marvel.png" alt="logo">
</a>
</li>
<li id="li_btn">
<a href="hero.html">
HERO
</a>
<ul id="nav_two" class=" nav_two">
<li class="animated zoomIn " id="thor">Thor</li>
<li class="animated zoomIn " id="hulk">Hulk</li>
<li class="animated zoomIn " id="widow">Widow</li>
</ul>
</li>
<li>
<a href="film.html">
FILM
</a>
</li>
</ul>
<div class="con">
<div id="section" class="ironman animated rollIn">
<img src="./img/one.png" alt="钢铁侠" />
</div>
<div class="thor animated bounceInRight">
<img src="./img/two.png" alt="雷神" />
</div>
<div class="hulk animated bounceInLeft">
<img src="./img/three.png" alt="浩克" />
</div>
<div class="widow animated zoomIn">
<img src="./img/four.png" alt="黑寡妇" />
</div>
</div>
<div class="back_top animated jackInTheBox" id="back_top">
<i class="iconfont icon-fanhuidingbu3"></i>
</div>
</div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/hero.js"></script>
</html>
2.CSSコード
body {
width: 100%;
height: 100%;
overflow-x: hidden;
background-color: #0e100f;
}
body a {
color: #fff;
text-decoration: none;
}
body::-webkit-scrollbar {
display: none;
}
body .nav {
z-index: 999;
width: 50%;
display: flex;
justify-content: space-evenly;
position: absolute;
top: 1.5%;
font-weight: bolder;
}
body .nav > li {
display: inline-block;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
body .nav > li img {
width: 50%;
}
body .nav > li:nth-child(1) {
font-size: 25px;
}
body .nav > li:hover {
cursor: pointer;
font-size: 25px;
}
body .nav .nav_two {
display: none;
color: lightgray;
font-size: 15px;
}
body .nav .nav_two li {
height: 50px;
}
body .nav .nav_two li:hover {
font-size: 20px;
}
body img {
width: 100%;
}
body .box {
width: 100%;
color: #fff;
position: relative;
}
body .box .back_top {
display: none;
cursor: pointer;
position: fixed;
right: 20px;
top: 300px;
}
body .box .back_top .icon-fanhuidingbu3 {
font-size: 50px;
}
body .box .con .hulk,
body .box .con .thor,
body .box .con .widow {
display: none;
}
3.個人的なまとめ
適格な Web ページのセットには、次のものが含まれている必要があります (具体的には、個々の要件に従って決定できます)。
- ページは、ヘッダー、メニュー ナビゲーション バー (できればプルダウン)、中間コンテンツ セクション、およびフッターの 4 つの部分に分かれています。
- すべてのページは相互にハイパーリンクされており、5 ～ 10 ページで構成される第 3 レベルのページに移動できます。
- ページ スタイルの統一されたレイアウトは、Div+Css テクノロジを使用して、乱雑ではなく正常です。
- メニューは美しく人目を引くもので、セカンダリ メニューは通常どおりポップアップしてジャンプできます。
- タイミングの切り替えや画像ニュースの手動切り替えなど、JS の特殊効果が必要です。
- このページには、gif、ビデオ、音楽、フォーム技術の使用などのマルチメディア要素があります。
- ページはきれいで、美しく、寛大で、同じではありません.
- Web サイトのフロントエンド プログラムは、ユーザーが必要とするコンテンツを表示できるだけでなく、優れたレイアウト、美しいインターフェイス、エレガントなカラー マッチング、およびさまざまな表現形式の要件も満たす必要があります。
4、素敵なおすすめ
これを見たら【点赞，好评，收藏】3、応援が私の創作の原動力です。