溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下html5制作邀請函的方法是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
目的：制作這個簡易的邀請函，只是為了讓新手入門Web開發。
在制作頁面之前，我們先來看看整個邀請函的整體面貌。
一、首先編寫HTML代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>邀請函</title> </head> <body> <div id="container"> <h2>hello world</h2> <p>歡迎來到虛擬世界，在這里發揮你的想象力，探索無限的可能。</p> <a href="#" id="button">點擊進入</a> </div> </body> </html>
說明：
<!doctype html> ：這形如一個對文檔的聲明。
<html>標簽：代表了對html的開始，</html>代表著html的結束。
<head> 標簽：它包含了對html5頁面各種屬性，配置信息的描述。因此在某種程度上可以視為一張“身份證”。
<meat> 標簽：使用<meat>標簽的charset來加以設置，將其字符編碼指定為UTF-8;UTF-8這是一種通用編碼形式，又被稱為“萬國碼”。
<title>標簽：即頁面的標題，顯示在瀏覽器器的菜單欄上。
<body> 標簽：包含了所有要呈現給瀏覽者的內容信息。
<div> 標簽：這是一個常見的塊級元素，相當于一個容器，它經常用來div+css布局。在這里我們用他來調整頁面的位置。
<h2> 標簽：這是一個標題，他有1~6六個級別。
<p> 標簽：這表示一個段落。
<a> 標簽：這是一個鏈接。
二、頁面的美化：CSS
1、給頁面添加背景圖片：
html,body{
height: 100%;
}body {
background: url(images/1.jpg) center center;
background-size: cover;
}我們在給網頁添加背景圖片的時候，我們選取的背景圖片可能像素比較大，不適應我們的瀏覽器窗口;所以我們給body的background屬性在橫向和縱向兩個方向上居中（center）,由于瀏覽器默認是沒有給予body高度屬性的，所以要給body和body的父級（html）設置height：100%屬性。在body設置屬性background-size：cover；實現背景圖片自適應充滿全屏。
2、為網頁添加字體的樣式
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，讓其文本水平居中。
那么如何實現豎直劇中呢？ 這里就用到了定位：我們要控制container的top屬性，這要建立在絕對定位的前提下，而要使得container絕對定位，就要使他的父級（body）設置為相對 定位。 之后我們利用屬性，讓top距頂50%。
現在還沒有結束,我們可以利用html5的transform屬性，設置translateY(-50%);即向上移動其高度的一半。
這樣整個container將會顯示在頁面的正中央。
4、為其內容標簽設置一些文字字體與字號。
h2 {
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 :這里牽扯到盒模型，其意思是下邊框有20px的寬度。
5、制作邀請函按鈕。
a {
font-size: 18px;
color: #8f3c3c;
border: 1px solid #c66c6c;
border-radius: 3px;
padding: 10px 100px;
text-decoration: none;
}border：為其設置邊框，該屬性的三個參數分別代表了邊框寬1px，實線，顏色。
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%);
}
h2 {
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;
}三、為頁面創建交互
var btn = document.getElementById('button');
btn.onclick = function(e) {
//preventDefault() 可以阻止單機鏈接后瀏覽器默認的URL跳轉。
e.preventDefault();
btn.innerHTML = "正在進入..."
btn.style.border = "0";
}首先我們為<a>鏈接添加id為button。
利用document.getElementById(id名)來獲取a鏈接，并將其賦給變量btn。
然后為btn添加單機屬性調用執行函數。
e.preventDefault(); //將阻止其默認的鏈接跳轉。 btn.innerHTML = "正在進入..." //改變文本內容。 btn.style.border = "0";
看完了這篇文章，相信你對html5制作邀請函的方法是什么有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
