cari

Rumah >hujung hadapan web >html tutorial >Kaedah pelaksanaan HTML susun atur grid sembilan persegi_HTML/Xhtml_Pengeluaran halaman web

Kaedah pelaksanaan HTML susun atur grid sembilan persegi_HTML/Xhtml_Pengeluaran halaman web

WBOY
WBOYasal
2016-05-16 16:36:013121semak imbas

Susun atur tapak web yang pelbagai adalah kepakaran bahagian hadapan kami! Baru-baru ini saya melihat bahawa halaman tab lalai Pelayar UC menggunakan susun atur grid sembilan persegi. Saya melakukan beberapa penyelidikan, dan di sini, saya akan berkongsi kod dan belajar bersama! Kesannya adalah seperti berikut:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >
  2. <html>
  3. <kepala>
  4. <meta charset="utf- 8"> 
  5. <tajuk>Susun atur grid sembilan persegi HTML yang serasi sepenuhnya< ;/ tajuk>
  6. <meta http-equiv=" " > kepala>
  7. <badan>
  8. <html>
  9. <kepala>
  10. <gaya taip
    11. =
  11. "teks/ css"> /**Tetapkan semula gaya tab lalai penyemak imbas*/ badan,ul,li{margin:0; padding:0;} .xttblog{
  12. lebar: 1200px;
    13. tinggi: 170px;
    14. jidar atas:50px;
  14. margin-kiri: auto;
  15. jidar-kanan: auto;
    16. }
    17. .box{margin-left: 5px;margin-top: 5px;list-style-type:none;}
    18. .kotak:selepas{
    19. kandungan: ".";
    20. paparan: blok;
    21. ketinggian baris: 0;
  21. lebar:0;
  22. tinggi: 0;
  23. jelas: kedua-duanya;
  24. keterlihatan: tersembunyi;
  25. limpahan: tersembunyi;
    26. }
    27. .box li{float:left;line-height: 230px;}
    28. .box li a,.box li a:dilawati{
    29. paparan:sekat;
    30. sempadan: 5px pepejal #ccc;
  30. lebar: 380px;
  31. ketinggian: 230px;
  32. jajaran teks: tengah;
  33. jidar-kiri: -5px;
  34. jidar atas: -5px;
  35. kedudukan: relatif;
  36. z-indeks: 1;
    37. }
    38. .box li a:hover{warna-sempadan: #f00;z-index: 2;}  
  38. gaya>  
  39. kepala>  
  40. <badan>  
  41. <div kelas="xttblog" >  
  42.  <ul kelas="kotak" >  
  43.   <li><a href="#" tajuk=" 1"><img src="sh.jpg"/>a>li>  
  44.   <li><a href="#" tajuk=" 2"><img src="bd.jpg"/>a>li>  
  45.   <li><a href="#" tajuk=" 3"><img src="tb.jpg"/>a>li>  
  46.   <li><a href="#" tajuk=" 4"><img src="fh.jpg"/>a>li>  
  47.   <li><a href="#" tajuk=" 5"><img src="tb.jpg"/>a>li>  
  48.   <li><a href="#" tajuk=" 6"><img src="tb.jpg"/>a>li>  
  49.   <li><a href="#" tajuk=" 7"><img src="tb.jpg"/>a>li>  
  50.   <li><a href="#" tajuk=" 8"><img src="tb.jpg"/>a>li>  
  51.   <li><a href="#" tajuk=" 9"><img src="tb.jpg"/>a>li>  
  52.  ul>  
  53. div>  
  54. badan>
  55. html>

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

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：tiadaArtikel seterusnya：用HTML和CSS打造属于自己的暖男“大白”_HTML/Xhtml_网页制作

Artikel berkaitan

Lihat lagi