html之大白_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

html之大白_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:22 AM

  1 <!doctype html>  2 <html>  3   4 <head>  5 <meta charset="utf-8">  6 <title>Baymax</title>  7   8 <style>  9 body { 10     background: #595959; 11 } 12  13 #baymax { 14  15     /*设置为 居中*/ 16     margin: 0 auto; 17  18     /*高度*/ 19     height: 600px; 20  21     /*隐藏溢出*/ 22     overflow: hidden; 23 } 24  25 #head { 26     height: 64px; 27     width: 100px; 28  29     /*以百分比定义圆角的形状*/ 30     border-radius: 50%; 31  32     /*背景*/ 33     background: #fff; 34     margin: 0 auto; 35     margin-bottom: -20px; 36  37     /*设置下边框的样式*/ 38     border-bottom: 5px solid #e0e0e0; 39  40     /*属性设置元素的堆叠顺序； 41     拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/ 42     z-index: 100; 43  44     /*生成相对定位的元素*/ 45     position: relative; 46 } 47  48 #eye, 49 #eye2 { 50     width: 11px; 51     height: 13px; 52     background: #282828; 53     border-radius: 50%; 54     position: relative; 55     top: 30px; 56     left: 27px; 57  58     /*旋转该元素*/ 59     transform: rotate(8deg); 60 } 61  62 #eye2 { 63  64     /*使其旋转对称*/ 65     transform: rotate(-8deg); 66     left: 69px; 67     top: 17px; 68  69 } 70  71 #mouth { 72     width: 38px; 73     height: 1.5px; 74     background: #282828; 75     position: relative; 76     left: 34px; 77     top: 10px; 78 } 79  80 #torso, 81 #belly { 82     margin: 0 auto; 83     height: 200px; 84     width: 180px; 85     background: #fff; 86     border-radius: 47%; 87  88     /*设置边框*/ 89     border: 5px solid #e0e0e0; 90     border-top: none; 91     z-index: 1; 92 } 93  94 #belly { 95     height: 300px; 96     width: 245px; 97     margin-top: -140px; 98     z-index: 5; 99 }100 101 #cover {102     width: 190px;103     background: #fff;104     height: 150px;105     margin: 0 auto;106     position: relative;107     top: -20px;108     border-radius: 50%;109 }110 111 #heart{112   width:25px; 113   height:25px; 114   border-radius:50%; 115   position:relative; 116 117   /*向边框四周添加阴影效果*/118   box-shadow:2px 5px 2px #ccc inset; 119 120   right:-115px; 121   top:40px; 122   z-index:111; 123   border:1px solid #ccc;124 }125 126 #left-arm,127 #right-arm {128     height: 270px;129     width: 120px;130     border-radius: 50%;131     background: #fff;132     margin: 0 auto;133     position: relative;134     top: -350px;135     left: -100px;136     transform: rotate(20deg);137     z-index: -1;138 }139 140 #right-arm {141     transform: rotate(-20deg);142     left: 100px;143     top: -620px;144 }145 146 147 #l-bigfinger,148 #r-bigfinger {149     height: 50px;150     width: 20px;151     border-radius: 50%;152     background: #fff;153     position: relative;154     top: 250px;155     left: 50px;156     transform: rotate(-50deg);157 }158 159 #r-bigfinger {160     left: 50px;161     transform: rotate(50deg);162 }163 164 #l-smallfinger,165 #r-smallfinger {166     height: 35px;167     width: 15px;168     border-radius: 50%;169     background: #fff;170     position: relative;171     top: 195px;172     left: 66px;173     transform: rotate(-40deg);174 }175 176 #r-smallfinger {177     background: #fff;178     transform: rotate(40deg);179     top: 195px;180     left: 37px;181 }182 183 #left-leg,184 #right-leg {185     height: 170px;186     width: 90px;187     border-radius: 40% 30% 10px 45%;188     background: #fff;189     position: relative;190     top: -640px;191     left: -45px;192     transform: rotate(-1deg);193     z-index: -2;194     margin: 0 auto;195 }196 197 #right-leg {198     background: #fff;199     border-radius:30% 40% 45% 10px;200     margin: 0 auto;201     top: -810px;202     left: 50px;203     transform: rotate(1deg);204 }205 206 </style>207 208 </head>209 210 <body>211     <div id="baymax">212 213         <!-- 定义头部，包括两个眼睛、嘴 -->214         <div id="head">215             <div id="eye"></div>216             <div id="eye2"></div>217             <div id="mouth"></div>218         </div>219 220         <!-- 定义躯干，包括心脏 -->221         <div id="torso">222             <div id="heart"></div>223         </div>224 225         <!-- 定义肚子腹部，包括 cover（和躯干的连接处） -->226         <div id="belly">227             <div id="cover"></div>228         </div>229 230         <!-- 定义左臂，包括一大一小两个手指 -->231         <div id="left-arm">232             <div id="l-bigfinger"></div>233             <div id="l-smallfinger"></div>234         </div>235 236         <!-- 定义右臂，同样包括一大一小两个手指 -->237         <div id="right-arm">238             <div id="r-bigfinger"></div>239             <div id="r-smallfinger"></div>240         </div>241 242         <!-- 定义左腿 -->243         <div id="left-leg"></div>244 245         <!-- 定义右腿 -->246         <div id="right-leg"></div>247 248     </div>249 </body>250 251 </html>

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.