结果并非如此，孟孟达


PS：你最好理解HTML和CSS，但是如果你有点白，可以看到白色。

1。准备工作

进入 / / /家shiyanlou目录并创建一个新的空白文档：


我的名字是Baymax.html（另一名是好的，但必须是HTML后缀名。）：

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


两。写HTML

填写以下代码：


xml代码将内容复制到剪贴板。




Baymax















































三。添加CSS样式

我们已经用HTML定义了大白的元素。

因为大白是白色的，为了便于识别，我们将背景设置为深色。

然后第一个是头部：

CSS代码将内容复制到剪贴板。


{体
背景：# 595959；
}

# Baymax {
设置中心
保证金：0汽车；

高度
身高：600px；

隐藏溢出
溢出：隐藏；
}

#头{
身高：64px；
宽度：100px；

*形状为圆形定义*百分比
边框半径：50%；

背景
背景：# FFF；
保证金：0汽车；
利润率底：- 20px；

设置样式框架
底部边框：5px固体# e0e0e0；

堆叠顺序属性集元素；前面有更高的堆叠顺序元素将总是在堆叠顺序低元素。
Z指数：100；

*生成相对定位元素
职位：相对；
}





效果预览：


来，再加入你的眼睛和嘴巴。

CSS代码将内容复制到剪贴板。


#眼，
# eye2 {
宽度：11px；
身高：13px；
背景：# 282828；
边框半径：50%；
职位：相对；
上图：30px；
左：27px；

旋转元素
变换：旋转（8deg）；
}

# eye2 {
转动对称
变换：旋转（- 8deg）；
左：69px；顶部：17px；
}

#口{
宽度：38px；
身高：1.5px；
背景：# 282828；
职位：相对；
左：34px；
上图：10px；
}





迷你的大白


其次是躯干和腹部：

CSS代码将内容复制到剪贴板。


#躯干，
#腹部{
保证金：0汽车；
身高：200px；
宽度：180px；
背景：# FFF；
边框半径：47%；

设置边界
边境：5px固体# e0e0e0；
边界顶：无；
Z指数：1；
}

#腹部{
身高：300px；
宽度：245px；
边距：- 140px；
Z指数：5；
}

#盖{
宽度：190px；
背景：# FFF；
身高：150px；
保证金：0汽车；
职位：相对；
上图：- 20px；
边框半径：50%；
}





赋予伟大的白色作为生命象征的心：

CSS代码将内容复制到剪贴板。


#心{
Width:25px;
身高：25px；
边框半径：50%；
职位：相对；

对边框的边框添加阴影效果。
盒子的影子：插图2px 5px 2px # CCC；

错误：- 115px；
上图：40px；
Z指数：111；
边境：1px solid # CCC；
}





现在大白是这样的。


没有手脚，奇怪的萌芽…大白需要温暖的臂膀：

CSS代码将内容复制到剪贴板。


#左臂，
#右臂{
身高：270px；
宽度：120px；
边框半径：50%；
背景：# FFF；
保证金：0汽车；
职位：相对；
上图：- 350px；
左：- 100px；
变换：旋转（20deg）；
Z指数：1；
}

#右臂{
变换：旋转（- 20deg）；
左：100px；
上图：- 620px；
}





没什么可指责的。

CSS代码将内容复制到剪贴板。


# l-bigfinger，
# r-bigfinger {
身高：50px；
宽度：20px；
边框半径：50%；
背景：# FFF；
职位：相对；
上图：250px；
左：50px；
变换：旋转（- 50deg）；
}

# r-bigfinger {
左：50px；
变换：旋转（50deg）；
}

# l-smallfinger，
# r-smallfinger {
身高：35px；
宽度：15px；
边框半径：50%；
背景：# FFF；
职位：相对；
上图：195px；
左：66px；
变换：旋转（- 40deg）；
}

# r-smallfinger {
背景：# FFF；
变换：旋转（40deg）；
上图：195px；
左：37px；
}





有点意思：


你迫不及待地想把腿加上大白。

CSS代码将内容复制到剪贴板。


#左腿，
#右腿{
身高：170px；
宽度：90px；
边界半径：40% 30% 10px 45%；
背景：# FFF；
职位：相对；
上图：- 640px；
Left: -45px;
变换：旋转（- 1deg的）；
Z指数：2；
保证金：0汽车；
}

#右腿{
背景：# FFF；
边界半径：30% 40% 45% 10px；
保证金：0汽车；
上图：- 810px；
左：50px；
变换：旋转（1deg的）；
}





在~在~在~特技完成！

你温暖的男人已经来到你身边，不是唯一的安全感哦！