首页 >web前端 >H5教程 >html5如何制作一份邀请函?制作邀请函的方法(代码示例)

html5如何制作一份邀请函?制作邀请函的方法(代码示例)

青灯夜游
青灯夜游转载
2018-10-26 17:06:0110439浏览

本篇文章给大家带来的内容是介绍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>

说明:

aba7b36f87decd50b18c7e3e3c150106 :这形如一个对文档的声明。

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删除