html5制作邀請(qǐng)函的方法是什么

小編給大家分享一下html5制作邀請(qǐng)函的方法是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)公司2013年至今，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元甘井子做網(wǎng)站,已為上家服務(wù),為甘井子各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

目的：制作這個(gè)簡(jiǎn)易的邀請(qǐng)函，只是為了讓新手入門(mén)Web開(kāi)發(fā)。

在制作頁(yè)面之前，我們先來(lái)看看整個(gè)邀請(qǐng)函的整體面貌。

一、首先編寫(xiě)HTML代碼




　　　
　　　邀請(qǐng)函 
  
 
　　
　　　　hello world
　　　　歡迎來(lái)到虛擬世界，在這里發(fā)揮你的想象力，探索無(wú)限的可能。 
　　　　點(diǎn)擊進(jìn)入

說(shuō)明：

：這形如一個(gè)對(duì)文檔的聲明。

標(biāo)簽：代表了對(duì)html的開(kāi)始，代表著html的結(jié)束。

標(biāo)簽：它包含了對(duì)html5頁(yè)面各種屬性，配置信息的描述。因此在某種程度上可以視為一張“身份證”。

標(biāo)簽：使用標(biāo)簽的charset來(lái)加以設(shè)置，將其字符編碼指定為UTF-8;UTF-8這是一種通用編碼形式，又被稱(chēng)為“萬(wàn)國(guó)碼”。

