H5 チュートリアル

HTML5で招待状を作成するにはどうすればよいですか?招待状の作り方（サンプルコード）

青灯夜游

Oct 26, 2018 pm 05:06 PM

html5招待状

この記事の内容は、HTML5で招待状を作成する方法を紹介するというものです。招待状の作成方法 (コード例)。困っている友人は参考にしていただければ幸いです。

目的: この簡単な招待状を作成するのは、初心者が Web 開発を始められるようにすることだけです。

ページを作成する前に、招待状全体の全体的な外観を見てみましょう。

#1. まず、HTML コードを記述します。

<!DOCTYPE html>
<html>
<head>
　　　<meta charset="utf-8">
　　　<title>邀请函</title> 
</head>  
<body> 
　　<div id="container">
　　　　<h1 id="hello-nbsp-world">hello world</h1>
　　　　<p>欢迎来到虚拟世界，在这里发挥你的想象力，探索无限的可能。</p> 
　　　　<a href="#" id="button">点击进入</a>
　　</div>
</body>
</html>

手順:

< ; !doctype html>: これはドキュメントの宣言のような形式です。

は html の始まりを表し、は html の終わりを表します。

タグ: html5 ページのさまざまな属性と構成情報の説明が含まれます。したがって、ある程度「身分証明書」とみなすことができます。

タグ: タグの文字セットを使用し、その文字エンコーディングを UTF-8 として指定します。これは " " とも呼ばれます。ユニバーサルコード」。

タグ: ブラウザのメニューバーに表示されるページのタイトル。 <p></p> タグ: 視聴者に表示されるすべてのコンテンツ情報が含まれます。

タグ: これはコンテナに相当する一般的なブロックレベルの要素で、div CSS レイアウトによく使用されます。ここでは、ページの位置を調整するために使用します。

タグ: これはタイトルで、1 から 6 までの 6 つのレベルがあります。

タグ: これは段落を表します。

タグ: これはリンクです。

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 をリンクにボタンとして追加します。

document.getElementById(id name) を使用してリンクを取得し、変数 btn に割り当てます。

次に、btn にスタンドアロン属性を追加し、実行関数を呼び出します。

rree

以上がHTML5で招待状を作成するにはどうすればよいですか?招待状の作り方（サンプルコード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は博客园で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

HTML5：標準とWeb開発への影響Apr 27, 2025 am 12:12 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、オフラインストレージ、ローカルストレージ、フォームエンハンスメントが含まれます。 1。コードの読みやすさとSEO効果を改善するためのセマンティックタグなど。 2.ラベルでマルチメディアの埋め込みを簡素化します。 3。アプリケーションキャッシュやLocalStorageなどのオフラインストレージとローカルストレージは、ネットワークのない操作とデータストレージをサポートします。 4.フォームエンハンスメントでは、処理と検証を簡素化するための新しい入力タイプと検証プロパティを導入します。

H5コードの例：実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート：メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス：要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ：ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5の接続：類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

H5コードの構成要素：キー要素とその目的Apr 23, 2025 am 12:09 AM

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5およびH5：一般的な使用法の理解Apr 22, 2025 am 12:01 AM

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5：現代のウェブのビルディングブロック（H5）Apr 21, 2025 am 12:05 AM

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

H5コード：クリーンで効率的なHTML5の書き込みApr 20, 2025 am 12:06 AM

クリーンで効率的なHTML5コードを書き込む方法は？答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 4.タグが閉じていないなどの一般的な間違いを避け、コードの有効性を確認してください。

H5：ウェブ上のユーザーエクスペリエンスをどのように強化するかApr 19, 2025 am 12:08 AM

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1）マルチメディアサポート：H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2）オフラインストレージ：WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3）パフォーマンスの最適化：ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

See all articles