目的：制作這個(gè)簡(jiǎn)易的邀請(qǐng)函，只是為了讓新手入門(mén)Web開(kāi)發(fā)。

在制作頁(yè)面之前，我們先來(lái)看看整個(gè)邀請(qǐng)函的整體面貌。

一、首先編寫(xiě)HTML代碼

 !DOCTYPE html  html  head  meta charset= utf-8  title 邀請(qǐng)函 /title  /head  body  div id= container  h1 hello world /h1  p 歡迎來(lái)到虛擬世界，在這里發(fā)揮你的想象力，探索無(wú)限的可能。 /p  a href= # id= button 點(diǎn)擊進(jìn)入 /a  /div  /body  /html 

說(shuō)明：

!doctype html ：這形如一個(gè)對(duì)文檔的聲明。

html 標(biāo)簽：代表了對(duì)html的開(kāi)始， /html 代表著html的結(jié)束。

head 標(biāo)簽：它包含了對(duì)html5頁(yè)面各種屬性，配置信息的描述。因此在某種程度上可以視為一張“身份證”。

meat 標(biāo)簽：使用 meat 標(biāo)簽的charset來(lái)加以設(shè)置，將其字符編碼指定為UTF-8;UTF-8這是一種通用編碼形式，又被稱為“萬(wàn)國(guó)碼”。

title 標(biāo)簽：即頁(yè)面的標(biāo)題，顯示在瀏覽器器的菜單欄上。

body 標(biāo)簽：包含了所有要呈現(xiàn)給瀏覽者的內(nèi)容信息。

div 標(biāo)簽：這是一個(gè)常見(jiàn)的塊級(jí)元素，相當(dāng)于一個(gè)容器，它經(jīng)常用來(lái)div+css布局。在這里我們用他來(lái)調(diào)整頁(yè)面的位置。

h1 標(biāo)簽：這是一個(gè)標(biāo)題，他有1~6六個(gè)級(jí)別。

p 標(biāo)簽：這表示一個(gè)段落。

a 標(biāo)簽：這是一個(gè)鏈接。

二、頁(yè)面的美化：CSS

1、給頁(yè)面添加背景圖片：

html,body{ height: 100%;}body { background: url(images/1.jpg) center center; background-size: cover;}

我們?cè)诮o網(wǎng)頁(yè)添加背景圖片的時(shí)候，我們選取的背景圖片可能像素比較大，不適應(yīng)我們的瀏覽器窗口;所以我們給body的background屬性在橫向和縱向兩個(gè)方向上居中（center）,由于瀏覽器默認(rèn)是沒(méi)有給予body高度屬性的，所以要給body和body的父級(jí)（html）設(shè)置height：100%屬性。在body設(shè)置屬性background-size：cover；實(shí)現(xiàn)背景圖片自適應(yīng)充滿全屏。

2、為網(wǎng)頁(yè)添加字體的樣式

html,body{ height: 100%; font-family: sans-serif; color: #801449;}

font-family：屬性可以改變字體。

color：可以改變字體的顏色，由于css具有繼承機(jī)制，所以后續(xù)的元素都有這一屬性。

3、調(diào)整邀請(qǐng)函內(nèi)容區(qū)域位置。

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;這是一個(gè)很常見(jiàn)的作法，能夠清楚瀏覽器對(duì)頁(yè)面元素預(yù)設(shè)的一些默認(rèn)邊距值，使得css自主控制更加精確。

這里我們使用id選擇器（#+id名），我們?cè)O(shè)置其寬度100%；利用text-ailgn:center，讓其文本水平居中。

那么如何實(shí)現(xiàn)豎直劇中呢？ 這里就用到了定位：我們要控制container的top屬性，這要建立在絕對(duì)定位的前提下，而要使得container絕對(duì)定位，就要使他的父級(jí)（body）設(shè)置為相對(duì) 定位。 之后我們利用屬性，讓top距頂50%。

現(xiàn)在還沒(méi)有結(jié)束,我們可以利用html5的transform屬性，設(shè)置translateY(-50%);即向上移動(dòng)其高度的一半。

這樣整個(gè)container將會(huì)顯示在頁(yè)面的正中央。

4、為其內(nèi)容標(biāo)簽設(shè)置一些文字字體與字號(hào)。

h1 { font-size: 54px; text-transform: uppercase; margin-bottom: 20px; font-size: 21px; margin-bottom: 40px; font-size: 18px; color: #8f3c3c;}

說(shuō)明：

font-size ：設(shè)置字體的大小。

text-transform:uppercase ：是文本都轉(zhuǎn)化為大寫(xiě)字母。

margin-bottom:20px :這里牽扯到盒模型，其意思是下邊框有20px的寬度。

5、制作邀請(qǐng)函按鈕。

a { font-size: 18px; color: #8f3c3c; border: 1px solid #c66c6c; border-radius: 3px; padding: 10px 100px; text-decoration: none;}

border：為其設(shè)置邊框，該屬性的三個(gè)參數(shù)分別代表了邊框?qū)?px，實(shí)線，顏色。

border-radius: 為其邊框設(shè)置了3px的圓角。

padding：上下內(nèi)邊距為10px；左右內(nèi)邊距為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%); font-size: 54px; text-transform: uppercase; margin-bottom: 20px; font-size: 21px; margin-bottom: 40px; font-size: 18px; color: #8f3c3c; border: 1px solid #c66c6c; border-radius: 3px; padding: 10px 100px; text-decoration: none;}

三、為頁(yè)面創(chuàng)建交互

var btn = document.getElementById( button btn.onclick = function(e) { //preventDefault() 可以阻止單機(jī)鏈接后瀏覽器默認(rèn)的URL跳轉(zhuǎn)。 e.preventDefault();  btn.innerHTML = 正在進(jìn)入...  btn.style.border = 0 }

首先我們?yōu)?a 鏈接添加id為button。

利用document.getElementById(id名)來(lái)獲取a鏈接，并將其賦給變量btn。

然后為btn添加單機(jī)屬性調(diào)用執(zhí)行函數(shù)。

 e.preventDefault(); //將阻止其默認(rèn)的鏈接跳轉(zhuǎn)。btn.innerHTML = 正在進(jìn)入... //改變文本內(nèi)容。btn.style.border = 0 

以上就是html5如何制作一份邀請(qǐng)函？制作邀請(qǐng)函的方法（代碼示例）的詳細(xì)內(nèi)容，其它編程語(yǔ)言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。