標(biāo)簽：即頁(yè)面的標(biāo)題，顯示在瀏覽器器的菜單欄上。</p><p><body> 標(biāo)簽：包含了所有要呈現(xiàn)給瀏覽者的內(nèi)容信息。</p><p><div> 標(biāo)簽：這是一個(gè)常見(jiàn)的塊級(jí)元素，相當(dāng)于一個(gè)容器，它經(jīng)常用來(lái)div+css布局。在這里我們用他來(lái)調(diào)整頁(yè)面的位置。</p><p><h2> 標(biāo)簽：這是一個(gè)標(biāo)題，他有1~6六個(gè)級(jí)別。</p><p><p> 標(biāo)簽：這表示一個(gè)段落。</p><p><a> 標(biāo)簽：這是一個(gè)鏈接。</p><p><strong>二、頁(yè)面的美化：CSS</strong></p><p>1、給頁(yè)面添加背景圖片：</p><pre>html,body{ height: 100%; }body { background: url(images/1.jpg) center center; background-size: cover; }</pre><p>我們?cè)诮o網(wǎng)頁(yè)添加背景圖片的時(shí)候，我們選取的背景圖片可能像素比較大，不適應(yīng)我們的瀏覽器窗口;所以我們給body的background屬性在橫向和縱向兩個(gè)方向上居中（center）,由于瀏覽器默認(rèn)是沒(méi)有給予body高度屬性的，所以要給body和body的父級(jí)（html）設(shè)置height：100%屬性。在body設(shè)置屬性background-size：cover；實(shí)現(xiàn)背景圖片自適應(yīng)充滿全屏。</p><p>2、為網(wǎng)頁(yè)添加字體的樣式</p><pre>html,body{ height: 100%; font-family: sans-serif; color: #801449; }</pre><p>font-family：屬性可以改變字體。</p><p>color：可以改變字體的顏色，由于css具有繼承機(jī)制，所以后續(xù)的元素都有這一屬性。</p><p>3、調(diào)整邀請(qǐng)函內(nèi)容區(qū)域位置。</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;這是一個(gè)很常見(jiàn)的作法，能夠清楚瀏覽器對(duì)頁(yè)面元素預(yù)設(shè)的一些默認(rèn)邊距值，使得css自主控制更加精確。</p><p>這里我們使用id選擇器（#+id名），我們?cè)O(shè)置其寬度100%；利用text-ailgn:center，讓其文本水平居中。</p><p>那么如何實(shí)現(xiàn)豎直劇中呢？這里就用到了定位：我們要控制container的top屬性，這要建立在絕對(duì)定位的前提下，而要使得container絕對(duì)定位，就要使他的父級(jí)（body）設(shè)置為相對(duì) 定位。之后我們利用屬性，讓top距頂50%。</p><p>現(xiàn)在還沒(méi)有結(jié)束,我們可以利用html5的transform屬性，設(shè)置translateY(-50%);即向上移動(dòng)其高度的一半。</p><p>這樣整個(gè)container將會(huì)顯示在頁(yè)面的正中央。</p><p>4、為其內(nèi)容標(biāo)簽設(shè)置一些文字字體與字號(hào)。</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>說(shuō)明：</p><p>font-size ：設(shè)置字體的大小。</p><p>text-transform:uppercase ：是文本都轉(zhuǎn)化為大寫(xiě)字母。</p><p>margin-bottom:20px :這里牽扯到盒模型，其意思是下邊框有20px的寬度。</p><p>5、制作邀請(qǐng)函按鈕。</p><pre>a { font-size: 18px; color: #8f3c3c; border: 1px solid #c66c6c; border-radius: 3px; padding: 10px 100px; text-decoration: none; }</pre><p>border：為其設(shè)置邊框，該屬性的三個(gè)參數(shù)分別代表了邊框?qū)?px，實(shí)線，顏色。</p><p>border-radius: 為其邊框設(shè)置了3px的圓角。</p><p>padding：上下內(nèi)邊距為10px；左右內(nèi)邊距為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>三、為頁(yè)面創(chuàng)建交互</strong></p><pre>var btn = document.getElementById('button'); btn.onclick = function(e) { //preventDefault() 可以阻止單機(jī)鏈接后瀏覽器默認(rèn)的URL跳轉(zhuǎn)。 e.preventDefault(); btn.innerHTML = "正在進(jìn)入..." btn.style.border = "0"; }</pre><p>首先我們?yōu)?a>鏈接添加id為button。</p><p>利用document.getElementById(id名)來(lái)獲取a鏈接，并將其賦給變量btn。</p><p>然后為btn添加單機(jī)屬性調(diào)用執(zhí)行函數(shù)。</p><pre> e.preventDefault(); //將阻止其默認(rèn)的鏈接跳轉(zhuǎn)。 btn.innerHTML = "正在進(jìn)入..." //改變文本內(nèi)容。 btn.style.border = "0";</pre><p>看完了這篇文章，相信你對(duì)html5制作邀請(qǐng)函的方法是什么有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！</p> <br> 網(wǎng)站標(biāo)題：html5制作邀請(qǐng)函的方法是什么 <br> 網(wǎng)頁(yè)地址：<a href="http://weahome.cn/article/jpgced.html">http://weahome.cn/article/jpgced.html</a> </div> </div> </div> <div id="squ6kqw" class="other container"> <h3>其他資訊</h3> <ul> <li> <a href="/article/dojgese.html">用java代碼寫(xiě)聊天室用java編寫(xiě)聊天程序</a> </li><li> <a href="/article/dojgejo.html">關(guān)于vb.net如何使用數(shù)組的信息</a> </li><li> <a href="/article/dojgeij.html">php怎么輸入最新數(shù)據(jù) php如何輸入數(shù)據(jù)</a> </li><li> <a href="/article/dojgegs.html">java代碼gui Java代碼規(guī)范加分號(hào)</a> </li><li> <a href="/article/dojgegg.html">怎么用mysql創(chuàng)立表格如何用mysql創(chuàng)建一個(gè)表</a> </li> </ul> </div> <div id="squ6kqw" class="footer"> <div id="squ6kqw" class="foota container"> <div id="squ6kqw" class="foot_nav fl col-lg-8 col-md-8 col-sm-12 col-xs-12"> <ul> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>網(wǎng)站制作</h3> <a target="_blank">成都網(wǎng)站制作</a><a target="_blank">成都網(wǎng)站制作</a><a target="_blank">綿陽(yáng)網(wǎng)站制作公司</a><a target="_blank">成都網(wǎng)站制作</a><a target="_blank">網(wǎng)站制作報(bào)價(jià)</a><a target="_blank">四川成都網(wǎng)站制作</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>企業(yè)服務(wù)</h3> <a target="_blank">免費(fèi)建站</a><a target="_blank">藥房許可證</a><a target="_blank">商標(biāo)注冊(cè)</a><a target="_blank">注冊(cè)公司</a><a target="_blank">400電話</a><a target="_blank">友情鏈接購(gòu)買(mǎi)</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>網(wǎng)站建設(shè)</h3> <a target="_blank">專(zhuān)業(yè)網(wǎng)站建設(shè)</a><a href="http://weahome.cn/mobile/" target="_blank">重慶手機(jī)網(wǎng)站建設(shè)</a><a target="_blank">網(wǎng)站建設(shè)</a><a target="_blank">南充網(wǎng)站建設(shè)</a><a target="_blank">德陽(yáng)網(wǎng)站建設(shè)</a><a target="_blank">成都營(yíng)銷(xiāo)網(wǎng)站建設(shè)</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>服務(wù)器托管</h3> <a target="_blank">資陽(yáng)天府云計(jì)算中心</a><a target="_blank">成都機(jī)柜租用</a><a target="_blank">綿陽(yáng)服務(wù)器托管</a><a target="_blank">服務(wù)器機(jī)柜租用</a><a target="_blank">西信服務(wù)器托管</a><a target="_blank">重慶水土雙線托管</a> </li> </ul> </div> <div id="squ6kqw" class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12"> <p>全國(guó)免費(fèi)咨詢:</p> <b>400-028-6601</b> <p>業(yè)務(wù)咨詢：028-86922220 / 13518219792</p> <p>節(jié)假值班：18980820575 / 13518219792</p> <p>聯(lián)系地址：成都市太升南路288號(hào)錦天國(guó)際A幢1002號(hào)</p> </div> </div> <div id="squ6kqw" class="footb"> <div id="squ6kqw" class="copy container"> <div id="squ6kqw" class="fl">Copyright ? 成都創(chuàng)新互聯(lián)科技有限公司重慶分公司 <a target="_blank">渝ICP備2021005571號(hào)</a></div>  </div> </div> <div id="squ6kqw" class="link"> <div id="squ6kqw" class="container"> 友情鏈接:： <a target="_blank">成都網(wǎng)站建設(shè)</a> <a target="_blank">重慶網(wǎng)站建設(shè)</a> <a href="">四川網(wǎng)站建設(shè)</a> <a href="">重慶建設(shè)網(wǎng)站</a> <a target="_blank">移動(dòng)服務(wù)器托管</a> <a target="_blank">成都服務(wù)器托管</a> <a target="_blank">云服務(wù)器</a> <a target="_blank">廣告設(shè)計(jì)制作</a> <a target="_blank">重慶網(wǎng)頁(yè)設(shè)計(jì)</a> <a target="_blank">重慶做網(wǎng)站</a> <a target="_blank">重慶網(wǎng)站制作</a> <a href="">重慶網(wǎng)站建設(shè)</a> <a href="">重慶網(wǎng)站公司</a> <a href="">渝中網(wǎng)站制作</a> <a href="">重慶網(wǎng)站設(shè)計(jì)</a> </div> </div> </div> <div id="squ6kqw" class="foot"> <ul class="public-celan"> <li> <a target="_blank" class="a1 db tc"> <img src="/Public/Home/img/icon-23.png" alt="" class="db auto"> <span id="squ6kqw" 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 id="squ6kqw" 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 id="squ6kqw" 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 id="squ6kqw" class="span-txt">預(yù)約顧問(wèn)</span> </a> </li> </ul> </div> <div id="squ6kqw" 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> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://weahome.cn/" title="真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆">真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="9zfjt" class="pl_css_ganrao" style="display: none;"><tt id="9zfjt"><listing id="9zfjt"></listing></tt><form id="9zfjt"></form><dl id="9zfjt"></dl><style id="9zfjt"><acronym id="9zfjt"><meter id="9zfjt"><tt id="9zfjt"></tt></meter></acronym></style><acronym id="9zfjt"><legend id="9zfjt"><pre id="9zfjt"><thead id="9zfjt"></thead></pre></legend></acronym><big id="9zfjt"><form id="9zfjt"></form></big><small id="9zfjt"></small><legend id="9zfjt"><ol id="9zfjt"><thead id="9zfjt"><font id="9zfjt"></font></thead></ol></legend><sub id="9zfjt"><big id="9zfjt"><address id="9zfjt"><ruby id="9zfjt"></ruby></address></big></sub><nobr id="9zfjt"></nobr><strike id="9zfjt"><acronym id="9zfjt"><meter id="9zfjt"><tt id="9zfjt"></tt></meter></acronym></strike><sup id="9zfjt"><strike id="9zfjt"></strike></sup><address id="9zfjt"></address><tt id="9zfjt"><video id="9zfjt"><dfn id="9zfjt"><var id="9zfjt"></var></dfn></video></tt><i id="9zfjt"><label id="9zfjt"></label></i><address id="9zfjt"></address><thead id="9zfjt"></thead><dfn id="9zfjt"><form id="9zfjt"><nobr id="9zfjt"><optgroup id="9zfjt"></optgroup></nobr></form></dfn><ol id="9zfjt"><ins id="9zfjt"></ins></ol><small id="9zfjt"><track id="9zfjt"></track></small><legend id="9zfjt"><sub id="9zfjt"></sub></legend><i id="9zfjt"><label id="9zfjt"></label></i><th id="9zfjt"><strike id="9zfjt"></strike></th><output id="9zfjt"><mark id="9zfjt"><font id="9zfjt"><output id="9zfjt"></output></font></mark></output><big id="9zfjt"><font id="9zfjt"><track id="9zfjt"><u id="9zfjt"></u></track></font></big><meter id="9zfjt"></meter><sub id="9zfjt"></sub><i id="9zfjt"><address id="9zfjt"></address></i><meter id="9zfjt"></meter><listing id="9zfjt"></listing><strong id="9zfjt"><ol id="9zfjt"><ins id="9zfjt"><pre id="9zfjt"></pre></ins></ol></strong><legend id="9zfjt"></legend><sup id="9zfjt"></sup><strong id="9zfjt"><sub id="9zfjt"></sub></strong><label id="9zfjt"><dl id="9zfjt"></dl></label><b id="9zfjt"><label id="9zfjt"><menuitem id="9zfjt"><form id="9zfjt"></form></menuitem></label></b><rp id="9zfjt"><legend id="9zfjt"></legend></rp><dfn id="9zfjt"></dfn><legend id="9zfjt"></legend><th id="9zfjt"><style id="9zfjt"><acronym id="9zfjt"><legend id="9zfjt"></legend></acronym></style></th><acronym id="9zfjt"><p id="9zfjt"><var id="9zfjt"><u id="9zfjt"></u></var></p></acronym><b id="9zfjt"><progress id="9zfjt"></progress></b><font id="9zfjt"><div id="9zfjt"><ol id="9zfjt"><label id="9zfjt"></label></ol></div></font><thead id="9zfjt"><label id="9zfjt"><strong id="9zfjt"><track id="9zfjt"></track></strong></label></thead><form id="9zfjt"></form><acronym id="9zfjt"><legend id="9zfjt"><dfn id="9zfjt"><u id="9zfjt"></u></dfn></legend></acronym><strike id="9zfjt"><label id="9zfjt"><strong id="9zfjt"><track id="9zfjt"></track></strong></label></strike><font id="9zfjt"></font><small id="9zfjt"><output id="9zfjt"><span id="9zfjt"><thead id="9zfjt"></thead></span></output></small><form id="9zfjt"><rp id="9zfjt"></rp></form></div> </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; //絕對(duì)路徑 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>