设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 萌新训练营 › 萌新交流区 › Web画一个大白
返回列表 发新帖
查看: 2049|回复: 5

[已解决]Web画一个大白

[复制链接]
巅峰老甲鱼1
发表于 2023-3-20 13:32:28 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
为什么大白的右手大小两个指头没缝隙，按照小甲鱼老师的代码敲，没找到不一样的
代码如下：    最后面有图片
<!DOCTYPE html>
<html>
<head>
        <title>手绘大白</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
        <meta name="description" content="《零基础入门学习Web开发》案例演示">
        <meta name="author" content="巅峰老甲鱼1">
        <link rel="stylesheet" href="styles.css" type="text/css">
        
</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：


body {
        background: #000;
}
#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;
        
        right: -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);
}






最佳答案
月排行榜 / 总排行榜
isdkz
2023-3-20 13:53:06
问题出在第 164 行，你用了中文分号

  1. body {
  2.         background: #000;
  3. }
  4. #baymax {
  5.         /* 设置为居中 */
  6.         margin: 0 auto;
  7.         
  8.         /* 高度 */
  9.         height：600px;
  10.         
  11.         /* 隐藏溢出 */
  12.         overflow: hidden;
  13. }
  14. #head {
  15.         height: 64px;
  16.         width: 100px;
  17.         
  18.         /* 以百分比定义圆角的形状 */
  19.         border-radius: 50%;
  20.         
  21.         /*背景*/
  22.         background: #fff;
  23.         margin: 0 auto;
  24.         margin-bottom: -20px;
  25.         
  26.         /*设置下边框的样式*/
  27.         border-bottom: 5px solid #e0e0e0;
  28.         
  29.         /*设置元素的堆叠顺序，
  30.           拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
  31.         */
  32.         z-index: 100;
  33.         
  34.         /*生成相对定位的元素*/
  35.         position: relative;
  36. }

  38. #eye,
  39. #eye2 {
  40.         width: 11px;
  41.         height: 13px;
  42.         background: #282828;
  43.         border-radius: 50%;
  44.         position: relative;
  45.         top: 30px;
  46.         left: 27px;
  47.         
  48.         /*旋转该元素*/
  49.         transform: rotate(8deg);
  50. }

  52. #eye2 {
  53.         /*使其旋转对称*/
  54.         transform: rotate(-8deg);
  55.         left: 69px;
  56.         top: 17px;
  57. }

  59. #mouth {
  60.         width: 38px;
  61.         height: 1.5px;
  62.         background: #282828;
  63.         position: relative;
  64.         left: 34px;
  65.         top: 10px;
  66. }

  68. /*躯干和腹部*/
  69. #torso,
  70. #belly {
  71.         margin: 0 auto;
  72.         height: 200px;
  73.         width: 180px;
  74.         background: #fff;
  75.         border-radius: 47%;
  76.         
  77.         /*设置边框*/
  78.         border: 5px solid #e0e0e0;
  79.         border-top: none;
  80.         z-index: 1;
  81. }

  83. #belly {
  84.         height: 300px;
  85.         width: 245px;
  86.         margin-top: -140px;
  87.         z-index: 5;
  88. }

  90. #cover {
  91.         width: 190px;
  92.         background: #fff;
  93.         height: 150px;
  94.         margin: 0 auto;
  95.         position: relative;
  96.         top: -20px;
  97.         border-radius: 50%;
  98. }

  100. /*心脏*/
  101. #heart {
  102.         width: 25px;
  103.         height: 25px;
  104.         border-radius: 50%;
  105.         position: relative;
  106.         
  107.         /*向边框四周添加阴影效果*/
  108.         box-shadow: 2px 5px 2px #ccc inset;
  109.         
  110.         right: -115px;
  111.         top: 40px;
  112.         z-index: 111;
  113.         border: 1px solid #ccc;
  114. }

  116. /*手臂*/
  117. #left-arm,
  118. #right-arm {
  119.         height: 270px;
  120.         width: 120px;
  121.         border-radius: 50%;
  122.         background: #fff;
  123.         margin: 0 auto;
  124.         position: relative;
  125.         top: -350px;
  126.         left: -100px;
  127.         transform: rotate(20deg);
  128.         z-index: -1;
  129. }

  131. #right-arm {
  132.         transform: rotate(-20deg);
  133.         left: 100px;
  134.         top: -620px;
  135. }

  137. /*手指头*/
  138. #l-bigfinger,
  139. #r-bigfinger {
  140.         height: 50px;
  141.         width: 20px;
  142.         border-radius: 50%;
  143.         background: #fff;
  144.         position: relative;
  145.         top: 250px;
  146.         left: 50px;
  147.         transform: rotate(-50deg);
  148. }

  150. #r-bigfinger {
  151.         left: 50px;
  152.         transform: rotate(50deg);
  153. }

  155. #l-smallfinger,
  156. #r-smallfinger {
  157.         height: 35px;
  158.         width: 15px;
  159.         border-radius: 50%;
  160.         background: #fff;
  161.         position: relative;
  162.         top: 195px;
  163.         left: 66px;
  164.         transform: rotate(-40deg);                                                                       /* 这里的分号你用了中文分号 */
  165. }

  167. #r-smallfinger {
  168.         background: #fff;
  169.         transform: rotate(40deg);
  170.         top: 195px;
  171.         left: 37px;
  172. }

  174. /*大腿*/
  175. #left-leg,
  176. #right-leg {
  177.         height: 170px;
  178.         width: 90px;
  179.         border-radius: 40% 30% 10px 45%;
  180.         background: #fff;
  181.         position: relative;
  182.         top: -640px;
  183.         left: -45px;
  184.         transform: rotate(-1deg);
  185.         z-index: -2;
  186.         margin: 0 auto;
  187. }

  189. #right-leg {
  190.         background: #fff;
  191.         border-radius: 30% 40% 45% 10px;
  192.         margin: 0 auto;
  193.         top: -810px;
  194.         left: 50px;
  195.         transform: rotate(1deg);
  196. }
