网页制作 发布日期:2024/12/26 浏览次数:1
最终的成果是这样滴,是不是萌萌哒……
PS:您最好对 HTML 和 CSS 有一定的了解,但如果你是小白也没关系,小白见「大白」也是可以的!
一、准备工作
进入到 /home/shiyanlou/ 目录下,新建空白文档:
命名为 Baymax.html (其它名字也可以,但后缀名必须是 .html):
使用 gedit 打开,准备编辑代码:
二、编写 HTML
填写以下代码:
三、添加 CSS 样式
我们已经使用 HTML 定义好「大白」的各个元素,现在就需要利用到 CSS 来绘制它的样式外表。
由于「大白」是白色的,为了更容易辨识,我们把背景设为深色。
然后首先是头部:
CSS Code复制内容到剪贴板效果预览:
赶紧再来添加眼睛和嘴吧!
CSS Code复制内容到剪贴板一个 mini 的「大白」,雏形初现:
接下来是躯干和腹部:
CSS Code复制内容到剪贴板赋予「大白」象征生命的心脏:
CSS Code复制内容到剪贴板现在的「大白」是这个样子的了:
还没有手和脚,怪萌怪萌的...「大白」需要温暖的手臂:
CSS Code复制内容到剪贴板还没有手指头呢:
CSS Code复制内容到剪贴板有点意思了:
迫不及待要给「大白」加上腿了吧:
CSS Code复制内容到剪贴板duang~ duang~ duang~ 特技完成!
属于你的暖男大白来到了你的身边,是不是特有安全感哦!