masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah hujung hadapan web Tutorial H5 Berkongsi beberapa contoh halaman reka bentuk HTML5 dan kemahiran tutorial modification_html5

Berkongsi beberapa contoh halaman reka bentuk HTML5 dan kemahiran tutorial modification_html5

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:46 PM
html5

Untuk memahami dan membiasakan diri dengan elemen semantik baharu dalam HTML5, cara terbaik ialah dengan mengambil dokumen HTML klasik sebagai contoh, dan kemudian memperkayakannya dengan beberapa khasiat segar HTML5. Berikut ialah halaman yang ingin kami ubah Halaman ini sangat mudah dan mengandungi hanya satu artikel.

ApocalypsePage_Original.html, ini adalah halaman dengan format yang sangat standard, dan semua gaya datang daripada helaian gaya luaran.

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >  
  2. <html lang="zh- CN">  
  3. <kepala>  
  4.   <meta charset="utf- 8">  
  5.   <tajuk>Apocalypse Kinitajuk>  
  6.   <pautan rel="stylesheet"  href="ApocalypsePage_Original.css">  > >
  7. kepala>  
  8.   
  9. <badan>  
  10. <div kelas="Pengepala" >  
  11.   <h1>Bagaimana Dunia Boleh Berakhirh1>  
  12.   <p kelas="Penggoda" >Senario yang mengeja     akhir  hidup seperti yang kita tahup>> >  
  13.   <p kelas="Byline" >oleh Ray N. Carnationp>  
  14. div>   
  15.   
  16. <div kelas="Kandungan" >  
  17.   <p><span kelas="LeadIn">Sekarang span>, anda mungkin berasa agak baik. Lagipun, kehidupan di dunia maju  selesa<jangkauan kelas="style1">—span>mungkin lebih selesa daripada yang biasa biasa manusia sepanjang semua sejarah yang direkodkan.p>  🎜>
    18.   
  18. <p>Tetapi jangan terlalu megah. Masih banyak lagi cara yang mengerikan yang boleh berantakan. Dalam artikel ini, anda akan mempelajari tentang beberapa dari kegemaran kami.p>  
    19.      
    20.   
  20. <h2>Hari Kiamat Mayah2>  
  21. & lt; p & gt; Skeptics mencadangkan bahawa kalendar Maya hanya menggulung ke era 5,126 tahun yang baru selepas 2012, dan tidak sebenarnya meramalkan kiamat pengakhiran hayat. Tetapi memandangkan orang Maya yang sudah lama mati adalah salah tentang segala-galanya, mengapa kita harus mempercayai mereka mengenai perkara ini?            <
  22. h2>
  23. Pengambilalihan Roboth2>     <p>
  24. Tidak secara menakutkan seperti Vampire Pengambilalihan atau Hidup-Mati Pemberontakan robot masih menjadi pemikiran yang membimbangkan. Kita sudah dikalahkan oleh alat teknologi kami, malah Bill Gates takut pada hari  hamba robot Jepun nya membolak-balikkan dia sehingga  pergelangan kaki dan bertanya (dengan suara robotik yang sesuai)  "p>           <h2
  25. >Ketunggalan Tidak Diterangkan
  26. h2>  
  27.   <p>Kita tidak tahu bagaimana alam semesta bermula, jadi kita tidak boleh pastikan ia tidak akan berakhir begitu sahaja, mungkin hari ini, dan mungkin dengan tiada yang lebih menggembirakan daripada sedutan anti jirim dan sedikit bunyi berdesis.p >  
  28.      
  29.   <h2>Perubahan Iklim Larian h2>  
  30.   <p>Diketepikan oleh sebilangan, nubuatan Al Gore tentang kiamat mungkin tetap tepat.  Sekiranya ia berlaku, kita mungkin perlu bersaing dengan ribut -ribut ganas, kekurangan makanan yang meluas, dan pembaikan penghawa dingin            
  31. <h2
  32. >Epidemi Globalh2>     <p
  33. >Suatu masa di masa hadapan, virus maut boleh  menyerang. Ramalan berbeza tentang punca penyakit, tetapi calon termasuk monyet di hutan Afrika, bioteroris, burung dan babi dengan selesema, pejuang dari masa depan, bangsa asing hingga ke hospital, antibiotic, rumah sakit. IA, dan tidak dicuci pucuk brussel. Walau apa pun sumbernya, itu jelas berita buruk.p>     
  34. div
  35. >      
  36. <div
  37.  kelas="Footer" >     <p
  38.  kelas="Penafian" >Ramalan apokaliptik ini tidak mencerminkan pandangan pengarang.p>      <p
  39. >       <a
  40.  href="Tentang Kami. html">Tentang Kamia>  
  41.     <a href="Penafian. html">Penafiana>  
  42.     <a href="Hubungi Kami. html">Hubungi Kamia>  
  43.   p>  
  44.   <p>Hak Cipta © 2014 p>  
  45. div>   
  46. badan>  
  47. html>  

在不增加任何 CSS 样式表之前，效果如下：

上面通过三个

将页面分成了三个部分，顶部的页眉，中部的内容和底部的页脚。

这个例子中的样式表很简单，整个页面最大宽度设置为 800过长。页眉位于一个带有蓝色边框的盒子中，内容区的两侧都增加了内边距，而页脚在整个页面的底部居中。

ApocalypsePage_Original.css样式文件内容如下：

Kod XML/HTML复制内容到剪贴板
  1. @charset "utf-8";
  2. /* Dokumen CSS */
  3. badan{
  4. /*font-family Untuk menggunakan fon selamat, ikut prinsip khas dahulu dan kemudian umum,
  5. Mula-mula berikan fon yang anda mahu, kemudian fon yang lebih selamat,
  6. Akhirnya berakhir dengan font sans-serif*/
  7. keluarga fon: "Lucida sans Unicode", "Lucida Grande", Geneva, sans-serif
  8. lebar maks: 800px; /*Lebar maksimum tidak melebihi 800 piksel*/
  9. }
  10. /*Gaya kawasan tajuk di bahagian atas halaman*/
  11. .Pengepala {
  12. warna latar belakang: #7695FE; /*Sebarang nilai warna boleh diterima*/
  13. jidar: nipis #336699 pepejal; /*atribut jidar semua-dalam-satu*/
  14. padding: 10px; /* 10 pixel padding, jarak antara sempadan dan kandungan*/
  15. jidar: 10px; /* 10 jidar piksel, jarak antara sempadan dan elemen sekeliling*/
  16. text-align: center; /*Teks ​​pengepala dipusatkan*/
  17. }
  18. /*Tajuk dalam pengepala<h1>Gaya*/
  19. .Tajuk h1{
  20. jidar: 0px;
    21. warna: putih;
    22. saiz fon: xx-besar; /*Kawalan tepat boleh dilakukan dalam unit piksel atau em*/
    23. }
    24. /*Gaya sari kata pengepala*/
    25. .Tajuk .Penggoda{
    26. jidar: 0px;
  26. berat fon: tebal;
  27. }
  28. /*Gaya garisan tandatangan dalam pengepala*/
  29. .Tajuk .Byline{
  30. gaya fon: condong;
  31. saiz fon: kecil;
    32. jidar: 0px;
  32. }
  33. .Kandungan{
  34. saiz fon: sederhana;
  35. keluarga fon: Cambria, Cochin, Georgia, "Times New Roman", Times, serif
  36. /*Padding kiri dan kanan maksimum*/
  37. bahagian atas pelapik: 20px;
  38. pelapik-kanan: 50px;
  39. pelapik-bawah: 5px;
  40. pelapik-kiri: 50px;
  41. ketinggian baris: 120%; /*Jarak antara dua baris teks bersebelahan*/
  42. }
  43. .Kandungan .LeadIn{
  44. berat fon: tebal;
    45. saiz fon: besar;
  45. varian fon: huruf kecil;
  46. }
  47. .Kandungan .h2{
  48. warna: #24486C;
    49. margin bawah: 2px;
    50. saiz fon: sederhana;
    51. }
    52. .Kandungan p{
    53. jidar atas: 0px;
  53. }
  54. .Pengaki{
  55. jajaran teks: tengah;
  56. saiz huruf: x-kecil;
  57. }
  58. .Footer .Penafian{
  59. gaya fon: condong;
  60. }
  61. .Footer p{
  62. jidar: 3px;
  63. }

Dengan cara ini, helaian gaya kami telah dibengkokkan Sekarang mari lihat apa hasilnya? Seperti yang ditunjukkan di bawah:

Gunakan HTML5 untuk membina halaman

Masih merupakan elemen yang mesti ada dalam reka bentuk web, ia merupakan bekas yang intuitif dan serba boleh yang membolehkan anda menggunakan gaya pada mana-mana blok pada halaman. Tetapi masalah dengan
ia sendiri tidak menggambarkan sebarang maklumat tentang halaman tersebut.

Untuk memperbaiki keadaan ini dengan HTML5, gantikan

dengan elemen dengan semantik yang lebih deskriptif.

Dalam ApocalypsePage_Revised.html, atribut kelas Header dan Footer dan

telah digantikan dengan

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <pengepala>  
  2.   <h1>Bagaimana Dunia Boleh Berakhirh1>  
  3.   <p kelas="Penggoda" >Senario yang mengeja     akhir  hidup seperti yang kita tahup>> >  
  4.   <p kelas="Byline" >oleh Ray N. Carnationp>  
  5. pengepala>  
  6. ...   
  7. <pengaki>  
  8.   <p kelas="Penafian" >Ramalan apokaliptik ini tidak mencerminkan pandangan pengarang.p>   
  9.   <p>  
  10.     <a href="Tentang Kami. html">Tentang Kamia>  
  11. ...   
  12.   p>  
  13.   <p>Hak Cipta © 2014 p>  
  14. pengaki>  

当然，对应的 ApocalypsePage_Revised.css 文件也需要进行修改，将其中的 .Header 和 .Footer 曺换换下：

Kod XML/HTML复制内容到剪贴板
  1. /*Gaya kawasan tajuk di bahagian atas halaman*/
  2. pengepala {
  3. warna latar belakang: #7695FE; /*Sebarang nilai warna boleh diterima*/
  4. jidar: nipis #336699 pepejal; /*atribut jidar semua-dalam-satu*/
  5. padding: 10px; /* 10 pixel padding, jarak antara sempadan dan kandungan*/
  6. jidar: 10px; /* 10 jidar piksel, jarak antara sempadan dan elemen sekeliling*/
  7. text-align: center; /*Teks ​​pengepala dipusatkan*/
  8. }
  9. /*Tajuk dalam pengepala<h1>Gaya*/
  10. pengepala h1{
  11. jidar: 0px;
    12. warna: putih;
    13. saiz fon: xx-besar; /*Kawalan tepat boleh dilakukan dalam unit piksel atau em*/
    14. }
Akhir sekali, terdapat satu elemen yang perlu digunakan dalam fail sampel, iaitu elemen
Elemen

hendaklah mengandungi kandungan laporan berita atau artikel, termasuk tajuk, baris kecil dan teks kandungan. Jadi struktur selepas menambah elemen

Kod XML/HTML
Salin kandungan ke papan keratan
  1. <artikel>  
  2.   <pengepala>  
  3.   <h1>Bagaimana Dunia Boleh Berakhirh1>  
  4.   <p kelas="Penggoda" >Senario yang mengeja     akhir  hidup seperti yang kita tahup>> >  
  5.   <p kelas="Byline" >oleh Ray N. Carnationp>  
  6.   pengepala>  
  7.   <div kelas="Kandungan" >  
  8.   <p><span kelas="LeadIn">Sekarang span>, anda mungkin berasa agak baik. Lagipun, kehidupan di dunia maju  selesa<jangkauan kelas="style1">—span>mungkin lebih selesa daripada yang biasa biasa manusia sepanjang semua sejarah yang direkodkan.p>  🎜>
    9. ...   
    10.   
  10. div>   
  11. artikel>  
重新设计后，页面结构如下：



用 添加插图

很多页面都是包含图片的。但是，插图 (figure) 与图片的概念还不完全一样。但是，插图 (figure)文本中会提到它。

一般来说插图应该是浮动的，还会有浮动图题。下面是在文章中添加插图的还会有浮动图题。下面是在文章中添加插图的话段和第二段之间的位置，部分代码如下：

Kod XML/HTML
复制内容到剪贴板
  1. ...   
  2. <div kelas="Kandungan" >  
  3. <p><span kelas="LeadIn">Sekarang span>, anda ...p>   
  4. <div kelas="Rajah Terapung" >  
  5. <img src="tengkorak_manusia. jpg" alt="Tengkorak manusia">  
  6. <p>Adakah anda menjadi orang terakhir berdiri jika salah seorang dari ini  
  7. senario bermain keluar?p>  
  8. div>  
  9. <p>Tetapi jangan terlalu megah. Ada...p>  
  10. ...  

