首頁  >  文章  >  web前端  >  html5如何製作一份邀請函?製作邀請函的方法(程式碼範例)

html5如何製作一份邀請函?製作邀請函的方法(程式碼範例)

青灯夜游
青灯夜游轉載
2018-10-26 17:06:0110400瀏覽

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

陳述:
本文轉載於:cnblogs.com。如有侵權,請聯絡admin@php.cn刪除