ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5で招待状を作成するにはどうすればよいですか?招待状の作り方（サンプルコード）
HTML5で招待状を作成するにはどうすればよいですか?招待状の作り方（サンプルコード）
- 青灯夜游転載
- 2018-10-26 17:06:0110447ブラウズ
この記事の内容は、HTML5で招待状を作成する方法を紹介するというものです。招待状の作成方法 (コード例)。困っている友人は参考にしていただければ幸いです。
目的: この簡単な招待状を作成するのは、初心者が Web 開発を始められるようにすることだけです。
ページを作成する前に、招待状全体の全体的な外観を見てみましょう。
#1. まず、HTML コードを記述します。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>邀请函</title> </head> <body> <div id="container"> <h1>hello world</h1> <p>欢迎来到虚拟世界，在这里发挥你的想象力，探索无限的可能。</p> <a href="#" id="button">点击进入</a> </div> </body> </html>手順:< ; !doctype html>: これはドキュメントの宣言のような形式です。 100db36a723c770d327fc0aef2ce13b1 は html の始まりを表し、73a6ac4ed44ffec12cee46588e518a5e は html の終わりを表します。 93f0f5c25f18dab9d176bd4f6de5d30e タグ: html5 ページのさまざまな属性と構成情報の説明が含まれます。したがって、ある程度「身分証明書」とみなすことができます。 0b06b01d593eb6158ab14a0c0e15c90d タグ: 0b06b01d593eb6158ab14a0c0e15c90d タグの文字セットを使用し、その文字エンコーディングを UTF-8 として指定します。これは " " とも呼ばれます。ユニバーサルコード」。 b2386ffb911b14667cb8f0f91ea547a7 タグ: ブラウザのメニュー バーに表示されるページのタイトル。 6c04bd5ca3fcae76e30b72ad730ca86d タグ: 視聴者に表示されるすべてのコンテンツ情報が含まれます。 dc6dce4a544fdca2df29d5ac0ea9906b タグ: これはコンテナに相当する一般的なブロック レベルの要素で、div CSS レイアウトによく使用されます。ここでは、ページの位置を調整するために使用します。 4a249f0d628e2318394fd9b75b4636b1 タグ: これはタイトルで、1 から 6 までの 6 つのレベルがあります。 e388a4556c0f65e1904146cc1a846bee タグ: これは段落を表します。 3499910bf9dac5ae3c52d5ede7383485 タグ: これはリンクです。
2. ページを美しくします: CSS
1. ページに背景画像を追加します:html,body{
height: 100%;
}body {
background: url(images/1.jpg) center center;
background-size: cover;
}ページへの背景画像の追加 背景画像を追加する場合、選択した背景画像のピクセルが比較的大きく、ブラウザ ウィンドウに収まらない可能性があるため、本文の背景属性を水平方向と垂直方向の両方で中央に配置します。ブラウザにはデフォルトで height 属性が与えられていないため、body と body の親 (html) に height: 100% 属性を設定する必要があります。本文に属性background-size: coverを設定すると、背景画像が適応的に全画面に表示されるようになります。 2. Web ページにフォント スタイルを追加します。
html,body{
height: 100%;
font-family: sans-serif;
color: #801449;
}font-family: 属性によりフォントを変更できます。 color: フォントの色を変更できます。CSS には継承メカニズムがあるため、後続の要素はこの属性を持ちます。 3. 招待コンテンツ領域の位置を調整します。
body {
background: url(images/1.jpg) center center;
background-size: cover;
margin: 0;
padding: 0;
position: relative;
}#container {
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}まず第一に、margin: 0;padding: 0; を使用します。これは非常に一般的な方法で、ブラウザによってページ要素に事前に設定されているデフォルトのマージン値の一部を明確にすることができます。 CSS に依存しない制御がより正確になりました。 ここでは ID セレクター (# ID 名) を使用し、その幅を 100% に設定します。text-ailgn:center を使用してテキストを水平方向に中央揃えにします。 それでは、どうすれば縦方向のプレーを実現できるのでしょうか?ここでは位置決めが使用されています。コンテナーの top 属性を制御する必要があります。コンテナーを絶対位置にするには、その親 (本体) を相対位置に設定する必要があります。次に、この属性を使用して上位を上位から 50% 離れた位置にします。 これはまだ終わっていません。html5 のtransform属性を使用してtranslateY(-50%)を設定します。つまり、高さの半分だけ上に移動します。 このようにして、コンテナ全体がページの中央に表示されます。 4. コンテンツ ラベルのテキスト フォントとサイズを設定します。
h1 {
font-size: 54px;
text-transform: uppercase;
margin-bottom: 20px;
}p {
font-size: 21px;
margin-bottom: 40px;
}a {
font-size: 18px;
color: #8f3c3c;
}説明: font-size: フォント サイズを設定します。 text-transform:uppercase: テキストを大文字に変換します。 margin-bottom:20px : これにはボックス モデルが関係します。これは、下枠の幅が 20 ピクセルであることを意味します。 5. 招待ボタンを作成します。
a {
font-size: 18px;
color: #8f3c3c;
border: 1px solid #c66c6c;
border-radius: 3px;
padding: 10px 100px;
text-decoration: none;
} border: 境界線を設定します。この属性の 3 つのパラメーターは、それぞれ 1px、実線、および色の境界線を表します。 border-radius: 境界線に 3 ピクセルの丸い角を設定します。 パディング: 上下のパディングは 10 ピクセル、左右のパディングは 100 ピクセルです。 text-decoration:none : これにより、リンクの下線が削除されます。
全体的な CSS ファイル:
html,body{
height: 100%;
font-family: sans-serif;
color: #801449;
}
body {
background: url(images/1.jpg) center center;
background-size: cover;
margin: 0;
padding: 0;
position: relative;
}
#container {
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
h1 {
font-size: 54px;
text-transform: uppercase;
margin-bottom: 20px;
}
p {
font-size: 21px;
margin-bottom: 40px;
}
a {
font-size: 18px;
color: #8f3c3c;
border: 1px solid #c66c6c;
border-radius: 3px;
padding: 10px 100px;
text-decoration: none;
}
3. ページのインタラクションを作成します
var btn = document.getElementById('button');
btn.onclick = function(e) {
//preventDefault() 可以阻止单机链接后浏览器默认的URL跳转。
e.preventDefault();
btn.innerHTML = "正在进入..."
btn.style.border = "0";
} まず、ID を 3499910bf9dac5ae3c52d5ede7383485 リンクにボタンとして追加します。 document.getElementById(id name) を使用してリンクを取得し、変数 btn に割り当てます。 次に、btn にスタンドアロン属性を追加し、実行関数を呼び出します。 rree
以上がHTML5で招待状を作成するにはどうすればよいですか?招待状の作り方（サンプルコード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。