怎么用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来绘制它的样式外表。

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