复制代码
微信图片_20230320133043.jpg
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

isdkz
发表于 2023-3-20 13:53:06 | 显示全部楼层    本楼为最佳答案   
问题出在第 164 行，你用了中文分号

  1. body {
  2.         background: #000;
  3. }
  4. #baymax {
  5.         /* 设置为居中 */
  6.         margin: 0 auto;
  7.         
  8.         /* 高度 */
  9.         height：600px;
  10.         
  11.         /* 隐藏溢出 */
  12.         overflow: hidden;
  13. }
  14. #head {
  15.         height: 64px;
  16.         width: 100px;
  17.         
  18.         /* 以百分比定义圆角的形状 */
  19.         border-radius: 50%;
  20.         
  21.         /*背景*/
  22.         background: #fff;
  23.         margin: 0 auto;
  24.         margin-bottom: -20px;
  25.         
  26.         /*设置下边框的样式*/
  27.         border-bottom: 5px solid #e0e0e0;
  28.         
  29.         /*设置元素的堆叠顺序，
  30.           拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
  31.         */
  32.         z-index: 100;
  33.         
  34.         /*生成相对定位的元素*/
  35.         position: relative;
  36. }

  38. #eye,
  39. #eye2 {
  40.         width: 11px;
  41.         height: 13px;
  42.         background: #282828;
  43.         border-radius: 50%;
  44.         position: relative;
  45.         top: 30px;
  46.         left: 27px;
  47.         
  48.         /*旋转该元素*/
  49.         transform: rotate(8deg);
  50. }

  52. #eye2 {
  53.         /*使其旋转对称*/
  54.         transform: rotate(-8deg);
  55.         left: 69px;
  56.         top: 17px;
  57. }

  59. #mouth {
  60.         width: 38px;
  61.         height: 1.5px;
  62.         background: #282828;
  63.         position: relative;
  64.         left: 34px;
  65.         top: 10px;
  66. }

  68. /*躯干和腹部*/
  69. #torso,
  70. #belly {
  71.         margin: 0 auto;
  72.         height: 200px;
  73.         width: 180px;
  74.         background: #fff;
  75.         border-radius: 47%;
  76.         
  77.         /*设置边框*/
  78.         border: 5px solid #e0e0e0;
  79.         border-top: none;
  80.         z-index: 1;
  81. }

  83. #belly {
  84.         height: 300px;
  85.         width: 245px;
  86.         margin-top: -140px;
  87.         z-index: 5;
  88. }

  90. #cover {
  91.         width: 190px;
  92.         background: #fff;
  93.         height: 150px;
  94.         margin: 0 auto;
  95.         position: relative;
  96.         top: -20px;
  97.         border-radius: 50%;
  98. }

  100. /*心脏*/
  101. #heart {
  102.         width: 25px;
  103.         height: 25px;
  104.         border-radius: 50%;
  105.         position: relative;
  106.         
  107.         /*向边框四周添加阴影效果*/
  108.         box-shadow: 2px 5px 2px #ccc inset;
  109.         
  110.         right: -115px;
  111.         top: 40px;
  112.         z-index: 111;
  113.         border: 1px solid #ccc;
  114. }

  116. /*手臂*/
  117. #left-arm,
  118. #right-arm {
  119.         height: 270px;
  120.         width: 120px;
  121.         border-radius: 50%;
  122.         background: #fff;
  123.         margin: 0 auto;
  124.         position: relative;
  125.         top: -350px;
  126.         left: -100px;
  127.         transform: rotate(20deg);
  128.         z-index: -1;
  129. }

  131. #right-arm {
  132.         transform: rotate(-20deg);
  133.         left: 100px;
  134.         top: -620px;
  135. }

  137. /*手指头*/
  138. #l-bigfinger,
  139. #r-bigfinger {
  140.         height: 50px;
  141.         width: 20px;
  142.         border-radius: 50%;
  143.         background: #fff;
  144.         position: relative;
  145.         top: 250px;
  146.         left: 50px;
  147.         transform: rotate(-50deg);
  148. }

  150. #r-bigfinger {
  151.         left: 50px;
  152.         transform: rotate(50deg);
  153. }

  155. #l-smallfinger,
  156. #r-smallfinger {
  157.         height: 35px;
  158.         width: 15px;
  159.         border-radius: 50%;
  160.         background: #fff;
  161.         position: relative;
  162.         top: 195px;
  163.         left: 66px;
  164.         transform: rotate(-40deg);                                                                       /* 这里的分号你用了中文分号 */
  165. }

  167. #r-smallfinger {
  168.         background: #fff;
  169.         transform: rotate(40deg);
  170.         top: 195px;
  171.         left: 37px;
  172. }

  174. /*大腿*/
  175. #left-leg,
  176. #right-leg {
  177.         height: 170px;
  178.         width: 90px;
  179.         border-radius: 40% 30% 10px 45%;
  180.         background: #fff;
  181.         position: relative;
  182.         top: -640px;
  183.         left: -45px;
  184.         transform: rotate(-1deg);
  185.         z-index: -2;
  186.         margin: 0 auto;
  187. }

  189. #right-leg {
  190.         background: #fff;
  191.         border-radius: 30% 40% 45% 10px;
  192.         margin: 0 auto;
  193.         top: -810px;
  194.         left: 50px;
  195.         transform: rotate(1deg);
  196. }
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小甲鱼的二师兄
发表于 2023-3-20 14:02:43 From FishC Mobile | 显示全部楼层
isdkz 发表于 2023-3-20 13:53
问题出在第 164 行，你用了中文分号

厉害
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

巅峰老甲鱼1
 楼主| 发表于 2023-3-20 14:23:06 From FishC Mobile | 显示全部楼层
确实厉害，学习无止境啊
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

草莓可乐加冰
发表于 2023-3-20 16:05:21 | 显示全部楼层
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

wanglyndon
发表于 2023-3-20 21:12:30 | 显示全部楼层
isdkz 发表于 2023-3-20 13:53
问题出在第 164 行，你用了中文分号

高手
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-6-10 05:20

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表