search

Home  >  Article  >  Web Front-end  >  How to create an invitation letter in html5? How to make an invitation letter (code example)

How to create an invitation letter in html5? How to make an invitation letter (code example)

青灯夜游
青灯夜游forward
2018-10-26 17:06:0110416browse

The content of this article is to introduce how to make an invitation letter in HTML5? How to create an invitation (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Purpose: Making this simple invitation letter is just to let novices get started with web development.

Before making the page, let’s take a look at the overall appearance of the entire invitation.

1. First write the HTML code

<!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>

Instructions:

23fd10257f87e3f728f3e0608c9416c4: This is shaped like a declaration of a document.

100db36a723c770d327fc0aef2ce13b1 tag: represents the beginning of html, 73a6ac4ed44ffec12cee46588e518a5e represents the end of html.

93f0f5c25f18dab9d176bd4f6de5d30e Tag: It contains a description of various attributes and configuration information of the html5 page. Therefore, it can be regarded as an "identity card" to a certain extent.

0b06b01d593eb6158ab14a0c0e15c90d tag: Use the charset of the 0b06b01d593eb6158ab14a0c0e15c90d tag to set it, and specify its character encoding as UTF-8; UTF-8 is a universal encoding form, also known as " "Universal Code".

b2386ffb911b14667cb8f0f91ea547a7 Tag: The title of the page, displayed on the browser menu bar.

6c04bd5ca3fcae76e30b72ad730ca86d Tag: Contains all content information to be presented to the viewer.

dc6dce4a544fdca2df29d5ac0ea9906b Tag: This is a common block-level element, equivalent to a container, which is often used for div css layout. Here we use it to adjust the position of the page.

4a249f0d628e2318394fd9b75b4636b1 Tag: This is a title, it has six levels from 1 to 6.

e388a4556c0f65e1904146cc1a846bee Tag: This represents a paragraph.

3499910bf9dac5ae3c52d5ede7383485 Tag: This is a link.

2. Beautify the page: CSS

1. Add a background image to the page: 

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

We are adding a background image to the page When adding a background image, the background image we select may have relatively large pixels and may not fit in our browser window; so we center the background attribute of the body in both horizontal and vertical directions, because the browser does not have it by default. The height attribute is given to the body, so the height: 100% attribute must be set to the body and the body's parent (html). Set the attribute background-size: cover on the body to realize the background image adaptively filling the full screen.

2. Add font style to the web page

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

font-family: The attribute can change the font.

color: You can change the color of the font. Since CSS has an inheritance mechanism, subsequent elements have this attribute.

3. Adjust the position of the invitation content area. 

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%);
}

First of all, we use margin: 0;padding: 0; This is a very common practice, which can clarify some of the default margin values ​​​​preset by the browser for page elements, making CSS independent control more precise.

Here we use the id selector (# id name), and we set its width to 100%; use text-ailgn:center to center its text horizontally.

So how to achieve vertical play? Positioning is used here: we need to control the top attribute of the container, which must be based on absolute positioning. To make the container absolutely positioned, its parent (body) must be set to relative positioning. Then we use the attribute to make the top 50% away from the top.

It’s not over yet, we can use the transform attribute of html5 to set translateY(-50%); that is, move it upward by half its height.

In this way, the entire container will be displayed in the center of the page.

4. Set some text fonts and sizes for its content labels. 

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

Description:

font-size: Set the font size.

text-transform:uppercase: Convert text to uppercase letters.

margin-bottom:20px : This involves the box model, which means that the bottom border has a width of 20px.

5. Make an invitation button. 

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

border: Set the border for it. The three parameters of this attribute represent the border width of 1px, solid line, and color respectively.

border-radius: Sets a 3px rounded corner for its border.

padding: the top and bottom padding is 10px; the left and right padding is 100px.

text-decoration:none : This will remove the underline of the link.

Overall css file: 

 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;
}

3. Create interaction for the page 

var btn = document.getElementById('button');
btn.onclick = function(e) {
    //preventDefault() 可以阻止单机链接后浏览器默认的URL跳转。
    e.preventDefault();     
    btn.innerHTML = "正在进入..."
    btn.style.border = "0";
}

First, we add the id as button to the 3499910bf9dac5ae3c52d5ede7383485 link.

Use document.getElementById(id name) to get a link and assign it to the variable btn.

Then add the stand-alone attribute to btn and call the execution function. 

 e.preventDefault(); //将阻止其默认的链接跳转。
btn.innerHTML = "正在进入..." //改变文本内容。
btn.style.border = "0";

The above is the detailed content of How to create an invitation letter in html5? How to make an invitation letter (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to implement a simple parkour game? (detailed code explanation)Next article：How to implement a simple parkour game? (detailed code explanation)

Related articles

See more