您现在的位置是：网站首页> 编程资料编程资料

用HTML和CSS打造属于自己的暖男“大白”纯HTML5+CSS3制作图片旋转一款利用html5和css3动画排列人物头像的实例演示2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼一款纯css3实现的鼠标经过按钮特效教程HTML5时代CSS设置漂亮字体取代图片HTML5 CSS3打造相册效果附源码下载在HTML文档中嵌入CSS的三种常用方式html+css实现登录界面附效果图html、css 禁止文字自动换行属性word-break使用css美化html表单控件详细示例(表单美化)

2023-10-09 405人已围观

简介 还记得《超能陆战队》里的 “暖男”大白么？是不是很想拥有一个？我们就利用HTML和 CSS来打造一个自己的“大白”吧！

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

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

一、准备工作

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

命名为 Baymax.html （其它名字也可以，但后缀名必须是 .html）：

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

二、编写 HTML

填写以下代码：

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html>  
  3.    <head><meta charset="utf-8"><title>Baymaxtitle>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.           
  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.         
-六神源码网