html5制作邀请函的方法是什么 - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下html5制作邀请函的方法是什么,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!

目的:制作这个简易的邀请函,只是为了让新手入门网络开发。

在制作页面之前,我们先来看看整个邀请函的整体面貌。

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=皍tf-8"祝辞　　& lt; title>邀请函& lt;/title> 　　& lt;/head> 　　& lt; body> 　　& lt; div id=癱ontainer"祝辞　　& lt; h2>你好world 　　& lt; p>欢迎来到虚拟世界,在这里发挥你的想象力,探索无限的可能灵活;/p> 　　& lt; https://www.yisu.com/zixun/a href=" # " id="按钮">点击进入　　

　　身体　　

说明:

& lt; !doctype html>:这形如一个对文档的声明。

& lt; html>标签:代表了对html的开始,& lt;/html>代表着html的结束。

& lt; head>标签:它包含了对html5页面各种属性,配置信息的描述。因此在某种程度上可以视为一张“身份证”。

& lt; meat>标签:使用& lt; meat>标签的字符集来加以设置,将其字符编码指定为utf - 8, utf - 8这是一种通用编码形式,又被称为“万国码”。

& lt; title>标签:即页面的标题,显示在浏览器器的菜单栏上。

& lt; body>标签:包含了所有要呈现给浏览者的内容信息。

& lt; div>,标签:这是一个常见的块级元素,相当于一个容器,它经常用来div + css布局。在这里我们用他来调整页面的位置。

& lt; h2>,标签:这是一个标题,他有1 ~ 6六个级别。

& lt; p>,,标签:这表示一个段落。

& lt; a>,,标签:这是一个链接。

1,给页面添加背景图片:

html,身体{ 　　高度:100%; 　　}{身体　　背景:url (/1. jpg图像)中心中心; 　　background-size:封面; 　　}

我们在给网页添加背景图片的时候,我们选取的背景图片可能像素比较大,不适应我们的浏览器窗口,所以我们给身体的背景属性在横向和纵向两个方向上居中(中心),由于浏览器默认是没有给予身体高度属性的,所以要给身体和身体的父级(html)设置高度:100%属性。在身体设置属性background-size:封面;实现背景图片自适应充满全屏。

2,为网页添加字体的样式

html,身体{ 　　高度:100%; 　　字体类型:无衬线; 　　颜色:# 801449; 　　}

字体类型:属性可以改变字体。

颜色:可以改变字体的颜色,由于css具有继承机制,所以后续的元素都有这一属性。

3,调整邀请函内容区域位置。

身体{ 　　背景:url (/1. jpg图像)中心中心; 　　background-size:封面; 　　保证金:0; 　　填充:0; 　　位置:相对; 　　{}#容器　　宽度:100%; 　　text-align:中心; 　　位置:绝对的; 　　上图:50%; 　　变换:translateY (-50%); 　　}

首先,我们使用保证金:0;填充:0;这是一个很常见的作法,能够清楚浏览器对页面元素预设的一些默认边距值,使得css自主控制更加精确。

这里我们使用id选择器(# + id名),我们设置其宽度100%,利用text-ailgn:中心,让其文本水平居中。

那么如何实现竖直剧中呢?这里就用到了定位:我们要控制容器的顶部属性,这要建立在绝对定位的前提下,而要使得容器绝对定位,就要使他的父级(身体)设置为相对,定位。之后我们利用属性,让顶部距顶50%。

现在还没有结束,我们可以利用html5的变换属性,设置translateY(-50%);即向上移动其高度的一半。

这样整个集装箱将会显示在页面的正中央。

4,为其内容标签设置一些文字字体与字号。

h2 { 　　字体大小:54 px; 　　首字母:大写; 　　margin-bottom: 20 px; 　　p {} 　　字体大小:21 px; 　　margin-bottom: 40像素; 　　一个{} 　　字体大小:18 px; 　　颜色:# 8 f3c3c; 　　}

说明:

字体大小:设置字体的大小。

首字母,大写:是文本都转化为大写字母。

margin-bottom: 20 px,:这里牵扯到盒模型,其意思是下边框有20 px的宽度。

5,制作邀请函按钮。