html5:制作一份邀请函
一、创建首个h5页面
1、开发前的准备工作
安装VScode,软件商店免费,可直接下载
2、创建H5最基本的结构框架
<!DOCTYPE HTML> /*形同一个声明,告诉浏览器要使用标准、兼容的模式来解析渲染这个HTML页面*/
<html>
<head> /*包含了对h5页面各种属性、配置信息的描述*/
</head>
<body> /*页面的内容信息*/
</body>
</html>
3、修改<head>部分的代码
<head>
<meta charset="utf-8">
<title>HTML5学习邀请函</title> /*<head>中唯一必需的元素*/
</head>
4、修改<body>部分的代码
<body>
LET'S LEARN HTML5
</body>
保存之后打开就能看到这个简单的h5页面
二、增加必要的页面元素
1、在html的各种标签中,标题标签一共有6个,按层次分为<h1>-<h6>。既然这里面没有别的内容了,就把它冠以<h1>,修改代码如下:
<body>
<h1>LET'S LEARN HTML5</h1>
</body>
2、接着添加说明文字。说明文字本身就是一个文本段落,最好的方式是将他放到段落里,即<p>标签。修改代码如下:
<body>
<h1>LET'S LEARN HTML5</h1>
<p>发挥您的美感与想象力,探索web开发的无限可能,现诚邀您一起踏上HTML5的学习之路</p>
</body>
3、添加按钮,这个按钮实际上就是一个文本链接,单击后将跳转到某个url。链接的标签为<a>,跳转的URL就用该标签的href属性来指定。修改代码如下:
<body>
<h1>LET'S LEARN HTML5</h1>
<p>发挥您的美感与想象力,探索web开发的无限可能,现诚邀您一起踏上HTML5的学习之路</p>
<a href=“invite.php”>邀您参加</a>
</body>
4、页面中看不见的代码。页面中用“区块”放置内容,可以使整个页面井井有条。修改如下:
<body>
<div id="container">
<h1>LET'S LEARN HTML5</h1>
<p>发挥您的美感与想象力,探索web开发的无限可能,现诚邀您一起踏上HTML5的学习之路</p>
<a href=“invite.php”>邀您参加</a>
</div>
</body>
三、页面的美化
1、制作邀请函的页面背景,因为图片最终要填满整个页面,所以精度尺寸都不能太小,否则会模糊,图片以1600*1200以上的像素大小为佳。修改代码如下:
<head>
<meta charset="utf-8">
<title>HTML5学习邀请函</title>
<style type="text/css">
body{
background:url(
)/*还可以用本地图片,图片要保存在HTML文件的同一目录下*/
}
</style>
</head>
为了使背景图片能够居中而非以左上角为原点显示,还需要设置body的background属性在横向和纵向两个方向上居中。最后,浏览器默认是没有给予body高度属性的,要确保图片自适应整屏显示,需要给body·以及body的父级设置height属性,使两者在高度上充满全屏。修改样式代码如下:
html,body{
height:100%;
color:white;
}
body{
background:url(
)center center;
background-size:cover;
}
字体颜色设置为白色,此时只有链接颜色还没变,之后需要单独对链接进行操作。
2、调整邀请函内容区域的位置。为了衬托文字的重要性我们将文字放在整个页面的正中,这意味着内容区域在水平和垂直方向都需要居中,为container添加样式代码:
#container{
width:100%;
text-align:center;
}
然后开始写垂直居中
body{
background:url(
)center center;
background-size:cover;
margin:0;
padding:0;
position:relative;
}
#container{
width:100%;
text-align:center;
position:absolute;
top:50%;
} /*绝对定位要建立在父级相对定位的前提下,而top属性则建立在container的定位方式是绝对定位的前提下*/
要使内容区块整体垂直居中,还需要做的一点是使container向上方移动,当移动的距离为container内容高度的一半时,就能实现整个区块的垂直居中,但container中不确定以后是否还要加别的内容怎么办,也就是说它将是一个动态变化的值,这个时候就用到了transform属性,设置其transform-y的数值,使container在y轴上移动,即向上移动其高度的一半即可,无需声明从天儿具体有多高,修改代码如下:
3、调整邀请函的文字字体与字号
首先是文字字体的调整,不同的浏览器对字体的样式也是不一样的,为了方便和各个浏览器都适应,一般用sans-serif(系统默认的无衬线字体)
接下来调整文字的大小,将英文标题的字号放大,并变为大写,凸显标题的重要性,创建新的样式代码如下:
更改段落文字,使其字号变大,并与下方链接拉开距离:
4、制作邀请函的按钮
近年来圆角细线按钮颇为流行
四、为页面创建交互
1、创建按钮的javascript交互
h5实际上包含三种东西:HTML、css、js。
现在需要实现的功能是:点击“邀请参加”,阻止页面跳转,使文字显示为“报名成功”,背景变为绿色。
基本思路是修改按钮这个<a>连接的单击事件,在里面加入一些功能代码。而在此之前。我们需要给按钮赋予一个“名字”或“标记”,使得js能够找到这个按钮并且控制它的单击,修改index.html中的超链接标签,为其添名为“enroll”的id属性,代码如下:
html5:制作一份邀请函相关推荐
- 网页开发学习(一):制作一份邀请函
网页开发设计是在面试创新实验室时面试官给的二面试题,让自己设计实现一个简单的网页.所以我决定来做一个邀请函网页,并将开发过程写在博客上供有需要的朋友们查看. 网页开发工具有很多,我使用的是对新手较为友 ...
- html5怎么做电子请帖,如何制作H5婚礼邀请函?
H5是HTML5的简称.HTML5是HTML最新的修订版本,是一种超文本标记语言.H5有两大特点:首先,强化了 Web 网页的表现性能.其次,追加了本地数据库等 Web 应用的功能. H5页面就是利用 ...
- 婚礼答谢宴ppt模板_女儿结婚请柬制作 女儿结婚宴会邀请函模板免费
点击上方蓝字关注我们遇见你 父母嫁女儿自然喜不自胜,将养育多年的掌上明珠交到女婿的手上,这么盛大的仪式自然是需要亲朋好友的见证,这时候一份得体的结婚请柬就十分重要了,但是不知怎么制作这样一份邀请函,苦 ...
- html5爱情树怎么修改,jQuery结合HTML5制作的爱心树表白动画
HTML代码如下: 复制代码 代码如下: 程序员用HTML5制作的爱心树表白动画- 柯乐义 本页面采用HTML5技术,目前您的浏览器无法显示,请使用支持HTML5的浏览器查看本页. 亲爱的何文琪: 曾 ...
- h5 修改title 微信_h5制作小程序 邀请函模板免费
大家一定对h5邀请函不陌生,因为现在大部分婚礼.展会.活动都会采用h5邀请函.H5邀请函相对于传统实体邀请函有着低成本.高效率.制作佳的优势. h5邀请函现在在制作上也是非常方便的,我们在微信上就可以 ...
- 用c语言编写动态爱心树表白,程序员用HTML5制作的爱心树表白动画
HTML代码如下: 程序员用HTML5制作的爱心树表白动画- 柯乐义 本页面采用HTML5技术,目前您的浏览器无法显示,请使用支持HTML5的浏览器查看本页. 亲爱的何文琪: 曾经, 有一份真挚的爱情 ...
- html5表白树效果图,jQuery结合HTML5制作的爱心树表白动画
HTML代码如下: 复制代码 代码如下: 程序员用HTML5制作的爱心树表白动画- 柯乐义 本页面采用HTML5技术,目前您的浏览器无法显示,请使用支持HTML5的浏览器查看本页. 亲爱的何文琪: 曾 ...
- 用HTML5制作课程表
无论是上班族还是学生党,都需要一份类似课程表的表格来提醒我们的日程.有了它就可以不必担心自己忘记该干什么事情,到点了该干什么事情.它可以说是我们日常生活中经常接触的事物了,制作一份课程表也很简单,可以 ...
- 一份邀请函引发的中国芯片新猜想
金磊 发自 凹非寺 量子位 报道 | 公众号 QbitAI 云端AI芯片,已经成为兵家必争之地. 据ABI Research统计,从全球市场发展来看,这块"大蛋糕"将在2024年达 ...
最新文章
- 【Core Spring】二、装配beans
- Matlab 读取文件夹里所有的文件
- linux文件夹多个空格,linux-在“ for”循环中读取带有空格,带有多个输入文件的制表符的完整行...
- 第39级台阶(暴力搜索)
- 广西2021普通高考成绩查询,2021广西高考成绩什么时候出
- ReportViewer教程(4)-为报表打造数据源
- Oracle 数据块 Block 说明
- 就计算机结构与课程的论文,关于计算机组成原理的课程论文(2)
- Ubuntu 19.10 Beta 发布,正式版本定于 10 月份
- 什么是分布式垃圾回收(dgc)?它是如何工作的?_激荡60年——垃圾回收与Go的选择...
- Android开源框架ViewPageIndicator和ViewPager实现Tab导航
- Kali Linux终端命令大全(建议收藏!)
- 翻译:SWFObject 2.0官方文档
- python 用列表筛选法求素数
- JSON 标准 ECMA-404
- python从键盘输入一个字符串、将小写字母全部_从键盘输入一个字符串_将其中的小写字母全部转换成大写字母...
- 理查德30多岁开发出C语言,《C语言程序设计》多媒体教学课件开发与应用
- 关于周杰伦的歌曲的启发
- 陌上谁家年少足风流?
- 创建高性能移动 web 站点【转载】
热门文章
- 2021-01-11小米随身wifi网络创建总是失败是什么问题?
- Python--正则表达式在线验证的工具(regex)
- vmbackup和vmrestore是何方神圣?
- SpringCloud之GateWay的基础使用
- app窃取用户隐私_窃取您的隐私8步初学者指南
- 2017 Material design 第三章第三节《图像》
- 微信公众号查券返利机器人搭建教程
- git pull 拉取代码的时候报错 Pulling is not possible because you have unmerged files.
- linux su 的含义,linux su命令的真正含义,linuxsu命令
- stm32L1151用cube配置ADC