html5制作邀請函的方法是什么

發(fā)布時(shí)間：2020-08-31 13:46:24 來源：億速云閱讀：163 作者：小新欄目：web開發(fā)

小編給大家分享一下html5制作邀請函的方法是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

目的：制作這個簡易的邀請函，只是為了讓新手入門Web開發(fā)。

在制作頁面之前，我們先來看看整個邀請函的整體面貌。

html5制作邀請函的方法是什么

一、首先編寫HTML代碼

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

說明：

<!doctype html> ：這形如一個對文檔的聲明。

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

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

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

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

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

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

<h2> 標(biāo)簽：這是一個標(biāo)題，他有1~6六個級別。

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

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

二、頁面的美化：CSS

1、給頁面添加背景圖片：

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

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

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

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

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

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

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

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

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

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

這樣整個container將會顯示在頁面的正中央。

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

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 ：設(shè)置字體的大小。

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

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：為其設(shè)置邊框，該屬性的三個參數(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%);
}
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;
}

三、為頁面創(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)?lt;a>鏈接添加id為button。

利用document.getElementById(id名)來獲取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制作邀請函的方法是什么有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

html5制作邀請函的方法是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