Kaedah pelaksanaan HTML susun atur grid sembilan persegi_HTML/Xhtml_Pengeluaran halaman web-html tutorial-php.cn

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

WBOY

Lepaskan： 2016-05-16 16:36:01

asal

3092 orang telah melayarinya

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

>
<html>
<kepala>
<meta charset="utf- 8">
<tajuk>Susun atur grid sembilan persegi HTML yang serasi sepenuhnya< ;/ tajuk>
<meta http-equiv=" " > kepala>
<badan>
<html>
<kepala>
<gaya taip
"teks/ css"> /**Tetapkan semula gaya tab lalai penyemak imbas*/ badan,ul,li{margin:0; padding:0;} .xttblog{
lebar: 1200px;
margin-kiri: auto;
jidar-kanan: auto;
lebar:0;
tinggi: 0;
jelas: kedua-duanya;
keterlihatan: tersembunyi;
limpahan: tersembunyi;
lebar: 380px;
ketinggian: 230px;
jajaran teks: tengah;
jidar-kiri: -5px;
jidar atas: -5px;
kedudukan: relatif;
z-indeks: 1;
gaya>
kepala>
<badan>
<div kelas="xttblog" >
<ul kelas="kotak" >
<li><a href="#" tajuk=" 1"><img src="sh.jpg"/>a>li>
<li><a href="#" tajuk=" 2"><img src="bd.jpg"/>a>li>
<li><a href="#" tajuk=" 3"><img src="tb.jpg"/>a>li>
<li><a href="#" tajuk=" 4"><img src="fh.jpg"/>a>li>
<li><a href="#" tajuk=" 5"><img src="tb.jpg"/>a>li>
<li><a href="#" tajuk=" 6"><img src="tb.jpg"/>a>li>
<li><a href="#" tajuk=" 7"><img src="tb.jpg"/>a>li>
<li><a href="#" tajuk=" 8"><img src="tb.jpg"/>a>li>
<li><a href="#" tajuk=" 9"><img src="tb.jpg"/>a>li>
ul>
div>
badan>
html>

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