html5如何製作一份邀請函？製作邀請函的方法（程式碼範例）
- 青灯夜游轉載
- 2018-10-26 17:06:0110441瀏覽
這篇文章帶給大家的內容是介紹html5如何製作一份邀請函？製作邀請函的方法（程式碼範例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
目的：製作這個簡易的邀請函，只是為了讓新手入門Web開發。
在製作頁面之前，我們先來看看整個邀請函的整體面貌。
一、先寫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>
說明：
23fd10257f87e3f728f3e0608c9416c4 ：這形如一個對文檔的宣告。
100db36a723c770d327fc0aef2ce13b1標籤：代表了對html的開始，73a6ac4ed44ffec12cee46588e518a5e代表html的結束。
93f0f5c25f18dab9d176bd4f6de5d30e 標籤：它包含了html5頁面各種屬性，設定資訊的描述。因此在某種程度上可以視為一張「身分證」。
0b06b01d593eb6158ab14a0c0e15c90d 標籤：使用0b06b01d593eb6158ab14a0c0e15c90d標籤的charset來加以設置，將其字元編碼指定為UTF-8;UTF-8這是一種通用編碼形式，又被稱為“萬國碼」。
b2386ffb911b14667cb8f0f91ea547a7標籤：即頁面的標題，顯示在瀏覽器器的功能表列上。
6c04bd5ca3fcae76e30b72ad730ca86d 標籤：包含了所有要呈現給瀏覽者的內容資訊。
dc6dce4a544fdca2df29d5ac0ea9906b 標籤：這是一個常見的區塊級元素，相當於一個容器，它常用來div css佈局。這裡我們用他來調整頁面的位置。
4a249f0d628e2318394fd9b75b4636b1 標籤：這是一個標題，他有1~6六個等級。
e388a4556c0f65e1904146cc1a846bee 標籤：這表示一個段落。
3499910bf9dac5ae3c52d5ede7383485 標籤：這是一個連結。
二、頁面的美化：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、為其內容標籤設定一些文字字體與字號。
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 :這裡牽扯到盒子模型，其意思是下邊框有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%);
}
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;
}
三、為頁面建立互動
#var btn = document.getElementById('button');
btn.onclick = function(e) {
//preventDefault() 可以阻止单机链接后浏览器默认的URL跳转。
e.preventDefault();
btn.innerHTML = "正在进入..."
btn.style.border = "0";
}
首先我們為3499910bf9dac5ae3c52d5ede7383485連結加入id為button。
利用document.getElementById(id名)來取得a鏈接，並將其賦給變數btn。
### 接著為btn新增單機屬性呼叫執行函數。 ###e.preventDefault(); //将阻止其默认的链接跳转。 btn.innerHTML = "正在进入..." //改变文本内容。 btn.style.border = "0";
以上是html5如何製作一份邀請函？製作邀請函的方法（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！