怎样用HTML和CSS做出大白-html教程-PHP中文网

首页

web前端

html教程

怎样用HTML和CSS做出大白

php中世界最好的语言

Jan 24, 2018 am 09:40 AM

csshtml

这次给大家带来怎样用HTML和CSS做出大白，用HTML和CSS做出大白的注意事项有哪些，下面就是实战案例，一起来看一下。

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

一、准备工作

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

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

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

二、编写 HTML

填写以下代码：

<!doctype html>  
<html>  
   <head><meta charset="utf-8"><title>Baymax</title></head>  
<body>  
  
     <div id="baymax">  
  
        <!-- 定义头部，包括两个眼睛、嘴 -->  
        <div id="head">  
            <div id="eye"></div>  
            <div id="eye2"></div>  
            <div id="mouth"></div>  
        </div>  
  
        <!-- 定义躯干，包括心脏 -->  
        <div id="torso">  
            <div id="heart"></div>  
        </div>  
  
        <!-- 定义肚子腹部，包括 cover（和躯干的连接处） -->  
        <div id="belly">  
            <div id="cover"></div>  
        </div>  
  
        <!-- 定义左臂，包括一大一小两个手指 -->  
        <div id="left-arm">  
            <div id="l-bigfinger"></div>  
            <div id="l-smallfinger"></div>  
        </div>  
  
        <!-- 定义右臂，同样包括一大一小两个手指 -->  
        <div id="right-arm">  
            <div id="r-bigfinger"></div>  
            <div id="r-smallfinger"></div>  
        </div>  
  
        <!-- 定义左腿 -->  
        <div id="left-leg"></div>  
  
        <!-- 定义右腿 -->  
        <div id="right-leg"></div>  
  
    </div>  
</body>  
<html>

三、添加 CSS 样式

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

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

然后首先是头部：

body {   
    background: #595959;   
}   
  
#baymax{   
    /*设置为 居中*/       
    margin: 0 auto;   
  
    /*高度*/      
    height: 600px;   
  
    /*隐藏溢出*/       
    overflow: hidden;   
}   
  
#head{   
    height: 64px;   
    width: 100px;   
  
    /*以百分比定义圆角的形状*/       
    border-radius: 50%;   
  
    /*背景*/       
    background: #fff;   
    margin: 0 auto;   
    margin-bottom: -20px;   
  
    /*设置下边框的样式*/       
    border-bottom: 5px solid #e0e0e0;   
  
    /*属性设置元素的堆叠顺序；    拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/       
    z-index: 100;   
  
    /*生成相对定位的元素*/       
    position: relative;   
}

赶紧再来添加眼睛和嘴吧！

#eye,   
#eye2{   
    width: 11px;   
    height: 13px;   
    background: #282828;   
    border-radius: 50%;   
    position: relative;   
    top: 30px;   
    left: 27px;   
  
    /*旋转该元素*/       
    transform: rotate(8deg);   
}   
  
#eye2{   
    /*使其旋转对称*/       
    transform: rotate(-8deg);   
    left: 69px;    top: 17px;   
}   
  
#mouth{   
    width: 38px;   
    height: 1.5px;   
    background: #282828;   
    position: relative;   
    left: 34px;   
    top: 10px;   
}

接下来是躯干和腹部：

#torso,   
#belly{   
    margin: 0 auto;   
    height: 200px;   
    width: 180px;   
    background: #fff;   
    border-radius: 47%;   
  
    /*设置边框*/       
    border: 5px solid #e0e0e0;   
    border-top: none;   
    z-index: 1;   
}   
  
#belly{   
    height: 300px;   
    width: 245px;   
    margin-top: -140px;   
    z-index: 5;   
}   
  
#cover{   
    width: 190px;   
    background: #fff;   
    height: 150px;   
    margin: 0 auto;   
    position: relative;   
    top: -20px;   
    border-radius: 50%;   
}

赋予「大白」象征生命的心脏：

#heart{     
  width:25px;    
  height:25px;    
  border-radius:50%;    
  position:relative;    
  
  /*向边框四周添加阴影效果*/  
  box-shadow:2px 5px 2px #ccc inset;    
  
  rightright:-115px;    
  top:40px;    
  z-index:111;    
  border:1px solid #ccc;   
}

还没有手和脚，怪萌怪萌的...「大白」需要温暖的手臂：

#left-arm,   
#right-arm{   
    height: 270px;   
    width: 120px;   
    border-radius: 50%;   
    background: #fff;   
    margin: 0 auto;   
    position: relative;   
    top: -350px;   
    left: -100px;   
    transform: rotate(20deg);   
    z-index: -1;   
}   
  
#right-arm{   
    transform: rotate(-20deg);   
    left: 100px;   
    top: -620px;   
}

还没有手指头呢：

#l-bigfinger,   
#r-bigfinger{   
    height: 50px;   
    width: 20px;   
    border-radius: 50%;   
    background: #fff;   
    position: relative;   
    top: 250px;   
    left: 50px;   
    transform: rotate(-50deg);   
}   
  
#r-bigfinger{   
    left: 50px;   
    transform: rotate(50deg);   
}   
  
#l-smallfinger,   
#r-smallfinger{   
    height: 35px;   
    width: 15px;   
    border-radius: 50%;   
    background: #fff;   
    position: relative;   
    top: 195px;   
    left: 66px;   
    transform: rotate(-40deg);   
}   
  
#r-smallfinger{   
    background: #fff;   
    transform: rotate(40deg);   
    top: 195px;   
    left: 37px;   
}

迫不及待要给「大白」加上腿了吧：

#left-leg,   
#right-leg{   
    height: 170px;   
    width: 90px;   
    border-radius: 40% 30% 10px 45%;   
    background: #fff;   
    position: relative;   
    top: -640px;   
    left: -45px;   
    transform: rotate(-1deg);   
    z-index: -2;   
    margin: 0 auto;   
}   
  
#right-leg{   
    background: #fff;   
    border-radius:30% 40% 45% 10px;   
    margin: 0 auto;   
    top: -810px;   
    left: 50px;   
    transform: rotate(1deg);   
}

属于你的暖男大白来到了你的身边，是不是特有安全感哦！

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

在HTML中水平线标注与代码注释应该如何使用

在HTML/XHTML中的img图像标签应该如何使用

怎样修改输入框的默认文字颜色

以上是怎样用HTML和CSS做出大白的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract