机器猫 </p> <p> * {</p> <p> マージン: 0;</p> <p> パディング: 0;</p> <p> }</p> <p> </p> <p> .whole {</p> <p> width: 800ピクセル;</p> <p> margin: 20px auto;</p> <p> /*border: 2px 黄色一色;*/</p> <p> 背景色: 白;</p> <p> 位置: 相対;</p> <p> }</p> <p> </p> <p> .head {</p> <p> margin: 0 auto ;</p> <p> 位置: 相対;</p> <p> 幅: 500px;</p> <p> 高さ: 440px;</p> <p> 背景色: #00b7e7;</p> <p> 境界線: 220px;</p> <p> 境界線: 1px 単色赤;</p> <p> }</p> <p> </p> <p> .eye .left_eye,</p> .eye .right_eye {<p> </p>幅: 100px;<p> </p> 高さ: 130px;<p> </p> 背景色: 白;<p> </p> 境界線: 2px 純黒;<p> </p> 境界半径: 50px;<p> </p> 位置: 絶対;<p> </p> トップ: 50px;<p> </p> z-index: 3;<p> </p> }<p> </p> <p> </p> .eye .LeyeBall,<p> </p> .eye .ReyeBall {<p> </p> width: 20px;<p> </p>高さ: 20ピクセル; <p> </p> 背景: 黒;<p> </p> 境界半径: 10px;<p> </p> 位置: 絶対;<p> </p> 上部: 65px;<p> </p> }<p> </p> <p> </p> .eye .left_eye {<p> </p> 左: 146px;<p> </p> }<p> </p> <p> </p> .eye .right_eye {<p> </p> 左: 250px;<p> </p> }<p> </p> <p> </p> .eye .LeyeBall {<p> </p> 右: 10px;<p> </p> }<p> </p> <p> </p> .R eyeBall {<p> </p> 左: 10px;<p> </p> }<p> </p> <p> .face {</p> <p> 位置: 相対;</p> <p> z-index: 2;</p> <p> }</p> <p> </p> <p> .face .feature {</p> <p> 幅: 400px;</p> <p> 高さ: 320px;</p> <p> ボーダー-半径: 160px;</p> <p> 位置: 絶対;</p> <p> 上: 100px;</p> <p> 左: 50px;</p> <p> 背景: 白;</p> <p> }</p> <p> </p> <p> .face .nose {</p> <p> width: 45px; </p> <p>身長: 50px;</p> <p> ボーダー半径: 23px;</p> <p> 背景色: #cf3318;</p> <p> ボーダー: 2 ピクセル黒一色;</p> <p> 位置: 絶対;</p> <p> 上: 165 ピクセル;</p> <p> 左: 225 ピクセル;</p> <p> z-index : 3;</p> <p> }</p> <p> </p> <p> .face .Nline {</p> <p> 幅: 3px;</p> <p> 高さ: 160px;</p> <p> 背景: 黒;</p> <p> 位置: 絶対;</p> <p> トップ: 218px;</p> <p>左: 248px ;</p> <p> z-index: 3;</p> <p> }</p> <p> </p> .face .mouth {<p> </p> width: 280px;<p> </p> height: 280px;<p> </p> border-bottom: 5px ソリッドブラック;<p> </p> border-radius: 140ピクセル;<p> </p> 位置: 絶対;<p> </p> 上: 98px;<p> </p> 左: 105px;<p> </p> }<p> </p> <p> </p> .face .mustache .MutR_higher {<p> </p> 幅: 80px;<p> </p> 高さ: 2px;<p> </p> 背景: 黒;<p> </p> 位置: 絶対;<p> </p> 上: 220px;<p> </p> 左: 295px;<p> </p> z-index: 2;<p> </p> }<p> </p> <p> </p> .face .mustache .MutR_middle {<p> </p> width : 80px;<p> </p> 高さ: 2px;<p> </p> 背景: 黒;<p> </p> 位置: 絶対;<p> </p> 上: 240px;<p> </p> 左: 295px;<p> </p> z-index: 2;<p> </p> }<p> </p> <p> </p> .face .mustache 。 MutR_ lower {<p> </p> 幅: 80px;<p> </p> 高さ: 2px;<p> </p> 背景: 黒;<p> </p> 位置: 絶対;<p> </p> 上: 260px;<p> </p> 左: 295px;<p> </p> z-index: 2;<p> </p> }<p> </p> <p> </p> .face .mustache .mutl_top {<p></p>width：80px;<p></p> <p>height：2Px; ;</p> <p> }</p> <p> </p> <p> .face .mustache .MutL_center {</p> <p> 幅: 80px;</p> <p> 高さ: 2px;</p> <p> 背景: 黒;</p> <p> 位置: 絶対;</p> <p> トップ: 240px; </p> <p>左: 115px ;</p> <p> z-index: 2;</p> <p> }</p> <p> </p> .face .mustache .MutL_bottom {<p> </p> 幅: 80px;<p> </p> 高さ: 2px;<p> </p> 背景: 黒;<p> </p> 位置: 絶対; <p> </p>トップ: 260px;<p> </p> 左: 115px;<p> </p> z-index: 2;<p> </p> }<p> </p> <p> </p> .face .mustache .MutL_bottom,<p> </p> .face .mustache .MutR_higher {<p> </p>変換: 回転(160 度);<p> </p> }<p> </p> <p> </p> .face .mustache .MutL_top,<p> </p> .face .mustache .MutR_ lower {<p> </p> 変換: 回転(200度);<p> </p> }<p> </p> <p> </p> .neck { <p> </p> 幅: 300px;<p> </p> 高さ: 30px;<p> </p> 背景色: #a31f12;<p> </p> ボーダー: 2px ソリッドブラック;<p> </p> ボーダー半径: 15px;<p> </p> 位置: 相対的;<p> </p> 上: 0px;<p> </p> 左: 250px;<p> </p> z-インデックス: 4;<p> </p> }<p> </p> <p> </p> .neck .bell {<p> </p> width: 60px;<p> </p> height: 60px;<p> </p> overflow: hidden;<p> </p> border: 2px ソリッドブラック;<p> </p> border-radius: ; <p> </p> <p> background-color: #cfcb3c;</p> <p> position: absolute;</p> <p> top: 5px;</p> <p> left: 120px;</p> <p> }</p> <p> </p> <p> .bell .Bline {</p> <p> width: 60px;</p> <p> height: 2px;</p> <p> background-color: #cfcb3c;</p> <p> border: 2px solid black;</p> <p> border-radius: 3px 3px 0 0;</p> <p> position: absolute;</p> <p> top: 15px;</p> <p> }</p> <p> </p> <p> .bell .Bcircle {</p> <p> width: 20px;</p> <p> height: 16px;</p> <p> background: black;</p> <p> border-radius: 8px;</p> <p> position: absolute;</p> <p> top: 25px;</p> <p> left: 20px;</p> <p> }</p> <p> </p> <p> .bell .Bunderpart {</p> <p> width: 3px;</p> <p> height: 20px;</p> <p> background-color: black;</p> <p> position: absolute;</p> <p> left: 28px;</p> <p> top: 40px;</p> <p> }</p> <p> </p> <p> .body {</p> <p> position: relative;</p> <p> top: -300px;</p> <p> z-index: 1;</p> <p> }</p> <p> </p> <p> .body .tummy {</p> <p> width: 280px;</p> <p> height: 240px;</p> <p> background-color: #00b1e1;</p> <p> border: 2px solid black;</p> <p> position: absolute;</p> <p> top: 267px;</p> <p> left: 260px;</p> <p> }</p> <p> </p> <p> .body .bellyband {</p> <p> width: 220px;</p> <p> height: 220px;</p> <p> background-color: white;</p> <p> border: 2px solid black;</p> <p> border-radius: 110px;</p> <p> position: absolute;</p> <p> left: 290px;</p> <p> top: 267px;</p> <p> }</p> <p> </p> <p> .body .pocket {</p> <p> width: 160px;</p> <p> height: 160px;</p> <p> border-radius: 80px;</p> <p> background-color: white;</p> <p> border: 2px solid black;</p> <p> position: absolute;</p> <p> top: 305px;</p> <p> left: 320px;</p> <p> }</p> <p> </p> <p> .cover {</p> <p> width: 164px;</p> <p> height: 80px;</p> <p> background-color: white;</p> <p> border-bottom: 2px solid black;</p> <p> /*border: 5px solid orange;*/</p> <p> position: absolute;</p> <p> top: 300px;</p> <p> left: 320px;</p> <p> }</p> <p> </p> <p> .left_hand,</p> <p> .right_hand {</p> <p> height: 100px;</p> <p> width: 100px;</p> <p> position: absolute;</p> <p> top: 272px;</p> <p> left: 248px;</p> <p> }</p> <p> </p> <p> .left_hand {</p> <p> left: -10px;</p> <p> }</p> <p> </p> <p> .left_hand .Larm {</p> <p> width: 70px;</p> <p> height: 100px;</p> <p> background-color: #00bee8;</p> <p> border: 1px solid black;</p> <p> position: relative;</p> <p> top: 200px;</p> <p> left: 535px;</p> <p> transform: rotateZ(135deg);</p> <p> /*z-index: -1;*/</p> <p> }</p> <p> </p> <p> .right_hand {</p> <p> left: -10px;</p> <p> }</p> <p> </p> <p> .right_hand .Rarm {</p> <p> width: 70px;</p> <p> height: 100px;</p> <p> background-color: #00bee8;</p> <p> border: 1px solid black;</p> <p> /*z-index: -1;*/</p> <p> position: relative;</p> <p> top: 200px;</p> <p> left: 215px;</p> <p> transform: rotateZ(45deg);</p> <p> }</p> <p> </p> <p> .left_hand .Lpalm,</p> <p> .right_hand .Rpalm {</p> <p> width: 80px;</p> <p> height: 80px;</p> <p> border-radius: 40px;</p> <p> border: 2px solid black;</p> <p> background-color: white;</p> <p> position: absolute;</p> <p> }</p> <p> </p> <p> .right_hand .Rpalm {</p> <p> left: 580px;</p> <p> top: 260px;</p> <p> z-index: 1;</p> <p> }</p> <p> </p> <p> .left_hand .Lpalm {</p> <p> left: 160px;</p> <p> top: 260px;</p> <p> z-index: 1;</p> <p> }</p> <p> </p> <p> .foot .left_foot,</p> <p> .foot .right_foot {</p> <p> width: 150px;</p> <p> height: 40px;</p> <p> background-color: white;</p> <p> border: 2px solid black;</p> <p> border-radius: 80px 60px 60px 40px;</p> <p> position: relative;</p> <p> }</p> <p> </p> <p> .foot .left_foot {</p> <p> left: 240px;</p> <p> top: 210px;</p> <p> }</p> <p> </p> <p> .foot .right_foot {</p> <p> top: 165px;</p> <p> left: 410px;</p> <p> }</p> <p> </p> <p> .foot .crotch {</p> <p> width: 40px;</p> <p> height: 20px;</p> <p> background-color: white;</p> <p> border: 2px solid black;</p> <p> border-bottom: none;</p> <p> border-radius: 40px 40px 0 0;</p> <p> position: relative;</p> <p> top: 103px;</p> <p> left: 382px;</p> <p> z-index: 2</p> <p> }</p> <p> < ;/div> < ;/div> < !-- 口袋 -->
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
