本篇文章给大家带来的内容是介绍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>
说明：
：这形如一个对文档的声明。
标签：代表了对html的开始，代表着html的结束。
标签：它包含了对
html5页面各种属性，配置信息的描述。因此在某种程度上可以视为一张“身份证”。
标签：使用标签的charset来加以设置，将其字符编码指定为UTF-8;UTF-8这是一种通用编码形式，又被称为“万国码”。
标签：即页面的标题，显示在浏览器器的菜单栏上。</p><p><body> 标签：包含了所有要呈现给浏览者的内容信息。</p><p><div> 标签：这是一个常见的块级元素，相当于一个容器，它经常用来div+css布局。在这里我们用他来调整页面的位置。</p><p><h1> 标签：这是一个标题，他有1~6六个级别。</p><p><p> 标签：这表示一个段落。</p><p><a> 标签：这是一个链接。</p><p><span style="font-size: 18px;"><strong>二、页面的美化：CSS</strong></span></p><p>1、给页面添加背景图片：</p><pre>html,body{
height: 100%;
}body {
background: url(images/1.jpg) center center;
background-size: cover;
}</pre><p>我们在给网页添加背景图片的时候，我们选取的背景图片可能像素比较大，不适应我们的浏览器窗口;所以我们给body的background属性在横向和纵向两个方向上居中（center）,由于浏览器默认是没有给予body高度属性的，所以要给body和body的父级（html）设置height：100%属性。在body设置属性background-size：cover；实现背景图片自适应充满全屏。</p><p>2、为网页添加字体的样式</p><pre>html,body{
height: 100%;
font-family: sans-serif;
color: #801449;
}</pre><p>font-family：属性可以改变字体。</p><p>color：可以改变字体的颜色，由于css具有继承机制，所以后续的元素都有这一属性。</p><p>3、调整邀请函内容区域位置。</p><pre>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%);
}</pre><p>首先，我们使用margin: 0;padding: 0;这是一个很常见的作法，能够清楚浏览器对页面元素预设的一些默认边距值，使得css自主控制更加精确。</p><p>这里我们使用id选择器（#+id名），我们设置其宽度100%；利用text-ailgn:center，让其文本水平居中。</p><p>那么如何实现竖直剧中呢？ 这里就用到了定位：我们要控制container的top属性，这要建立在绝对定位的前提下，而要使得container绝对定位，就要使他的父级（body）设置为相对 定位。 之后我们利用属性，让top距顶50%。</p><p>现在还没有结束,我们可以利用<a href="/tag-news-name-html5-p-1.html">html5</a>的transform属性，设置translateY(-50%);即向上移动其高度的一半。</p><p>这样整个container将会显示在页面的正中央。</p><p>4、为其内容标签设置一些文字字体与字号。</p><pre>h1 {
font-size: 54px;
text-transform: uppercase;
margin-bottom: 20px;
}p {
font-size: 21px;
margin-bottom: 40px;
}a {
font-size: 18px;
color: #8f3c3c;
}</pre><p>说明：</p><p> font-size ：设置字体的大小。</p><p> text-transform:uppercase ：是文本都转化为大写字母。</p><p> margin-bottom:20px :这里牵扯到盒模型，其意思是下边框有20px的宽度。</p><p>5、制作邀请函按钮。</p><pre>a {
font-size: 18px;
color: #8f3c3c;
border: 1px solid #c66c6c;
border-radius: 3px;
padding: 10px 100px;
text-decoration: none;
}</pre><p> border：为其设置边框，该属性的三个参数分别代表了边框宽1px，实线，颜色。</p><p> border-radius: 为其边框设置了3px的圆角。</p><p> padding：上下内边距为10px；左右内边距为100px。</p><p> text-decoration:none : 这样可以去掉链接的下划线。</p><p><span style="font-size: 16px;"><strong> 整体css文件：<em> </em></strong></span></p><pre> 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;
}</pre><p><span style="font-size: 18px;"><strong>三、为页面创建交互</strong></span></p><pre>var btn = document.getElementById('button');
btn.onclick = function(e) {
//preventDefault() 可以阻止单机链接后浏览器默认的URL跳转。
e.preventDefault();
btn.innerHTML = "正在进入..."
btn.style.border = "0";
}</pre><p> 首先我们为<a>链接添加id为button。</p><p> 利用document.getElementById(id名)来获取a链接，并将其赋给变量btn。</p><p> 然后为btn添加单机属性调用执行函数。</p><pre> e.preventDefault(); //将阻止其默认的链接跳转。
btn.innerHTML = "正在进入..." //改变文本内容。
btn.style.border = "0";</pre>
<p>以上就是<a href="/tag-news-name-html5-p-1.html">html5</a>如何制作一份邀请函？制作邀请函的方法（代码示例）的详细内容，更多请关注其它相关文章！</p>
<button type="button" class="ask_text test-iframe-handle">
</button>
</div>
</article>
<script type="text/javascript" src="/index.php?s=hits-show-id-42063-type-insert-sid-news" charset="utf-8"></script><aside class="swnetnews">
<div class="lis">
<span><i>推荐内容</i></span>
<ul>
<li><a href="/doc/1372.html" title="浅谈WEB页面工具语言XML(一)产生背景" target="_blank">浅谈WEB页面工具语言XML(一)产生背景</a></li><li><a href="/doc/1040.html" title="详细介绍XML技术上传文件" target="_blank">详细介绍XML技术上传文件</a></li><li><a href="/doc/10843.html" title="windows系统如何分区" target="_blank">windows系统如何分区</a></li><li><a href="/doc/9761.html" title="win10快捷调亮度组合键是什么？" target="_blank">win10快捷调亮度组合键是什么？</a></li><li><a href="/doc/3142.html" title="聊聊golang翻转链表" target="_blank">聊聊golang翻转链表</a></li><li><a href="/doc/9422.html" title="十行 Python 代码实现酷炫功能" target="_blank">十行 Python 代码实现酷炫功能</a></li><li><a href="/doc/10444.html" title="php类型转换函数有哪些" target="_blank">php类型转换函数有哪些</a></li><li><a href="/doc/6703.html" title="教你玩转linux下部署php项目-Apache、php、mysql关联（分享）" target="_blank">教你玩转linux下部署php项目-Apache、php、mysql关联（分享）</a></li><li><a href="/doc/2531.html" title="Python Flask大刀解决跨域问题" target="_blank">Python Flask大刀解决跨域问题</a></li><li><a href="/doc/8047.html" title="redis怎么扩容" target="_blank">redis怎么扩容</a></li> </ul>
</div>
</aside>
</main>
<script>
// first, find all the div.code blocks
document.querySelectorAll('pre').forEach(el => {
// then highlight each
hljs.highlightElement(el);
hljs.lineNumbersBlock(el);
});
</script>
<link rel="stylesheet" type="text/css" href="/kan/css/basezb.css">
<script type="text/javascript" src="/kan/js/read.js"></script>
<div style="display:none">
<div class="login-box" id="login-dialog">
<div class="login-top"><a rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div>
<div class="login-form" id="nav-signin">
<!-- <div class="login-ico"><a rel="nofollow" class="qq" id="qqlogin" target="_blank" href="/user-center-qqlogin.html"> QQ </a></div> -->
<div class="login-box-form" id="con_login_1">
<form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;">
<p class="int-text">
<input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p>
<p class="int-text">
<input class="password1" type="password" id="password" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" >
</p>
<p class="int-info">
<label class="ui-label"> </label>
<label for="agreement" class="ui-label-checkbox">
<input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000">
<input type="hidden" name="notforward" id="notforward" value="1">
<input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label>
<a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p>
<p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/kan/js/foot_js.js"></script>
<div id="footer">
<div class="w1200">
<p class="tips_text">本网站为非赢利性站点，本网站所有内容均来源于互联网相关站点自动搜索采集信息，相关链接已经注明来源。</p>
<p class="tips_text">Copyright © 2004-2018 https://www.sxiaw.com. All Rights Reserved.<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?fa236be8ec7680639fbd4ee307fd0c69";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<a href="http://beian.miit.gov.cn/" target="_blank">津ICP备2023001793号-1</a><a href="https://sxiaw.com/gb-p-1.html" target="_blank">问题反馈</a></p>
</div>
</div>
</body>
</html> 