찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >HTML과 CSS를 활용해 나만의 따뜻한 남자 만들기 '다바이'_HTML/Xhtml_웹페이지 제작

HTML과 CSS를 활용해 나만의 따뜻한 남자 만들기 '다바이'_HTML/Xhtml_웹페이지 제작

WBOY
WBOY원래의
2016-05-16 16:36:011260검색

최종 결과는 이렇습니다. 귀엽지 않나요...

PS: HTML과 CSS에 대한 어느 정도 이해가 있으면 좋겠지만, 초보자라도 상관없습니다. “다바이”를 만나보세요!

1. 준비

/home/shiyanlou/ 디렉토리로 이동하여 새 빈 문서를 만듭니다.

Baymax.html이라는 이름(다른 이름도 허용되지만 접미사는 .html이어야 함):

gedit로 열고 코드 편집 준비:

2. HTML 작성

다음 코드를 입력하세요:

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >
  2. <html>
  3.  <헤드><메타 문자 집합="utf-8"><제목>베이맥스제목>머리> 
  4. <몸>
  6.  <div id="baymax" >
  9.  <div id="head" >
  10.  <div id="eye" >div>
  11.  <div id="eye2" >div>
  12.  <div id="입" >div>
  13.  div>
  15.  
  16.  <div id="torso" >
  17.  <div id="하트" >div>
  18.  div>
  21.  <div id="배" >
  22.  <div id="표지" >div>
  23.  div>
  26.  <div id="left- 팔"> 
  27.  <div id="l- bigfinger">div>
  28.  <div id="l- smallfinger">div>
  29.  div>
  31.  
  32.  <div id="right- 팔"> 
  33.  <div id="r- bigfinger">div>
  34.  <div id="r- smallfinger">div>
  35.  div>
  37.  
  38.  <div id="left- 다리">div>
  41.  <div id="right- 다리">div>
  43.  div> 
  44. 몸>
  45. <html>

3. CSS 스타일 추가

HTML을 사용하여 "Dabai"의 각 요소를 정의했다면 이제는 CSS를 사용하여 스타일 모양을 그려야 합니다.

'다바이'는 흰색이므로 쉽게 식별할 수 있도록 배경을 어두운 색으로 설정했습니다.

그럼 먼저 머리 부분:

CSS 코드클립보드에 콘텐츠 복사
  1. 몸 {
  2. 배경: #595959;
    3. }
  5. #baymax{
    6.  
  6. /*가운데로 설정*/ 
  7. 여백: 0 자동;
  8.  
    9. /*키*/
  9.  
    10. 높이
  10. : 600px;
    11.  
  11. /*오버플로 숨기기*/
    12.  
  12. 오버플로
    13. :
  13. 숨김 }
  15. #머리
    16. {
  16.  높이
    17. :
  17. 64px;  너비
    18. :
  18. 100px;  
    19. /*모깎기 모양을 백분율로 정의*/
  19.  
  20. 테두리-반경: 50%
  21.  
    22. /*배경*/
  22.  
  23. 배경:
    24. #fff
  24. 여백: 0
    25. 자동
  25. ;  여백-하단: -20px
    26. ; 
  26.  /*하단 테두리 스타일 설정*/
    27.  
  28. 테두리-하단: 5px
  29. 단색 #e0e0e0  /*속성은 요소의 스택 순서를 설정합니다. 스택 순서가 높은 요소는 항상 스택 순서가 낮은 요소 앞에 옵니다.*/
    30.  
  31. z-색인: 100
  32.  /*상대적으로 배치된 요소 생성*/
    33.  
  34. 직위: 친척
  35. }

  36. 효과 미리보기:

    빨리 눈과 입 추가!

    CSS 코드클립보드에 콘텐츠 복사
    1. #눈,
    2. #eye2{
    3. 너비: 11px;
    4. 높이: 13px;
      5. 배경
    5. : #282828; 테두리
      6. -반경: 50%
    6. 직위
      7. :
    7. 친척  상단
      8. :
    8. 30px;   왼쪽
      9. :
    9. 27px; 
      10.  
    10. /*요소 회전*/
      11.  
    11. 변환: 회전(8도)
      12. }
    14. #eye2
      15. {
    15.  /*회전대칭으로 만들기*/
      16.  
    16. 변환: 회전(-8deg)
    17. 왼쪽
      18. :
    18. 69px; 위: 17픽셀 }
    20. #입
      21. { 
    21. 너비
      22. :
    22. 38px;  높이: 1.
      23. 5픽셀
    23. ;  배경:
      24. #282828
    24. ; 직위: 친척
    25.  왼쪽: 34px
      26. ; 
    26.  상단: 10px
      27. ; 
    27. }
    28. 미니 '베이맥스' 프로토타입 등장:
    29. 다음은 몸통과 복부입니다.
    CSS 코드

    클립보드에 콘텐츠 복사

    1. #몸통,   
    2. #뱃살{   
    3.     여백: 0 자동;   
    4.     높이: 200px;   
    5.     너비: 180px;   
    6.     배경: #fff;   
    7.     테두리-반경: 47%;   
    8.   
    9.     /*设置边框*/       
    10.     테두리: 5px 단색 #e0e0e0;   
    11.     국경 상단: 없음;   
    12.     z-색인: 1;   
    13. }   
    14.   
    15. #뱃살{   
    16.     높이: 300px;   
    17.     너비: 245px;   
    18.     여백 상단: -140px;   
    19.     z-색인: 5;   
    20. }   
    21.   
    22. #표지{   
    23.     너비: 190px;   
    24.     배경: #fff;   
    25.     높이: 150px;   
    26.     여백: 0 자동;   
    27.     직위: 친척;   
    28.     상단: -20px;   
    29.     테두리-반경: 50%;   
    30. }   
    31.   

