masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > Gunakan HTML dan CSS untuk mencipta lelaki hangat anda sendiri 'Dabai'_HTML/Xhtml_Penghasilan halaman web

Gunakan HTML dan CSS untuk mencipta lelaki hangat anda sendiri 'Dabai'_HTML/Xhtml_Penghasilan halaman web

WBOY
Lepaskan： 2016-05-16 16:36:01
asal
1229 orang telah melayarinya

Keputusan akhir macam ni, comel kan...

PS: Anda lebih baik mempunyai pemahaman tertentu tentang HTML dan CSS, tetapi tidak mengapa jika anda seorang pemula Tidak mengapa untuk bertemu "Dabai"!

1. Persediaan

Pergi ke direktori /home/shiyanlou/ dan buat dokumen kosong baharu:

Dinamakan Baymax.html (nama lain juga boleh diterima, tetapi akhiran mestilah .html):

Buka dengan gedit dan bersedia untuk mengedit kod:

2. Menulis HTML

Isi kod berikut:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >
  2. <html>
  3.  <kepala><meta charset="utf-8"><tajuk>Baymaxtajuk><>kepala> 
  4. <badan>
  6.  <div id="baymax" >
  9.  <div id="kepala" >
  10.  <div id="mata" >div>
  11.  <div id="eye2" >div>
  12.  <div id="mulut" >div>
  13.  div>
  15.  
  16.  <div id="torso" >
  17.  <div id="hati" >div>
  18.  div>
  21.  <div id="perut" >
  22.  <div id="cover" >div>
  23.  div>
  26.  <div id="kiri- lengan"> 
  27.  <div id="l- bigfinger">div>
  28.  <div id="l- smallfinger">div>
  29.  div>
  31.  
  32.  <div id="kanan- lengan"> 
  33.  <div id="r- bigfinger">div>
  34.  <div id="r- smallfinger">div>
  35.  div>
  38.  <div id="kiri- kaki">div>
  41.  <div id="kanan- kaki">div>
  43.  div> 
  44. badan>
  45. <html>

3. Tambahkan gaya CSS

Kami telah menggunakan HTML untuk mentakrifkan setiap elemen "Dabai", dan kini kami perlu menggunakan CSS untuk melukis penampilan gayanya.

Memandangkan "Dabai" berwarna putih, untuk memudahkan pengecaman, kami menetapkan latar belakang kepada warna gelap.

Kemudian pertama kepala:

Kod CSSSalin kandungan ke papan keratan
  1. badan {
  2. latar belakang: #595959
  3. }
  5. #baymax{
  6.  /*Tetapkan ke tengah*/ 
  7. margin: 0 auto;
    9.  
  9. /*Tinggi*/ 
  10. tinggi: 600px
    12.  
  12. /*Sembunyikan limpahan*/ 
  13. limpahan: tersembunyi; }
    16. #kepala
  16. {  
    17. tinggi
  17. : 64px; 
    18. lebar
  18. : 100px
  19.  
    20. /*Tentukan bentuk fillet dalam peratusan*/
  20.  
    21. sempadan
  21. -jejari: 50%
  22.  
    23. /*Latar Belakang*/
  23.  
    24. latar belakang
  24. : #fff; margin
    25. : 0
  25. auto;  margin-bawah: -
    26. 20px
  26. ;   /*Tetapkan gaya sempadan bawah*/
    27.  
  28. bawah sempadan: 5px
  29. pepejal #e0e0e0;  /*Atribut menetapkan susunan susunan elemen; >
  30. z-index: 100
  31.  
  32. /*Jana elemen yang agak berkedudukan*/ 
  33. kedudukan:
  34. saudara; }

  35. Pratonton kesan:

    Cepat tambah mata dan mulut!

    Kod CSSSalin kandungan ke papan keratan
    1. #mata,
    2. #eye2{
    3. lebar: 11px;
      4.  
    4. tinggi: 13px; 
    5. latar belakang: #282828
    6. sempadan-jejari: 50%
    7. kedudukan: saudara;
      8. atas
    8. : 30px;  kiri
      9. :
    9. 27px; 
      10.  
    10. /*Putar elemen*/
      11.  
    11. ubah: putar(8deg);
      12. }
    14. #eye2
      15. {
    15.  /*Jadikan simetri putaran*/
      16.  
    16. ubah: putar(-8deg);
    17. kiri
      18. :
    18. 69px; >17px; } #mulut
    19. { 
    20. lebar
    21. : 38px;  
    22. tinggi: 1.5px; 
    23. latar belakang: #282828
    24. kedudukan: saudara;  kiri
    25. : 34px;   atas
    26. : 10px;  }
    27. Mini "Baymax", prototaip muncul:
      28. Seterusnya ialah batang tubuh dan perut:
      29. Kod CSS
    29. Salin kandungan ke papan keratan
      1. #torso,   
      2. #perut{   
      3.     margin: 0 auto;   
      4.     tinggi: 200px;   
      5.     lebar: 180px;   
      6.     latar belakang: #fff;   
      7.     sempadan-jejari: 47%;   
      8.   
      9.     /*设置边框*/       
      10.     sempadan: 5px pepejal #e0e0e0;   
        11.     
      11. bahagian atas sempadan: tiada;   
        12.     
      12. z-indeks: 1;   
        13. }   
        14.   
      15. #perut{   
        16.     
      16. tinggi: 300px;   
        17.     
      17. lebar: 245px;   
        18.     
      18. margin-atas: -140px;   
        19.     
      19. z-indeks: 5;   
        20. }   
        21.   
      22. #cover{   
        23.     
      23. lebar: 190px;   
        24.     
      24. latar belakang: #fff;   
        25.     
      25. tinggi: 150px;   
        26.     
      26. margin: 0 auto;   
        27.     
      27. kedudukan: saudara;   
        28.     
      28. atas: -20px;   
        29.     
      29. sempadan-jejari: 50%;   
        30. }   
        31.   
      赋予「大白」象征生命的心脏：

    Kod CSS
    复制内容到剪贴板
    1. #hati{ 
    2. lebar:25px;
    3. tinggi:25px;
      4. sempadan
    4. -jejari: 50%
      5. kedudukan
    5. :saudara;
    6. /*Tambah kesan bayang di sekeliling sempadan*/
    7. bayang-bayang kotak:2px
    8. 5px 2px #ccc selit;
      9. kanan
    9. kanan
      10. :-
    10. 115px; atas:40px
      11. ;
    11. z-indeks:111; sempadan
      12. :
    12. 1px pepejal
    13. #ccc; } Beginilah rupa "Baymax" sekarang:
    14. Dia belum mempunyai tangan atau kaki, dia sangat comel... "Baymax" memerlukan lengan yang hangat:
    15. Kod CSSSalin kandungan ke papan keratan
    1. #kiri-lengan,   
    2. #kanan-lengan{   
    3.     tinggi: 270px;   
    4.     lebar: 120px;   
    5.     sempadan-jejari: 50%;   
    6.     latar belakang: #fff;   
    7.     margin: 0 auto;   
    8.     kedudukan: saudara;   
    9.     atas: -350px;   
    10.     kiri: -100px;   
    11.     transformasi: putar(20deg);   
    12.     z-indeks: -1;   
    13. }   
    14.   
    15. #kanan-lengan{   
    16.     transformasi: putar(-20deg);   
    17.     kiri: 100px;   
    18.     atas: -620px;   
    19. }   
    20.   

    还没有手指头呢：

    Kod CSS复制内容到剪贴板
    1. #l-bigfinger,   
    2. #r-bigfinger{   
    3.     tinggi: 50px;   
    4.     lebar: 20px;   
    5.     sempadan-jejari: 50%;   
    6.     latar belakang: #fff;   
    7.     kedudukan: saudara;   
    8.     atas: 250px;   
    9.     kiri: 50px;   
    10.     transformasi: putar(-50deg);   
    11. }   
    12.   
    13. #r-bigfinger{   
    14.     kiri: 50px;   
    15.     transformasi: putar(50deg);   
    16. }   
    17.   
    18. #l-smallfinger,   
    19. #r-smallfinger{   
    20.     tinggi: 35px;   
    21.     lebar: 15px;   
    22.     sempadan-jejari: 50%;   
    23.     latar belakang: #fff;   
    24.     kedudukan: saudara;   
    25.     atas: 195px;   
    26.     kiri: 66px;   
    27.     transformasi: putar(-40deg);   
    28. }   
    29.   
    30. #r-smallfinger{   
    31.     latar belakang: #fff;   
    32.     transformasi: putar(40deg);   
    33.     atas: 195px;   
    34.     kiri: 37px;   
    35. }   
    36.   

    有点意思了：

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

    Kod CSS复制内容到剪贴板
    1. #kiri-kaki,   
    2. #kanan-kaki{   
    3.     tinggi: 170px;   
    4.     lebar: 90px;   
    5.     sempadan-jejari: 40% 30% 10px 45%;   
    6.     latar belakang: #fff;   
    7.     kedudukan: saudara;   
    8.     atas: -640px;   
    9.     kiri: -45px;   
    10.     transformasi: putar(-1deg);   
    11.     z-indeks: -2;   
    12.     margin: 0 auto;   
    13. }   
    14.   
    15. #kanan-kaki{   
    16.     latar belakang: #fff;   
    17.     sempadan-jejari:30% 40% 45% 10px;   
    18.     margin: 0 auto;   
    19.     atas: -810px;   
    20.     kiri: 50px;   
    21.     transformasi: putar(1deg);   
    22. }   
    23.   

    duang~ duang~ duang~ 特技完成！

    属于你的暖男大白来到了你的身边，是不是特有安全感哦！
Label berkaitan：
css html
sumber：php.cn
Artikel sebelumnya：Kaedah pelaksanaan HTML susun atur grid sembilan persegi_HTML/Xhtml_Pengeluaran halaman web Artikel seterusnya：Penjelasan terperinci tentang fungsi muat turun html_HTML/Xhtml_Penghasilan halaman web
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Penukaran automatik PX kepada ralat REM  <style>html {   font-size: calc(100vw / 3.75);      }badan {    saiz fon: 0.16rem; ...
daripada 2024-04-16 09:34:16
0
0
4687
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Bagaimana untuk menyelesaikan ruang kosong misteri di bahagian bawah halaman dalam CSS Saya cuba membina halaman web mudah menggunakan Bootstrap dan D3, tetapi saya tidak tahu b...
daripada 2024-04-06 20:22:15
0
1
454
Cara menggunakan komponen laravel dengan ruang letak malas livewire Saya ingin menambah rangka komponen laravel saya di dalam ruang letak livewire3 Perkara ya...
daripada 2024-04-06 20:02:10
0
2
543
Kaedah peringkat atas untuk menggantikan rentetan dengan kod HTML (dihasilkan daripada tatasusunan) Diberi rentetan seperti ini...$htmlPattern="Usernameis:#name#andusercompanyis#company...
daripada 2024-04-06 17:40:41
0
2
410
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan