Le didacticiel d'exemple de code de changement de balise CSS est relativement beau

Nos conceptions recherchent de plus en plus un style concis, dans l'espoir d'afficher plus de contenu dans un espace limité. En même temps, nous avons rencontré quelques problèmes. La simple disposition du contenu rendait toujours la page très longue. Il faut beaucoup de défilement pour disposer le contenu affiché. YAHOO et NetEase ont pris les devants en appliquant la méthode de mise en page par changement d'onglet, brisant les limites de la mise en page conventionnelle et permettant de placer davantage de contenu dans la même zone de taille. Il suffit de cliquer sur différents onglets ou liens pour développer le contenu. Cela ne nécessite pas d'ouvrir une nouvelle page Web, cela se fait simplement au sein de la même page.

1. L'idée globale de mise en œuvre du changement d'étiquette :

Il existe de nombreuses façons de mettre en œuvre la disposition de ce changement d'étiquette, et divers codes circulent également pour. mise en page. Tout d'abord, trions les idées et comment obtenir un tel effet de changement d'étiquette :
1. Tout d'abord, placez un conteneur pour le changement d'étiquette, qui peut prendre la forme d'un onglet ou d'un lien
; 2. Placez du contenu spécifique, et par défaut, l'un d'eux est affiché. Les autres contenus sont masqués ;
3. Lorsque l'utilisateur clique sur un onglet ou un lien, utilisez JavaScript pour passer au calque spécifié pour l'affichage, tandis que les autres calques de contenu sont masqués
4. Effectuez plus tard en profondeur, pour ; Par exemple, supprimez les lignes pointillées du lien et embellissez les graphiques et le texte de la couche de contenu, etc.

Regardons l'image de l'effet final de cet exemple :

2. Sur la base des idées ci-dessus, nous commençons à organiser le code HTML. Nous avons réalisé les plans suivants :

