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으로 문의하세요.

관련 기사

텍스트에서 웹 사이트로 : HTML의 힘Apr 13, 2025 am 12:07 AM

HTML은 웹 페이지를 작성하는 데 사용되는 언어로, 태그 및 속성을 통해 웹 페이지 구조 및 컨텐츠를 정의합니다. 1) HTML과 같은 태그를 통해 문서 구조를 구성합니다. 2) 브라우저는 HTML을 구문 분석하여 DOM을 빌드하고 웹 페이지를 렌더링합니다. 3) 멀티미디어 기능을 향상시키는 HTML5의 새로운 기능. 4) 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함됩니다. 5) 최적화 제안에는 시맨틱 태그 사용 및 파일 크기 감소가 포함됩니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM

"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML의 시작 태그의 예는 무엇입니까?Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

See all articles