相应的 样式表规则如下：

Kod XML/HTML复制内容到剪贴板
  1. .FloatFigure{   
  2.   terapung: kiri;   
  3.   margin: 0px 20px 0px 0px;   
  4. }   
  5. .FloatFigure p{   
  6.   lebar maksimum: 300px;   
  7.   saiz fon: kecil;   
  8.   gaya fon: condong;   
  9.   margin-bawah: 5px;   
  10. }  

下图展示了这个示例的外观，插图恰好在第一段文本之后，浮动在后面的在后面宽度我们限制住了，让图题显示很充实、很优雅。

HTML5 中提供了一个 元素，图题可以放在 中的
元素里，经过改造，代码如下：

Kod XML/HTML复制内容到剪贴板
  1. <tokoh kelas="Rajah Terapung" >
  2. <img src="tengkorak_manusia. jpg" alt="Tengkorak manusia">
    3. 🎜>
  3. <figcaption>Adakah anda akan menjadi orang terakhir yang berdiri jika salah satu daripada apokaliptik ini
  4. senario akan dimainkan?figcaption>
  5. angka>


Sudah tentu, pemilih dalam helaian gaya boleh diubah suai dengan sewajarnya.

Kod XML/HTMLSalin kandungan ke papan keratan
  1. .FloatFigure{
  2. terapung: kiri;
    3. jidar: 0px 20px 0px 0px
    4. }
    5. .FloatFigure figcaption{
    6. lebar maks: 300px;
    7. saiz fon: kecil;
  7. gaya fon: condong;
  8. jidar bawah: 5px;
    9. }
  10. Akhir sekali, atribut alt dalam elemen boleh dipadamkan, kerana tajuk mengandungi penerangan lengkap imej.
Tambah nota menggunakan


Elemen baharu mewakili kandungan yang tidak berkait rapat dengan teks di sekelilingnya. Ia boleh memperkenalkan topik lain yang berkaitan atau menerangkan perkara yang dibuat dalam dokumen utama. Ia juga boleh digunakan untuk meletakkan iklan dan pautan kandungan yang berkaitan.

Contoh berikut akan digunakan sebagai petikan tarik Gunakan elemen

untuk mencipta kesan ini, tetapi gunakan elemen untuk menjadikan penanda lebih bermakna Sebahagian daripada kod adalah seperti berikut:

Kod XML/HTML

Salin kandungan ke papan keratan

  1.   <p>... (dalam suara robotik yang sesuai) "Siapa ayah awak sekarang?"p>  
  2.   
  3. <ketepikan kelas="PullQuote" >  
  4.   <img src="quotes_start. png" alt="Petikan">  
  5.   Kami tidak tahu bagaimana alam semesta bermula, jadi kami tidak pasti ia tidak sekadar berakhir, mungkin hari ini.   
  6.   <img src="quotes_end. png" alt="Tamat petikan">  
  7. ketepikan>  
  8.   
  9. <h2>Ketunggalan Tidak Diterangkanh2>  


对应的样式表内容如下：

Kod XML/HTML复制内容到剪贴板
  1. .PullQuote{   
  2.   terapung: kanan;   
  3.   lebar maksimum: 300px;   
  4.   bahagian atas sempadan: pepejal hitam nipis;   
  5.   bahagian bawah sempadan: pepejal hitam tebal;   
  6.   saiz fon: 30px;   
  7.   ketinggian garisan: 130%;   
  8.   gaya fon: condong;   
  9.   padding-top: 5px;   
  10.   padding-bawah: 5px;   
  11.   margin-kiri: 15px;   
  12.   margin-bawah: 10px;   
  13. }   
  14. .PullQuote img{   
  15.   menjajarkan menegak: bawah;   
  16. }  
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
4 minggu yang lalu By DDD
R.E.P.O. Simpan Fail Lokasi: Di ​​manakah & bagaimana untuk melindunginya?
4 minggu yang lalu By DDD
Muzium Dua Point: Semua Pameran dan Di Mana Mencari Mereka
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?
7369
15
Tutorial Java
1628
14
Tutorial CakePHP
1355
52
Tutorial Laravel
1266
25
Tutorial PHP
1215
29
Tunjukkan Lagi
Related knowledge
Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

Pemegang Tempat Input HTML Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

See all articles