Méthode de mise en œuvre de la disposition de la grille HTML à neuf carrés_HTML/Xhtml_Production de pages Web-tutoriel HTML-php.cn

Méthode de mise en œuvre de la disposition de la grille HTML à neuf carrés_HTML/Xhtml_Production de pages Web

WBOY

Libérer： 2016-05-16 16:36:01

original

3127 Les gens l'ont consulté

Les mises en page diversifiées de sites Web sont notre spécialité front-end ! Récemment, j'ai vu que la page à onglet par défaut d'UC Browser utilise une disposition en grille à neuf carrés. J'ai fait quelques recherches, et ici, je vais partager le code et apprendre ensemble ! L'effet est le suivant :

Code XML/HTMLCopier le contenu dans le presse-papiers

>
<html>
<tête>
<méta charset="utf- 8">
<titre>Mise en page de grille HTML à neuf carrés entièrement compatible< ;/ titre>
<méta http-equiv=" " > tête>
<corps>
<html>
<tête>
<style type
"texte/ css"> /**Réinitialiser le style d'onglet par défaut du navigateur*/ body,ul,li{margin:0;padding:0;} .xttblog{
largeur : 1200px
hauteur : 170px
marge-haut : 50px ;
marge-gauche : auto
marge droite : auto
}
.box{margin-left : 5px;margin-top : 5px;list-style-type:none;}
.box:après{
contenu : ".";
affichage : bloquer
hauteur de ligne : 0 ;
largeur:0;
hauteur : 0;
clair : les deux
visibilité : masquée
débordement : caché
}
.box li{float:left;line-height: 230px;}
.box li a,.box li a:visité{
display:bloquer
bordure : 5px solide #ccc
largeur : 380px
hauteur : 230px
alignement du texte : centre ;
marge gauche : -5px ;
marge en haut : -5px ;
position : relative ;
indice z : 1 ;
}
.box li a:hover{border-color: #f00;z-index: 2;}
style>
tête>
<corps>
<div class="xttblog" >
<ul classe="boîte" >
<li><a href="#" titre=" 1"><img src="sh.jpg"/>a>li>
<li><a href="#" titre=" 2"><img src="bd.jpg"/>a>li>
<li><a href="#" titre=" 3"><img src="tb.jpg"/>a>li>
<li><a href="#" titre=" 4"><img src="fh.jpg"/>a>li>
<li><a href="#" titre=" 5"><img src="tb.jpg"/>a>li>
<li><a href="#" titre=" 6"><img src="tb.jpg"/>a>li>
<li><a href="#" titre=" 7"><img src="tb.jpg"/>a>li>
<li><a href="#" titre=" 8"><img src="tb.jpg"/>a>li>
<li><a href="#" titre=" 9"><img src="tb.jpg"/>a>li>
ul>
div>
corps>
html>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.