百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> html5怎样制作一份约请函?制作约请函的办法(代码示例)-
分享文章到:

html5怎样制作一份约请函?制作约请函的办法(代码示例)-

发布时间:09/01 来源:未知 浏览: 关键词:
?本篇文章给大家带来的内容是介绍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元,土豪随意,感谢您的阅读!

共有150人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板