赋予「大白」象征生命的心脏：

CSS 코드复复内容到剪贴板
  1. #하트{ 
  2. 너비:25px;
  3. 높이:25px;
    4. 테두리
  4. -반경:50%
    5. 직위
  5. :친척
    7. /*테두리 주변에 그림자 효과 추가*/
  7. 상자 그림자:
    8. 2픽셀
  8. 5픽셀 2픽셀 #ccc 삽입
    10. 맞습니다
  10. 맞습니다:-115px; 상단
    11. :
  11. 40px; z-색인:111
  12. 테두리:
    13. 1px
  13. 단색 #ccc }
    15. 현재 '베이맥스'의 모습은 이렇습니다.
아직 손도 발도 없는데 너무 귀여워요... '베이맥스'에겐 따뜻한 팔이 필요해요:

CSS 코드

클립보드에 콘텐츠 복사

  1. #왼쪽-팔,   
  2. #right-팔{   
  3.     높이: 270px;   
  4.     너비: 120px;   
  5.     테두리-반경: 50%;   
  6.     배경: #fff;   
  7.     여백: 0 자동;   
  8.     직위: 친척;   
  9.     상단: -350px;   
  10.     왼쪽: -100px;   
  11.     변환: 회전(20도);   
  12.     z-색인: -1;   
  13. }   
  14.   
  15. #right-팔{   
  16.     변환: 회전(-20도);   
  17.     왼쪽: 100px;   
  18.     상단: -620px;   
  19. }   
  20.   

还没有手指头呢：

CSS 코드复复内容到剪贴板
  1. #l-bigfinger,   
  2. #r-bigfinger{   
  3.     높이: 50px;   
  4.     너비: 20px;   
  5.     테두리-반경: 50%;   
  6.     배경: #fff;   
  7.     직위: 친척;   
  8.     상단: 250px;   
  9.     왼쪽: 50px;   
  10.     변환: 회전(-50도);   
  11. }   
  12.   
  13. #r-bigfinger{   
  14.     왼쪽: 50px;   
  15.     변형: 회전(50도);   
  16. }   
  17.   
  18. #l-smallfinger,   
  19. #r-smallfinger{   
  20.     높이: 35px;   
  21.     너비: 15px;   
  22.     테두리-반경: 50%;   
  23.     배경: #fff;   
  24.     직위: 친척;   
  25.     상단: 195px;   
  26.     왼쪽: 66px;   
  27.     변환: 회전(-40도);   
  28. }   
  29.   
  30. #r-smallfinger{   
  31.     배경: #fff;   
  32.     변환: 회전(40도);   
  33.     상단: 195px;   
  34.     왼쪽: 37px;   
  35. }   
  36.   

유의미:

迫不及待要给「大白」加上腿了吧：

CSS 코드复复内容到剪贴板
  1. #왼쪽-다리,   
  2. #오른쪽-다리{   
  3.     높이: 170px;   
  4.     너비: 90px;   
  5.     테두리-반경: 40% 30% 10px 45%;   
  6.     배경: #fff;   
  7.     직위: 친척;   
  8.     상단: -640px;   
  9.     왼쪽: -45px;   
  10.     변형: 회전(-1deg);   
  11.     z-색인: -2;   
  12.     여백: 0 자동;   
  13. }   
  14.   
  15. #오른쪽-다리{   
  16.     배경: #fff;   
  17.     테두리-반경:30% 40% 45% 10px;   
  18.     여백: 0 자동;   
  19.     상단: -810px;   
  20.     왼쪽: 50px;   
  21.     변환: 회전(1도);   
  22. }   
  23.   

duang~ duang~ duang~ 特技完成！

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML 9각형 그리드 레이아웃 구현 방법_HTML/Xhtml_웹페이지 제작다음 기사：HTML 9각형 그리드 레이아웃 구현 방법_HTML/Xhtml_웹페이지 제작

관련 기사

더보기