html5制作邀请函的方法是什么-创新互联
小编给大家分享一下html5制作邀请函的方法是什么，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！
成都创新互联专注于门源企业网站建设,
自适应网站建设,
商城网站定制开发。门源网站建设公司,为门源等地区提供建站服务。全流程按需网站设计，专业设计，全程项目跟踪，
成都创新互联专业和态度为您提供的服务
目的：制作这个简易的邀请函，只是为了让新手入门Web开发。
在制作页面之前，我们先来看看整个邀请函的整体面貌。
一、首先编写HTML代码
邀请函
hello world
欢迎来到虚拟世界，在这里发挥你的想象力，探索无限的可能。
点击进入
说明：
：这形如一个对文档的声明。
标签：代表了对html的开始，代表着html的结束。
标签：它包含了对html5页面各种属性，配置信息的描述。因此在某种程度上可以视为一张“身份证”。
标签：使用标签的charset来加以设置，将其字符编码指定为UTF-8;UTF-8这是一种通用编码形式，又被称为“万国码”。
标签：即页面的标题，显示在浏览器器的菜单栏上。</p><p><body> 标签：包含了所有要呈现给浏览者的内容信息。</p><p><div> 标签：这是一个常见的块级元素，相当于一个容器，它经常用来div+css布局。在这里我们用他来调整页面的位置。</p><p><h2> 标签：这是一个标题，他有1~6六个级别。</p><p><p> 标签：这表示一个段落。</p><p><a> 标签：这是一个链接。</p><p><strong>二、页面的美化：CSS</strong></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>现在还没有结束,我们可以利用html5的transform属性，设置translateY(-50%);即向上移动其高度的一半。</p><p>这样整个container将会显示在页面的正中央。</p><p>4、为其内容标签设置一些文字字体与字号。</p><pre>h2 {
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><strong>整体css文件：<em></em></strong></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%);
}
h2 {
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><strong>三、为页面创建交互</strong></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>看完了这篇文章，相信你对html5制作邀请函的方法是什么有了一定的了解，想了解更多相关知识，欢迎关注创新互联网站制作公司行业资讯频道，感谢各位的阅读！</p> <br>
分享标题：html5制作邀请函的方法是什么-创新互联 <br>
文章转载：<a href="http://csdahua.cn/article/dhsdoo.html">http://csdahua.cn/article/dhsdoo.html</a>
</div>
<div class="view-qrocde cl">
<div class="m z"><img src="/Public/Home/images/ew.jpg"/></div>
<div class="text">
<h6>扫二维码与项目经理沟通</h6>
<p>我们在微信上24小时期待你的声音</p>
<p>解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流</p>
</div>
</div>
<div class="othernews cl">
<h3>其他资讯</h3>
<ul>
<li><a href="/article/doghcgd.html">mysql唯一怎么打 mysql唯一怎么写</a></li><li><a href="/article/doghcis.html">c语言主副函数怎么表示 c语言中主函数的定义 概念</a></li><li><a href="/article/doghcej.html">提高效率的linux命令 linux系统性能调优</a></li><li><a href="/article/doghcdc.html">mysql怎么删除用户 mysql57怎么删除</a></li><li><a href="/article/doghccc.html">wordpress建字段 wordpress文章编辑器</a></li> </ul>
</div>
</div>
</div>
<div class="sidebar">
<div class="tuijian">
<a href="#">
<h2 class="cl"><span>行业动态</span></h2>
<h3>企业网站建设的重要性！</h3>
<p>现在虽然是移动互联网时代，但企业网站依然重要，包含PC站点，移动站。可以说企业网站关系企业的未来发展和前途，尤其对中小企业更是如此，一些中小企业老板，对自己的名片很在乎，因为这是个门面。...</p>
</a>
</div>
<div class="ser sidesub">
<h2>服务项目</h2>
<ul class="ebox">
<li class="sub sub-1">
<div>
<h3>网站建设</h3>
<p></p>
<a class="btn" href="/serve/website/">查看详情</a>
</div>
</li>
<li class="sub sub-1">
<div>
<h3>移动端/APP</h3>
<p></p>
<a class="btn" href="/serve/moblie/">查看详情</a>
</div>
</li>
<li class="sub sub-1">
<div>
<h3>微信/小程序</h3>
<p></p>
<a class="btn" href="/serve/small/">查看详情</a>
</div>
</li>
<li class="sub sub-1">
<div>
<h3>技术支持</h3>
<p></p>
<a class="btn" href="/serve/tech/">查看详情</a>
</div>
</li>
<li class="sub sub-1">
<div>
<h3>其它服务</h3>
<p></p>
<a class="btn" href="/serve/othe/">查看详情</a>
</div>
</li>
<li class="sub sub-5">
<div>
<h3>更多服务项目</h3>
<p> <a>用我们的专业和诚信赢得您的信赖，从PC到移动互联网均有您想要的服务！</a></p>
<a class="btn" href="/serve/">获取更多</a>
</div>
</li>
</ul>
</div>
<div class="contact" id="fix">
<h2 class="cl"> <span>联系吧</span> <a href="https://map.baidu.com/" class="ditu" rel="nofollow" target="_blank">在百度地图上找到我们</a> </h2>
<h3>电话：13518219792</h3>
<p>如遇占线或暂未接听请拨：136xxx98888</p>
<div class="qq"> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">业务咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">技术咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">售后服务</a> </div>
</div>
</div>
<script>
//固定滚动
(function () {
var oDiv = document.getElementById("fix");
var H = 120,
iE6;
var Y = oDiv;
while (Y) {
H += Y.offsetTop;
Y = Y.offsetParent
};
iE6 = window.ActiveXObject && !window.XMLHttpRequest;
if (!iE6) {
window.onscroll = function ()
{
var s = document.body.scrollTop || document.documentElement.scrollTop;
if (s > H) {
oDiv.className = "contact fixed";
if (iE6) {
oDiv.style.top = (s - H) + "px";
}
} else {
oDiv.className = "contact ";
}
};
}
})();
</script>
</div>
<div class="footer">
<div class="wp">
<div class="wpss cl">
<dl class="about">
<dt>网站制作</dt>
<dd><a href="http://www.cqcxhl.com/" target="_blank" title="重庆网站制作">重庆网站制作</a></dd><dd><a href="http://m.xwcx.net/" target="_blank" title="H5网站制作">H5网站制作</a></dd><dd><a href="http://www.cxjianzhan.com/" target="_blank" title="网站制作">网站制作</a></dd><dd><a href="http://m.cdcxhl.com/" target="_blank" title="成都网站制作">成都网站制作</a></dd> </dl>
<dl class="about">
<dt>网站建设</dt>
<dd><a href="https://www.cdxwcx.com/city/guangan/" target="_blank" title="广安网站建设">广安网站建设</a></dd><dd><a href="http://chengdu.cdcxhl.com/dingzhi/" target="_blank" title="定制网站建设">定制网站建设</a></dd><dd><a href="https://www.cdcxhl.com/" target="_blank" title="成都网站建设公司">成都网站建设公司</a></dd><dd><a href="http://www.cdkjz.cn/wangzhan/menhu/" target="_blank" title="成都门户网站建设">成都门户网站建设</a></dd> </dl>
<dl class="about">
<dt>网站设计</dt>
<dd><a href="https://www.cdxwcx.com/" target="_blank" title="做网站设计">做网站设计</a></dd><dd><a href="http://chengdu.cdcxhl.cn/qiye/" target="_blank" title="企业网站设计">企业网站设计</a></dd><dd><a href="http://www.cdweb.net/" target="_blank" title="成都网站设计">成都网站设计</a></dd><dd><a href="http://www.cdxwcx.cn/sheji/" target="_blank" title="网站设计公司">网站设计公司</a></dd> </dl>
<dl class="contact">
<dt>联系我们</dt>
<dd>电话：13518219792</dd>
<dd>邮箱：631063699@qq.com</dd>
<dd>地址：成都青羊区锦天国际1002号</dd>
<dd>网址：www.csdahua.cn</dd>
</dl>
<dl class="flow">
<dt></dt>
<div class="ma cl">
<div class="m"> <img src="/Public/Home/images/ew.jpg" />
<p>微信二维码</p>
</div>
</div>
</dl>
</div>
</div>
<div class="footer-link wp">
<ul class="wpss cl">
<li class="fisrt">友情链接</li>
<li><a href="http://www.njzdgg.com/" title="内江广告" target="_blank">内江广告</a></li><li><a href="https://www.xwcx.net/jigui.html" title="成都机柜租用" target="_blank">成都机柜租用</a></li><li><a href="https://www.cdcxhl.com/" title="网站设计" target="_blank">网站设计</a></li><li><a href="http://www.cdkjz.cn/" title="成都网站设计" target="_blank">成都网站设计</a></li><li><a href="http://www.4006tel.net/mobile/" title="手机APP开发" target="_blank">手机APP开发</a></li><li><a href="http://www.cdkjz.cn/wangzhan/pinpai/" title="成都品牌网站建设" target="_blank">成都品牌网站建设</a></li><li><a href="http://m.cdcxhl.cn/shop/" title="成都商城网站建设公司" target="_blank">成都商城网站建设公司</a></li><li><a href="http://m.cdcxhl.cn/seo/
" title="成都网站优化" target="_blank">成都网站优化</a></li><li><a href="http://www.cxhlcq.com/seo/" title="重庆网站营销" target="_blank">重庆网站营销</a></li><li><a href="http://www.cxjianzhan.com/custom/" title="建站定制开发" target="_blank">建站定制开发</a></li> </ul>
</div>
</div>
<div class="bot-footer">
<div class="wp">
<p class="wpss"> <em>Copyright © 2002-2023 www.csdahua.cn 快上网建站品牌 QQ：244261566 版权所有</em> <em>备案号：<a href="http://beian.miit.gov.cn/" rel="external nofollow">蜀ICP备19037934号</a></em>
</p>
<p class="wpss" style="line-height:30px !important;"> </p>
</div>
</div>
<div class="footer-kefu">
<ul>
<li class="qq"><a href="https://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><em></em>在线咨询</a>
</li>
<li class="tel"><a href="tel:13518219792" target="_blank"><em></em>13518219792</a></li>
<li class="wx"> <em></em>
<div class="code"> <img src="/Public/Home/images/ew.jpg" />
<p>微信二维码</p>
</div>
</li>
<li class="m"> <em></em>
<div class="code"> <img src="/Public/Home/images/ew.jpg" />
<p>移动版官网</p>
</div>
</li>
<li class="top"><em></em></li>
</ul>
</div>
<script src="/Public/Home/js/all.js"></script>
</body>
</html>
<script>
$(".cont img").each(function(){
var src = $(this).attr("src"); //获取图片地址
var str=new RegExp("http");
var result=str.test(src);
if(result==false){
var url = "https://www.cdcxhl.com"+src; //绝对路径
$(this).attr("src",url);
}
});
window.onload=function(){
document.oncontextmenu=function(){
return false;
}
}
</script> 