這篇文章帶給大家的內容是介紹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中文網其他相關文章!