怎么用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定义大白身体的各个部位:
3.2 添加 CSS 样式
我们已经使用 HTML 定义好「大白」的各个元素,现在就需要利用到 CSS 来绘制它的样式外表。
由于「大白」是白色的,为了更容易辨识,我们把背景设为深色。然后首先是头部: