html5制作邀请函的方法是什么

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

成都创新互联公司2013年至今，是专业互联网技术服务公司，拥有项目成都网站建设、网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元甘井子做网站,已为上家服务,为甘井子各地企业和个人服务,联系电话:18980820575

目的：制作这个简易的邀请函，只是为了让新手入门Web开发。

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

html5制作邀请函的方法是什么

一、首先编写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://cxhlcq.com/article/jpgced.html">http://cxhlcq.com/article/jpgced.html</a> </div> </div> </div> <div class="other container"> <h3>其他资讯</h3> <ul> <li> <a href="/article/jcjogd.html">Redis之Jedis如何使用</a> </li><li> <a href="/article/jcjohi.html">PythonSpark的实现原理是什么</a> </li><li> <a href="/article/jcjoec.html">如何通过Ajax方式上传文件使用FormData进行Ajax请求</a> </li><li> <a href="/article/jcjogg.html">python爬取电影记录并生成excel表格</a> </li><li> <a href="/article/jcjops.html">什么是MyBatis框架</a> </li> </ul> </div> <div class="footer"> <div class="foota container"> <div class="foot_nav fl col-lg-8 col-md-8 col-sm-12 col-xs-12"> <ul> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>网站制作</h3> <a href="http://www.kswcd.com/mobile/" target="_blank">手机网站制作</a><a href="http://seo.cdkjz.cn/wangzhan/" target="_blank">网站制作公司</a><a href="http://www.cxjianzhan.com/" target="_blank">网站制作</a><a href="http://www.cqcxhl.com/" target="_blank">网站制作</a><a href="http://www.cxhljz.cn/" target="_blank">成都网站制作</a><a href="http://chengdu.cdcxhl.com/" target="_blank">成都网站制作</a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>企业服务</h3> <a href="https://www.cdcxhl.com/service/ssl.html" target="_blank">ssl证书</a><a href="https://www.cdcxhl.com/service/beian.html" target="_blank">网站备案</a><a href="https://www.cdcxhl.com/service/service.html" target="_blank">工商服务</a><a href="https://www.cdcxhl.com/service/gongsibiangeng.html" target="_blank">工商变更</a><a href="https://www.cdcxhl.com/shoulu/" target="_blank">网站免费收录</a><a href="https://www.cdcxhl.com/link/" target="_blank">友情链接购买</a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>网站建设</h3> <a href="https://www.cdcxhl.com/" target="_blank">成都网站建设公司</a><a href="http://www.cxhljz.com/" target="_blank">成都做网站建设公司</a><a href="https://www.cdxwcx.com/city/suining/" target="_blank">遂宁网站建设</a><a href="http://www.cxjianzhan.com/mobile/" target="_blank">手机网站建设公司</a><a href="http://www.cdweb.net/solve/" target="_blank">网站建设方案</a><a href="http://chengdu.cdcxhl.cn/H5/" target="_blank">成都响应式网站建设</a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>服务器托管</h3> <a href="https://www.cdcxhl.com/idc/gysx.html" target="_blank">贵阳三线机房</a><a href="https://www.cdcxhl.com/idc/wenjiang.html" target="_blank">温江服务器托管</a><a href="https://www.cdcxhl.com/tuoguan/zongshu/" target="_blank">成都棕树机房</a><a href="https://www.cdcxhl.com/idc/yldx.html" target="_blank">义龙电信机房</a><a href="http://www.cdxwcx.cn/tuoguan/mianyang.html" target="_blank">绵阳服务器托管</a><a href="https://www.cdcxhl.com/idc/yaan.html" target="_blank">雅安服务器托管</a> </li> </ul> </div> <div class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12"> <p>全国免费咨询:</p> <b>400-028-6601</b> <p>业务咨询：028-86922220 / 13518219792</p> <p>节假值班：18980820575 / 13518219792</p> <p>联系地址：成都市太升南路288号锦天国际A幢1002号</p> </div> </div> <div class="footb"> <div class="copy container"> <div class="fl">Copyright © 成都创新互联科技有限公司重庆分公司 <a href="https://beian.miit.gov.cn/" target="_blank">渝ICP备2021005571号</a></div>  </div> </div> <div class="link"> <div class="container"> 友情链接:： <a href="https://www.cdcxhl.com/" target="_blank">成都网站建设</a> <a href="https://www.cdcxhl.com/city/chongqing.html" target="_blank">重庆网站建设</a> <a href="">四川网站建设</a> <a href="">重庆建设网站</a> <a href="https://www.cdxwcx.com/jifang/xiyun.html" target="_blank">移动服务器托管</a> <a href="http://www.cdfuwuqi.com/" target="_blank">成都服务器托管</a> <a href="https://www.cdcxhl.cn/" target="_blank">云服务器</a> <a href="http://www.cdhuace.com/" target="_blank">广告设计制作</a> <a href="https://www.cdcxhl.com/sheji/chongqing.html" target="_blank">重庆网页设计</a> <a href="https://www.cdcxhl.com/zuo/chongqing.html" target="_blank">重庆做网站</a> <a href="https://www.cdcxhl.com/zhizuo/chongqing.html" target="_blank">重庆网站制作</a> <a href="">重庆网站建设</a> <a href="">重庆网站公司</a> <a href="">渝中网站制作</a> <a href="">重庆网站设计</a> </div> </div> </div> <div class="foot"> <ul class="public-celan"> <li> <a href="https://p.qiao.baidu.com/cps3/chatIndex?siteToken=6ce441ff9e2d6bedbdfc2a4138de449e&speedLogId=162260383240185e3_1622603832401_02407&eid=6256368&reqParam=%7B%22from%22%3A1%2C%22sessionid%22%3A%22-100%22%2C%22siteId%22%3A%2211284691%22%2C%22tid%22%3A%22-1%22%2C%22userId%22%3A%226256368%22%2C%22ttype%22%3A1%2C%22pageId%22%3A0%7D" target="_blank" class="a1 db tc"> <img src="/Public/Home/img/icon-23.png" alt="" class="db auto"> <span class="span-txt">在线咨询</span> </a> </li> <li> <a href="tel:18980820575" class="a1 db tc"> <img src="/Public/Home/img/icon-24.png" alt="" class="db auto"> <span class="span-txt">电话咨询</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="a1 db tc"> <img src="/Public/Home/img/icon-25.png" alt="" class="db auto"> <span class="span-txt">QQ咨询</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=532337155&Site=&Menu=yes" class="a1 db tc public-yuyue-up"> <img src="/Public/Home/img/icon-26.png" alt="" class="db auto"> <span class="span-txt">预约顾问</span> </a> </li> </ul> </div> <div class="customer"> <dl class="icon1"> <dt> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes"> <i class="iconT"><img src="/Public/Home/img/QQ.png" alt=""></i> <p>在线咨询</p> </a> </dt> </dl> <dl class="icon2"> <dt><i><img src="/Public/Home/img/weixin.png" alt=""></i><p>微信咨询</p></dt> <dd><img src="/Public/Home/img/ewm.png"></dd> </dl> <dl class="icon3"> <dt><i><img src="/Public/Home/img/dianhua.png" alt=""></i><p>电话咨询</p></dt> <dd> <p>028-86922220（工作日）</p> <p>18980820575（7×24）</p> </dd> </dl> <dl class="icon4"> <dt class="sShow"> <a href="tencent://message/?uin=244261566&Site=&Menu=yes"> <i><img src="/Public/Home/img/dengji.png" alt=""></i><p>提交需求</p> </a> </dt> </dl> <dl class="icon5"> <dt class="gotop"> <a href="#top"> <i><img src="/Public/Home/img/top.png" alt=""></i><p>返回顶部</p> </a> </dt> </dl> </div> </body> </html> <script> $(".con 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>