1. 计算机技术网首页
  2. html使用教程

用HTML和CSS打造属于自己的暖男“大白”分享

• html使用教程 • 阅读 4

—-想了解用HTML和CSS打造属于自己的暖男“大白”分享 的全部内容且更多的html语言教程关注<计算机技术网(www.ctvol.com)!!>

最终的成果是这样滴，是不是萌萌哒……

用HTML和CSS打造属于自己的暖男“大白”

PS：您最好对 HTML 和 CSS 有一定的了解，但如果你是小白也没关系，小白见「大白」也是可以的！

一、准备工作

进入到 /home/shiyanlou/ 目录下，新建空白文档：

用HTML和CSS打造属于自己的暖男“大白”

命名为 Baymax.html （其它免费精选名字大全也可以，但后缀名必须是 .html）：

使用 gedit 打开，准备编辑代码：

用HTML和CSS打造属于自己的暖男“大白”

二、编写 HTML

填写以下代码：

XML/HTML Code复制内容到剪贴板

  1. <!doctype html>  
  2. <html>  
  3.    <head><meta charset="utf-8"><title>Baymax</title></head>  
  4. <body>  
  5.   
  6.      <div id="baymax">  
  7.   
  8.         <!– 定义头部，包括两个眼睛、嘴 –>  
  9.         <div id="head">  
  10.             <div id="eye"></div>  
  11.             <div id="eye2"></div>  
  12.             <div id="mouth"></div>  
  13.         </div>  
  14.   
  15.         <!– 定义躯干，包括心脏 –>  
  16.         <div id="torso">  
  17.             <div id="heart"></div>  
  18.         </div>  
  19.   
  20.         <!– 定义肚子腹部，包括 cover（和躯干的连接处） –>  
  21.         <div id="belly">  
  22.             <div id="cover"></div>  
  23.         </div>  
  24.   
  25.         <!– 定义左臂，包括一大一小两个手指 –>  
  26.         <div id="left-arm">  
  27.             <div id="l-bigfinger"></div>  
  28.             <div id="l-smallfinger"></div>  
  29.         </div>  
  30.   
  31.         <!– 定义右臂，同样包括一大一小两个手指 –>  
  32.         <div id="right-arm">  
  33.             <div id="r-bigfinger"></div>  
  34.             <div id="r-smallfinger"></div>  
  35.         </div>  
  36.   
  37.         <!– 定义左腿 –>  
  38.         <div id="left-leg"></div>  
  39.   
  40.         <!– 定义右腿 –>  
  41.         <div id="right-leg"></div>  
  42.   
  43.     </div>  
  44. </body>  
  45. <html>  
  46.   

三、添加 CSS 样式

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

由于「大白」是白色的，为了更容易辨识，我们把背景设为深色。

本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址：https://www.ctvol.com/htmltutorial/490731.html

赞 (1)
0
上一篇 2020年11月13日
下一篇 2020年11月13日

精彩推荐