recherche

Maison  >  Article  >  interface Web  >  Comment créer une lettre d'invitation en html5 ? Comment faire une lettre d'invitation (exemple de code)

Comment créer une lettre d'invitation en html5 ? Comment faire une lettre d'invitation (exemple de code)

青灯夜游
青灯夜游avant
2018-10-26 17:06:0110416parcourir

Le contenu de cet article est de présenter comment réaliser une lettre d'invitation en HTML5 ? Comment créer une invitation (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Objectif : Rédiger cette simple lettre d'invitation est simplement de permettre aux novices de se lancer dans le développement Web.

Avant de créer la page, jetons un coup d’œil à l’apparence générale de l’ensemble de l’invitation.

1. Écrivez d'abord le code 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>

Instructions :

aba7b36f87decd50b18c7e3e3c150106 : Ceci a la forme d'une déclaration d'un document.

100db36a723c770d327fc0aef2ce13b1 : représente le début du html, 73a6ac4ed44ffec12cee46588e518a5e Balise

93f0f5c25f18dab9d176bd4f6de5d30e : elle contient une description de divers attributs et des informations de configuration de la page html5. Elle peut donc être considérée dans une certaine mesure comme une « carte d’identité ».

Balise 0b06b01d593eb6158ab14a0c0e15c90d : utilisez le jeu de caractères de la balise 0b06b01d593eb6158ab14a0c0e15c90d pour la définir et spécifiez son codage de caractères car UTF-8 est une forme de codage universelle, également connue sous le nom de " " ; Code universel". Balise

b2386ffb911b14667cb8f0f91ea547a7 : Le titre de la page, affiché dans la barre de menu du navigateur. Balise

6c04bd5ca3fcae76e30b72ad730ca86d : contient toutes les informations de contenu à présenter au spectateur.

Balise dc6dce4a544fdca2df29d5ac0ea9906b : il s'agit d'un élément courant au niveau du bloc, équivalent à un conteneur. Il est souvent utilisé dans la mise en page div+css. Ici, nous l'utilisons pour ajuster la position de la page.

4a249f0d628e2318394fd9b75b4636b1 Tag : Ceci est un titre, il comporte six niveaux de 1 à 6.

e388a4556c0f65e1904146cc1a846bee Balise : Cela représente un paragraphe.

3499910bf9dac5ae3c52d5ede7383485 Balise : Ceci est un lien.

2. Embellir la page : CSS

1. Ajouter une image de fond à la page : 

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

Nous sommes ici Lors de l'ajout d'une image d'arrière-plan à une page Web, l'image d'arrière-plan que nous sélectionnons peut avoir des pixels relativement grands et ne correspond pas à la fenêtre de notre navigateur ; nous centrons donc l'attribut d'arrière-plan du corps dans les directions horizontale et verticale. défaut du navigateur L'attribut height n'est pas donné au corps, donc l'attribut height: 100% doit être défini sur le corps et le parent du corps (html). Définissez l'attribut background-size: cover sur le corps pour réaliser l'image d'arrière-plan remplissant de manière adaptative le plein écran.

2. Ajouter des styles de police aux pages Web 

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

font-family : L'attribut peut changer la police.

color : Vous pouvez changer la couleur de la police. Puisque CSS a un mécanisme d'héritage, les éléments suivants ont cet attribut.

3. Ajustez la position de la zone de contenu de l'invitation. 

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

Tout d'abord, nous utilisons margin: 0;padding: 0; Il s'agit d'une pratique très courante, qui peut clarifier certaines des valeurs de marge par défaut prédéfinies par le navigateur pour les éléments de la page. , rendant le contrôle indépendant CSS plus précis.

Ici, nous utilisons le sélecteur d'identifiant (#+id name), et nous définissons sa largeur à 100 % ; utilisez text-ailgn:center pour centrer le texte horizontalement.

Alors comment réaliser un jeu vertical ? Le positionnement est utilisé ici : nous devons contrôler l'attribut top du conteneur, qui doit être basé sur un positionnement absolu. Pour que le conteneur soit positionné de manière absolue, son parent (corps) doit être défini sur un positionnement relatif. Ensuite, nous utilisons l'attribut pour éloigner les 50 % supérieurs du sommet.

Ce n'est pas encore fini, nous pouvons utiliser l'attribut transform de html5 pour définir translateY(-50%); c'est-à-dire le déplacer vers le haut de la moitié de sa hauteur.

De cette façon, l'intégralité du conteneur sera affichée au centre de la page.

4. Définissez des polices de texte et des tailles de police pour ses étiquettes de contenu. 

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

Instructions :

font-size : Définissez la taille de la police.

text-transform:uppercase : Convertit le texte en lettres majuscules.

margin-bottom:20px : Il s'agit du modèle box, ce qui signifie que la bordure inférieure a une largeur de 20px.

5. Créez un bouton d'invitation. 

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

border : définissez la bordure pour celui-ci. Les trois paramètres de cet attribut représentent respectivement la largeur de la bordure de 1 px, la ligne continue et la couleur.

border-radius : définit un coin arrondi de 3 px pour sa bordure.

remplissage : le remplissage supérieur et inférieur est de 10 px ; le remplissage gauche et droit est de 100 px.

text-decoration:none : Cela supprimera le soulignement du lien.

Fichier CSS global : 

 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. Créer une interaction pour la page. 

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

Nous ajoutons d'abord l'identifiant en tant que bouton au lien 3499910bf9dac5ae3c52d5ede7383485

Utilisez document.getElementById(id name) pour obtenir un lien et l'attribuer à la variable btn.

Ajoutez ensuite l'attribut autonome à btn et appelez la fonction d'exécution. 

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment mettre en œuvre un jeu de parkour simple ? (explication détaillée du code)Article suivant：Comment mettre en œuvre un jeu de parkour simple ? (explication détaillée du code)

Articles Liés

Voir plus