1. Nous organisons un conteneur global et appliquons les cours de classe.
2. Configurez une liste non ordonnée UL comme conteneur pour les onglets ou les liens (détails ci-dessous).
3. Nous configurons respectivement quatre couches comme couches de contenu (nous supposons qu'il y a quatre commutateurs). Veuillez accorder une attention particulière à l'application de la classe
woaicss_con aux quatre couches. Parallèlement, différents identifiants leur sont attribués. C'est pour que javascript puisse prendre le contrôle. Nous définissons le style du calque
sur un élément de bloc, qui affiche le calque de contenu. Les trois autres couches sont toutes masquées.

3. Nous avons commencé à améliorer davantage le code HTML. Ajoutez quelques liens vers la liste non ordonnée UL :

52CSS.com

. Pour obtenir l’effet d’embellissement global. Nous avons également spécifié un identifiant comme woaicsstitle pour la liste non ordonnée UL, afin que JavaScript puisse être utilisé pour le contrôle du style.
2. Nous avons ajouté quatre liens et spécifié la cible du lien comme suit : javascript:void(0). Il faut comprendre que lorsque le lien est « #
», le navigateur reviendra en haut de la page. Nous ne souhaitons pas voir un tel résultat ici, car dans de nombreux cas, notre boîte de commutation
n'est pas forcément sur le premier écran de la page web. Si vous cliquez sur le lien pour revenir en haut, le visiteur ne le fera pas. voyez-le immédiatement. Le sens de
créer un effet de changement d'étiquette est perdu.
3. Nous définissons l'action onclick avascript:woaicssq(x) pour le lien. Ici, nous transmettons des paramètres à javascript pour
exécuter différents scripts afin d'obtenir l'effet de commutation.

4. Commencez à écrire le script javascript :

function woaicssq(num){
for(var id = 1;id {
var MrJin="woaicss_con"+id;
if(id==num) document.getElementById(MrJin).style.display="block"
else
document. (MrJin).style.display="none";
}
if(num==1)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg1"
if ( num==2)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg2";
if(num==3)
document.getElementById("woaicsstitle").className=" woaicss_title woaicss_title_bg3";
if(num==4)
document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg4";
}
Une brève explication du principe de fonctionnement du script javascript :
(Puisque ce site 52CSS.com ne traite que du CSS, nous n'analyserons pas ce script en détail ici)
1. Définissez la fonction woaicssq et récupérez les paramètres du lien de changement d'étiquette, tels que : javascript:woaicssq (2)
2. Déclarez la variable id pour avoir une valeur de 1 et inférieure ou égale à 4. Ce sont les valeurs de nos quatre couches de contenu.
3. Déclarez la variable MrJin comme "woaicss_con"+id; (Veuillez noter que nous définissons l'identifiant de la couche de contenu dans la première étape, par exemple :
id="woaicss_con2".) Lorsque l'identifiant est la valeur spécifiée, alors l'attribut de cette couche est display="block";. Sinon, l'attribut du calque est
display="none". C'est-à-dire que la fonction de commutation consistant à afficher et masquer la couche de contenu est réalisée.
4. Lorsque la variable id est une valeur comprise entre 1 et 4, définissez le style du conteneur avec l'identifiant woaicsstitle, tel que :
woaicss_title woaicss_title_bg3. De cette façon, nous pouvons définir différents styles pour basculer les liens entre différentes classes. Lorsqu'une certaine couche est affichée, nous pouvons donner des instructions aux liens correspondant à cette couche. Comme l'état en surbrillance de l'onglet, etc.

5. Commencez à écrire du CSS :

* {
list-style-type:none
font-size:12px
text-decoration ; none;
margin:0;
padding:0;
}
Déclaration de mise en page générale, supprimez la marque par défaut de l'élément de liste, définissez la taille du texte sur 12px, supprimez la ligne décorative du texte, la marge extérieure et marge intérieure Les marges sont toutes
nulles.

.woaicss {
width:438px;
height:300px;
overflow:hidden; Changez la définition du style de la fenêtre, définissez la largeur et la hauteur, définissez le débordement sur caché, définissez les marges supérieure et inférieure sur 50 px, définissez les marges gauche et droite sur automatique et obtenez un alignement central
horizontal.

.woaicss_title {
width:438px;
height:30px;
background:#fff url(btn_bg.png) no-repeat ; }
Le style de la liste non ordonnée UL, la largeur et la hauteur sont définies et l'image d'arrière-plan est btn_bg.png.

.woaicss_title li {
display:block
float:left
margin:0 2px 0 0; :center;
}
Le style des éléments de la liste non ordonnée, défini comme élément de bloc et appliqué float à gauche, avec une marge droite de 2px. Placez les éléments de la liste en ligne, avec le texte
aligné au centre.

.woaicss_title li a {
display:block;
width:90px
height:30px; fff;
}
　Le style du lien de l'élément de liste est défini sur un élément de bloc et la largeur et la hauteur sont spécifiées. La hauteur de la ligne est de 34 pixels et la couleur est blanche :#fff; >
.woaicss_title li a:hover {
color:#f0f0f0;
text-decoration:underline
}
Le style de survol du lien de l'élément de liste, la couleur est #f0f0f0, et le soulignement est utilisé comme ligne décorative.

.woaicss_title_bg1 {background-position:0 0;}
.woaicss_title_bg2 {background-position:0 -30px;}
.woaicss_title_bg3 {background-position:0 -60px;}
.woaicss_title_bg4 {background-position:0 -90px;}
Veuillez contacter le script javascript à l'étape 4 pour la définition de ces quatre styles. Autrement dit, lorsque la valeur de la fonction change, le style
de la liste non ordonnée est redéfini en conséquence. Ici, nous ajustons le positionnement de l'image d'arrière-plan pour obtenir l'état proéminent de la carte à onglets.

.woaicss_con {
display:block;
width:438px;
height:270px
background:url(con_bg.png) no-repeat 0 0; overflow:hidden;
}
　Définition du style du calque de contenu, spécifiez la largeur et la hauteur et définissez l'image d'arrière-plan con_bg.png. 52CSS.com, veuillez accorder une attention particulière au fait que l'image d'arrière-plan
ici doit être combinée de manière transparente avec l'image d'arrière-plan de la liste non ordonnée UL. Autrement dit, ils semblent former un tout.

6. Enrichissement du contenu :

Nous remplissons la couche de contenu avec certains contenus et l'embellissons, par exemple : (Un seul est expliqué, les trois autres sont identiques.)

Tutoriel de plug-in pour développeur Web Outil de conception auxiliaire de mise en page Web CSS ! Explication graphique détaillée
!

Canal de modèles CSS mis à jour le 5 avril, ajoutant 22 ensembles de modèles

Classiques XHTML et CSS d'entrée de gamme repartir de zéro Série de tutoriels !

Exemple de mise en page DIV+CSS pour commencer (table des matières)

.woaicss_con ul {
width:418px ;
hauteur:250px;
margin:12px auto;
.woaicss_con li {
width:418px
line-height:30px
margin :0 auto; ;
white-space:nowrap;
text-overflow:ellipsis;
overflow: caché 🎜>}
.woaicss_con li a:hover {
color:#069; text-decoration:underline;
}
Ce n'est pas le sujet de cet article, je n'entrerai donc pas dans les détails pour en savoir plus : >>> L'article de 52CSS.com sur la liste UL. production
Seven : Modification de détail

Le lien ici ne joue pas un réel rôle dans la redirection d'URL. C'est juste une étiquette, on peut donc retirer son cadre en pointillés pour
faire. notre page plus soignée et naturelle. Enregistrez le code suivant sous un fichier xuxian.htc :

Nous ajoutons ce code dans le style CSS : a {behavior:url(xuxian. htc )}
De cette façon, le cadre pointillé du lien peut être supprimé (veuillez noter que cet effet n'est pas valide dans FF).

Huit : Effet final et inférences :

Nous pouvons enfin obtenir cet effet, vous pouvez >>> cliquer ici pour voir
Dans notre implémentation Vous pouvez rencontrer une autre situation au travail :
Il faut basculer lorsque la souris passe dessus, et ouvrir le lien vers le contenu correspondant lorsque la souris clique.
Nous pouvons y parvenir en modifiant la liste non ordonnée UL comme suit :

52CSS.com

Standardisation WEB

Nous avons obtenu cet effet grâce à de légers ajustements.

Le didacticiel d'exemple de code de changement de balise CSS est relativement beau_Experience Exchange