怎么用HTML和CSS技术打造超能陆战队的大白

这篇文章主要讲解了"怎么用HTML和CSS技术打造超能陆战队的大白"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"怎么用HTML和CSS技术打造超能陆战队的大白"吧！

一.应用知识点

1.2 实验知识点

div 布局

CSS 相对定位

CSS 各种属性的应用

1.3 实验环境

本实验环境采用带桌面的 Ubuntu Linux 环境，实验中可能会用到桌面上的程序：

Firefox：浏览器，可以用在需要前端界面的课程里，只需要打开环境里写的 HTML/JS 页面即可；

GVim：非常好用的编辑器，最简单的用法可以参考课程 Vim编辑器

1.4 适合人群

本课程难度一般，只要你学过基本的 HTML 和 CSS 就能做出来。

二、开发准备

进入到 /home/shiyanlou/ 目录下，新建空白文档：

命名为 Baymax.html （其它名字也可以，但后缀名必须是 .html）：

使用 gedit 打开，准备编辑代码：

三、实验步骤

3.1 编写 HTML

下面通过 div定义大白身体的各个部位：

3.2 添加 CSS 样式

我们已经使用 HTML 定义好「大白」的各个元素，现在就需要利用到 CSS 来绘制它的样式外表。

由于「大白」是白色的，为了更容易辨识，我们把背景设为深色。然后首先是头部：