千家信息网

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

发表于:2024-11-11 作者:千家信息网编辑
千家信息网最后更新 2024年11月11日,这篇文章主要讲解了"怎么用HTML和CSS技术打造超能陆战队的大白",文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习"怎么用HTML和CSS技术打造超能陆战
千家信息网最后更新 2024年11月11日怎么用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定义大白身体的各个部位:

Baymax

3.2 添加 CSS 样式

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

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