?本篇文章给大家带来的内容是介绍html5怎样制作一份约请函？制作约请函的办法（代码示例）。有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你们有所帮忙。
本篇文章给大家带来的内容是介绍html5怎样制作一份约请函？制作约请函的办法（代码示例）。有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你们有所帮忙。
目的：制作这个简易的约请函，只是为了让新手入门Web开发。
在制作页面以前，我们先来看看整个约请函的整面子貌。
一、第一编写HTML代码
约请函
hello world
欢送来到虚拟天下，在这里发挥你的想象力，摸索无穷的可能。
点击进入
注明：
：这形如一个对文档的声明。
标签：代表了对html的开端，代表着html的完毕。
标签：它包括了对html5页面各种属性，配置信息的描述。因而在某种程度上可以视为一张“身份证”。
标签：运用标签的charset来加以设定，将其字符编码指定为UTF-8;UTF-8这是一种通用编码情势，又被称为“万国码”。
标签：即页面的标题，显示在阅读器器的菜单栏上。</p><p><body> 标签：包括了所有要呈现给阅读者的内容信息。</p><p> 标签：这是一个常见的块级元素，相当于一个容器，它时常用来div+css布局。在这里我们用他来调整页面的位置。</p><p><h1> 标签：这是一个标题，他有1~6六个级别。</p><p><p> 标签：这表示一个段降。</p><p> 标签：这是一个链接。</p><p><span style="font-size: 18px;"><strong>二、页面的美化：CSS</strong></span></p><p>1、给页面增加配景图片：</p><pre class="brush:php;toolbar:false">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 class="brush:php;toolbar:false">html,body{
height: 100%;
font-family: sans-serif;
color: #801449;
}</pre><p>font-family：属性可以转变字体。</p><p>color：可以转变字体的色彩，因为css拥有继承机制，所今后续的元素都有这一属性。</p><p>3、调整约请函内容区域位置。</p><pre class="brush:php;toolbar:false">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>此刻尚无完毕,我们可以应用html5的transform属性，设定translateY(-50%);即向上挪移其高度的一半。</p><p>这样整个container将会显示在页面的正中央。</p><p>4、为其内容标签设定一些文字字体与字号。</p><pre class="brush:php;toolbar:false">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 class="brush:php;toolbar:false">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 class="brush:php;toolbar:false"> 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 class="brush:php;toolbar:false">var btn = document.getElementById('button');
btn.onclick = function(e) {
//preventDefault() 可以阻止单机链接后阅读器默许的URL跳转。
e.preventDefault();
btn.innerHTML = "正在进入..."
btn.style.border = "0";
}</pre><p> 第一我们为链接增加id为button。</p><p> 应用document.getElementById(id名)来猎取a链接，并将其赋给变量btn。</p><p> 然后为btn增加单机属性调取施行函数。</p><pre class="brush:php;toolbar:false"> e.preventDefault(); //将阻止其默许的链接跳转。
btn.innerHTML = "正在进入..." //转变文本内容。
btn.style.border = "0";</pre><p>以上就是html5怎样制作一份约请函？制作约请函的办法（代码示例）的细致内容，更多请关注 百分百源码网 其它相干文章！</p>
</div>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" src="http://www.baidow.com/ds/js/jquery.min.js"></script>
<title>打赏
打赏
扫码打赏，你说多少就多少
打开支付宝扫一扫，即可进行扫码打赏哦
百分百源码网 建议打赏1～10元，土豪随意，感谢您的阅读！
