cari

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

WBOY
WBOYasal
2016-05-16 15:46:271848semak imbas

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：
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 sebelumnya：Tutorial menggunakan Localstorage dalam kemahiran tutorial HTML5_html5Artikel seterusnya：Tutorial menggunakan Localstorage dalam kemahiran tutorial HTML5_html5

Artikel berkaitan

Lihat lagi

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kitaPenafianSitemap

© php.cn All rights reserved