この記事の内容は、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>
タグ: これは段落を表します。
タグ: これはリンクです。2. ページを美しくします: CSS
1. ページに背景画像を追加します:html,body{ height: 100%; }body { background: url(images/1.jpg) center center; background-size: cover; }
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; }
a { font-size: 18px; color: #8f3c3c; border: 1px solid #c66c6c; border-radius: 3px; padding: 10px 100px; 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"; }
rree
以上がHTML5で招待状を作成するにはどうすればよいですか?招待状の作り方(サンプルコード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。