最終的成果是這樣滴,是不是萌萌哒……
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~ 特技完成!
屬於你的暖男大白來到了你的身邊,是不是特有安全感哦!