本课程利用 HTML 和 CSS 来打造 《超能陆战队》里的“暖男”—大白，可学习如何用 HTML 结合 CSS 来设计高端大气上档次的图，并了解 HTML 布局，CSS 构建对象样式。
本教程由BigGod发布在实验楼，完整教程、代码及在线练习地址：纯 CSS 打造网页版「大白」——https://www.shiyanlou.com/courses/328
一、实验介绍
1.1 实验内容
还记得《超能陆战队》里的 “暖男” -「大白」 么？是不是很想拥有一个？
没问题！今天我们就利用 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定义大白身体的各个部位：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Baymax</title> </head> <body>
3.2 添加 CSS 样式
我们已经使用 HTML 定义好「大白」的各个元素，现在就需要利用到 CSS 来绘制它的样式外表。
由于「大白」是白色的，为了更容易辨识，我们把背景设为深色。然后首先是头部：
<style>
body {
background: #595959;效果预览：
赶紧再来添加眼睛和嘴吧！
#eye,
#eye2 {
width: 11px;
height: 13px;
background: #282828;
border-radius: 50%;
position: relative;
top: 30px;
left: 27px;
/*旋转该元素*/一个 mini 的「大白」，雏形初现：
接下来是躯干和腹部：
#torso,
#belly {
margin: 0 auto;
height: 200px;
width: 180px;
background: #fff;
border-radius: 47%;
/*设置边框*/赋予「大白」象征生命的心脏：
#heart{
width:25px;现在的「大白」是这个样子的了：
还没有手和脚，怪萌怪萌的...「大白」需要温暖的手臂：
#left-arm,
#right-arm {
height: 270px;
width: 120px;
border-radius: 50%;
background: #fff;
margin: 0 auto;
position: relative;
top: -350px;
left: -100px;
transform: rotate(20deg);
z-index: -1;还没有手指头呢：
#l-bigfinger,
#r-bigfinger {
height: 50px;
width: 20px;
border-radius: 50%;
background: #fff;
position: relative;
top: 250px;
left: 50px;
transform: rotate(-50deg);有点意思了：
迫不及待要给「大白」加上腿了吧：
#left-leg,
#right-leg {
height: 170px;
width: 90px;
border-radius: 40% 30% 10px 45%;
background: #fff;
position: relative;
top: -640px;
left: -45px;
transform: rotate(-1deg);
z-index: -2;
margin: 0 auto;duang~ duang~ duang~ 特技完成！
3.3 完整代码
四、总结
本课程使用 div+css 画出了萌萌的大白，相信通过完成本实验能加深你对 div 布局的理解以及提高对 css 各种属性的运用能力。
五、作业
代码中还有不少重复的地方，试着进一步简化代码
运用 CSS 动画让大白的眼睛动起来
本教程的完整步骤、代码及在线练习地址——https://www.shiyanlou.com/courses/328（更多课程请查看全部 - 课程 - 实验楼）