【前端入门必看】手把手带你打开前端的大门（涵盖HTML,CSS3,JS）

二、页面的美化

======================================================================

2.1制作贺卡的页面背景

---

下一步就是完成贺卡的美化工作，我们将使用HTML5的核心 – CSS来完成 通俗来说，HTML5相当于我们构建了一个整体的框架，而CSS就是套上了一套皮肤。这里，我准备了一张名为chun_jie.jpg的图片作为贺卡的背景，但是像素大小没整好显得尺寸偏大了很多。

注意，chun_jie.jpg这一图片文件应放在和2022.html同一路径下

如下图所示：

chun_jie.jpg:

路径：

接下来我们就要创建CSS样式：

在定义CSS样式之前，我们应该创建相应的容器来容纳这些样式。

所以我们可以在页面头部创建一个style元素来作为样式的容器。在< head >标签中，增加< style > 标签，将type属性设置为 “text/css”。代码如下：

新年贺卡

创建完容器后，我们就可以往里面添加CSS样式了。首先，将chun_jie.jpg设置为页面的背景。因为< body >中包含了所有呈现给浏览者的内容信息，因此只需要给body 创建 background样式就能设置为背景，在style中添加代码如下：

body 表示样式应用的对象事< body >标签。括号内为样式的详细内容。在浏览器中访问该页面，如下图所示：

一看这个图就知道，测试效果不尽如人意，他显得太大了。像素超过了浏览器的显示分辨率。我们应该确保图片主题填满浏览器整个区域。此外，为了让背景图片居中我们还得设置body的background属性在横向和纵向两个方向上都居中，就得添加两个" center "。最后，浏览器默认是没有给予body高度属性的，要确保图片自适应全屏要给html设置height属性，将其设置为100%，最后在body原有样式中添加background-size属性，设置为" cover "。

html{

height: 100%;

}

body{

background:url(chun_jie.jpg) center center;

background-size: cover;

}

浏览该页面有：

然后我们再改变一下字体颜色，设置为白色：

body{

background:url(chun_jie.jpg) center center;

background-size: cover;

color: #ffffff;

}

浏览该页面：

2.2调整贺卡内容区域位置

---

下面我们想要实现文字放在整个页面的正中，但是实现这一操作并没有这么简单。

首先我们实现水平方向上的居中，我们的思路是，通过设置first这个容器的宽度为100%，即横向撑满整个屏幕，然后再设置内部文字居中。代码如下：

#first{

width: 100%;

text-align: center;

}

浏览网页：

再改变竖直方向到一个合适的位置：

body{

background:url(chun_jie.jpg) center center;

background-size: cover;

color: #ffffff;

margin: 0; //用来消除浏览器对页面元素预设的一些默认边距值

padding: 0;

}

#first{

width: 100%;

text-align: center;

transform: translateY(150%); //自行动态修改

}

浏览网页看一下效果：

2.3 调整贺卡文字字体与字号

---

位置确定了，接下来修改一下字体：

h1{

font-size: 54px; //字体大小

text-transform: uppercase; //设置为大写

margin-bottom: 20px; //控制标题与下方元素的边距

}

修改后的显示效果：

同样方法，修改一下段落文字：

p{

font-size: 21px;

margin-bottom: 40px;

}

修改后的显示效果：

2.4 制作贺卡的按钮

---

现在，贺卡已经初见雏形，再来稍加修缮，下面我们制作一个" 收下红包 " 的按钮，并认识一下HTML5中另一个非常重要的样式运用 — 边框

在此我们想制作一个圆角细线按钮，接下来创建如下代码：

a{

font-size: 18px;

color: #fff;

border: 1px solid #fff; //细线边框宽度为1像素

border-radius: 3px; //圆角像素

padding: 10px 100px; //按钮垂直和水平方向的内边距

text-decoration: none; //消除链接下划线

}

让我们一起看看效果：

是不是还不错，但是到这里还远没有结束，让我们继续完善一下细节

2.5 创建一个外部CSS文件

---

不知不觉间我们已经创建了许多的CSS样式，这些都放在了< head >的 style 元素中，这样代码显得复杂，看起来就很难受。下面我们就将样式和HTML代码区分开，把所有样式都放在外部CSS文件中，然后在HTML文件中引入样式文件。

我们在代码编辑器中新建一个CSS文件，命名为css.css，放置在与2022.html同一路径下，下面我们将2022.html中的样式全部拷贝在新文件中，代码如下：

@charset “UTF-8”;

html{

height: 100%;

}

body{

background:url(chun_jie.jpg) center center;

background-size: cover;

color: #ffffff;

margin: 0;

padding: 0;

}

#first{

width: 100%;

text-align: center;

transform: translateY(150%);

}

h1{

font-size: 54px;

text-transform: uppercase;

margin-bottom: 20px;

}

p{

font-size: 21px;

margin-bottom: 40px;

}

a{

font-size: 18px;

color: #fff;

border: 1px solid #fff;

border-radius: 3px;

padding: 10px 100px;

text-decoration: none;

}

接下来，修改2022.html,去掉 < style >标签，取而代之使用< link >标签来引入CSS样式文件，代码如下：

这样将HTML文件与CSS文件区分开，文档的结构和分工就更清晰了。

修改后的2022.html全部代码如下：

Happy NewYear!

祝您虎年大吉，阖家欢乐，万事如意，心想事成！

收下红包

顶到这里，是不是已经感觉非常有成就感啦，下面才是前端基础的重点，也就是大家熟悉的javascript。

三、为页面创建交互

========================================================================

3.1 创建按钮的javascript交互

---

收下红包

接下来需要创建一个< script > 标签，后续的javascript代码都写在这个标签里，在body中添加代码如下：

Happy NewYear!

祝您虎年大吉，阖家欢乐，万事如意，心想事成！

收下红包

我们的首条javascript代码，是定义一个变量来对应 " 收下红包 " 按钮，在javascript中定义变量需要用到 var 关键字，而要对应到按钮元素，则可以使用 document 对象的 getElementByld方法来获取id为 " enroll " 所对应的元素。在 < script >中添加代码如下：

接下来修改enroll的onclick事件对应的函数。这个函数要做三件事，一是阻止单机链接后浏览器默认的URL跳转，这个通过调用事件的preventDefault方法来实现，二是将enroll的文字从" 收下红包 " 修改为 " 红包到账20元 ",这个可以通过修改enroll元素的innerHTML属性来实现，最后将enroll白色边框底色修改为绿色背景。在< script > 中添加代码如下:

enroll.onclick = function(e){ //e代表调用函数的onclick事件参数

e.preventDefault();

enroll.innerHTML = “红包到账20元”;

enroll.style.background = “#27cb8b”;

enroll.style.borderColor = “#27cb8b”;

}

单击按钮后的显示效果：