当前第2页 返回上一页
font-size ：设置字体的大小。
text-transform:uppercase ：是文本都转化为大写字母。
margin-bottom:20px :这里牵扯到盒模型，其意思是下边框有20px的宽度。
5、制作邀请函按钮。
1 2 3 4 5 6 7 8 | a {
font-size: 18px;
color: #8f3c3c;
border: 1px solid #c66c6c;
border-radius: 3px;
padding: 10px 100px;
text-decoration: none;
}
|
border：为其设置边框，该属性的三个参数分别代表了边框宽1px，实线，颜色。
border-radius: 为其边框设置了3px的圆角。
padding：上下内边距为10px；左右内边距为100px。
text-decoration:none : 这样可以去掉链接的下划线。
整体css文件：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 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;
}
|
三、为页面创建交互
1 2 3 4 5 6 7 | var btn = document.getElementById('button');
btn.onclick = function(e) {
e.preventDefault();
btn.innerHTML = "正在进入..."
btn.style.border = "0";
}
|
首先我们为<a>链接添加id为button。
利用document.getElementById(id名)来获取a链接，并将其赋给变量btn。
然后为btn添加单机属性调用执行函数。
1 2 3 | e.preventDefault();
btn.innerHTML = "正在进入..."
btn.style.border = "0";
|
以上就是html5如何制作一份邀请函？制作邀请函的方法（代码示例）的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
HTML5生成柱状图(条形图)效果的实例代码
在h5页面中怎样调用app
h5的本地存储之indexeddb
HTML5的表单中关于所有type类型的详细介绍
详解HTML5应用中accordion三种效果的探索
js HTML5 canvas绘制图片的方法
怎么学HTML5？
HTML5多线程javascript解决方案web worker-专用worker和共享worker的详细代码介绍
HTML5中websocket是什么意思
canvas波浪效果的实现代码
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » html5如何制作一份邀请函？制作邀请函的方法（代码示例）
