html之大白_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

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

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7335

Java教程

1627

CakePHP 教程

1352

Laravel 教程

1264

PHP教程

1209

显示更多

Related knowledge

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？ Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，