Conseils de production de page Web: code XHTML, CSS et JS

Auteur：Eve Cole Date de mise à jour：2025-04-21 07:00:03

Wulin.com (www.vevb.com) Introduction de l'article: Compétences de production de pages Web: XHTML, CSS et JS.

Détails 1 ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….

1. Lorsque le texte et l'image sont sur la même ligne, le texte doit être aligné sur le bas de l'image, et il doit être écrit comme ceci:

<li> N'oubliez pas le mot de passe <img src = align = bottom style = margin-boot: -4px /> </li>

2. Lorsque le texte et l'image sont sur la même ligne, le texte et l'image doivent être centrés et écrits comme ceci:

<li> N'oubliez pas le mot de passe <img src = static / img / xyx.jpg align = middle /> </li>

3. Modifier l'éditeur ouvert par le menu du code source de la vue IE

Ouvrez l'éditeur de registre et entrez Regedit en démarrage

Recherchez l'emplacement suivant: HKEY_LOCAL_MACHINESOFTWAREMICROSOFT Internet Explorew

Passez à IE pour afficher le code source et vous pouvez voir l'effet.

Si l'élément de nom de l'éditeur de la source View ne l'a pas, vous pouvez le créer vous-même.

4. Maximiser automatiquement la fenêtre et ajouter entre <body> et </body>:

setTimeout ('top.moveto (0,0)', 5000);

setTimeout ('top.Resizeto (screen.availwidth, screp.availight)', 5000);

</cript>

5. Window.Opener est en fait la forme parent du formulaire ouvert avec Window.Open.

Par exemple, dans le formulaire parent parentForm, pass Window.open (subform.html), puis dans le subform.html window.opener

Cela signifie ParentForm, vous pouvez définir la valeur du formulaire parent ou appeler la méthode JS de cette manière.

1, Window.Openner.Test (); --- Appelez la méthode Test () sous le formulaire parent;

2. Si Window.Opener existe, définissez la valeur de StockBox dans ParentForm.

if (window.opener &&! window.opener.closed)

{

window.opener.Document.parentform.stockbox.value = symbol;

}

6. Comment actualiser la page

Comment actualiser la page en javascript:

1 History.go (0)

2 emplacement.reload ()

3 emplacement = emplacement

4 emplacement.assign (emplacement)

5 document.execcommand («rafraîchissement»)

6 fenêtre.Navigate (emplacement)

7 emplacement. Replace (emplacement)

8 document.url = location.href

Comment actualiser automatiquement la page:

1. Rafraîchissement automatique de la page: Ajouter <Meta Http-Equiv = Refresh Content = 20> à la zone <Aad>

2. Jump de page automatique: Ajouter <meta http-equiv = rafraîchissement contenu = 20; url = http: //www.webjx.com> à la zone <Aad>

3.js Rafraîchissez automatiquement la page

fonction myrefresh ()

{

window.location.reload ();

}

setTimeout ('myRefresh ()', 1000); // Spécifiez la rafraîchissement une fois en 1 seconde

</cript>

4.JS Frame de rafraîchissement

a) Actualiser la page contenant le cadre pour

parent.location.reload ();

</cript>

b) La fenêtre enfant rafraîchit la fenêtre parent

self.opener.location.reload ();

</cript>

(ou <a href = javascript: ouverter.location.reload ()> rafraîchir </a>)

c) actualiser la page d'un autre cadre

parent.another frameid.location.reload ();

</cript>

7. Si vous avez utilisé des hacks CSS, vous devez savoir que la dénomination avec des sous-oreurs est un hack. Si vous utilisez _Style, il peut faire de la plupart des navigateurs à l'extérieur, IE ignore la définition de ce style, donc en utilisant _ comme séparateur lorsque la dénomination n'est pas standardisée. Un message d'erreur apparaîtra lors des vérifications CSS.

8. IE Méthode d'écriture d'annotation conditionnelle

<! - [si! ie]> Il peut être reconnu sauf c'est-à-dire <! [endif] ->

<! - [Si c'est-à-dire]> Tous les IE sont identifiables <! [endif] ->

<! - [Si c'est-à-dire 5.0]> uniquement IE 5.0 peut reconnaître <! [endif] ->

9. Méthode d'écriture de piratage CSS

Le premier type:

.Div {

Contexte: Orange;

* Contexte: vert! IMPORTANT;

* Contexte: bleu;

}

Le deuxième type:

.Div {

marge: 10px;

* Marge: 15px;

_Margin: 15px;

}

Le troisième type:

#Div {Color: # 333; }

* + html #div {couleur: # 999; }

* html #div {couleur: # 666; }

Détails 2 ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….

1. IE6 et ce qui suit ne reconnaît pas le: Hover pseudo-classe à l'extérieur de la balise. Dans Firefox, IE7, l'effet peut être réalisé correctement. Solution:

#show li.s1 {border: 1px solide # ff9900; Contexte: # 454242;}

#show li.s2 {border: 1px solide # d9d8d8; Contexte: # 312E2E;}

2. Set Haslayout pour les éléments

De nombreux problèmes IE6 (ou IE7) peuvent être résolus en définissant la valeur Haslayout. Le moyen le plus simple de définir la valeur Haslayout pour un élément est d'ajouter la hauteur ou la largeur de CSS (bien sûr, le zoom peut également être utilisé, mais cela ne fait pas partie de CSS). Par exemple, réglé sur la hauteur: 1%. Si l'élément parent ne définit pas la hauteur, la hauteur physique de l'élément ne changera pas, mais elle a déjà la propriété Haslayout.

3. Les personnages apparaissent à plusieurs reprises dans IE6

Assurez-vous que l'affichage: en ligne est défini sur l'élément flottant;

Utilisez la marge-droite: -3px dans les éléments flottants;

4. Priorité de style

1. Style en ligne [1.0.0.0]

2. Sélecteur d'ID [0.1.0.0]

3. Classe, attribut, sélecteur de classe pseudo [0.0.1.0]

4. Tags d'élément, sélecteur de pseudo-éléments [0.0.0.1]

5. Méthode d'écriture CSS d'un élément centré verticalement

#Exm {

Position: absolue;

Gauche: 50%;

en haut: 50%;

Z-Index: 1;

Largeur: 200px;

hauteur: 100px;

marge-gauche: -100px;

marge: -52px;

}

6. Zoom: Normal | nombre

Définit ou récupère le rapport de mise à l'échelle de l'objet. La définition ou la modification de cette valeur de propriété pour un objet qui a été rendu entraînera à nouveau le contenu entourant l'objet. Bien que cette propriété ne soit pas héritable, elle affecte tous les objets enfants de l'objet (enfants).

7. Lorsque l'image et le texte sont disposés côte à côte, le texte de l'image doit être centré verticalement:

1> Définissez la hauteur de ligne: à la hauteur de l'image ou à la hauteur de l'élément parent de l'image.

2> Définissez ensuite la Vertical-Align: Middle in the CSS de l'image;

8. Lorsque l'élément Li contient un élément IMG, un blanc apparaît sous IE6

Solution 1

Faire Li Floating et définir IMG sur l'élément au niveau des blocs

Solution 2

Définir la taille de la police: 0;

Solution 3

Définissez l'alignement vertical d'IMG: en bas;

Solution 4

Définissez le fond de marge d'IMG: -5px;

Détails 3 ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….

Solution: modifier l'ordre des attributs CSS: LVHA

2. Les champs longs continus sous FF ne peuvent pas être automatiquement emballés

Solution: Word-Wrap: Break-Word; Overflow: Hidden;

3. La hauteur du conteneur parent ne peut pas être adaptable sous FF

Solution: effacer le flottement des éléments enfants

4. Un écart est généré sous l'image sous IE

Solution: Définissez IMG comme affichage: bloc ou aligne verticale comme supérieur / inférieur / milieu / texto-fond

Définissez la taille de la police du conteneur parent à zéro, taille de police: 0

5. Il y a un écart de 3px entre l'élément flottant sous IE6 et son élément non flottant adjacent.

Solution: Les éléments non flottants adjacents sont également définis pour flotter;

Les éléments flottants sont définis par rapport à IE6_Margin-droite: -3px;

6. Le contenu Li est affiché dans une ellipse après qu'il soit trop long.

Solution: Espace blanc: Nowrap; (Le texte ne s'enroule pas) Compte de texte: ellipsis; -o-text-overflow: ellipsis; débordement: caché;

7. Le texte ne peut pas être centré verticalement

Solution: la hauteur de la ligne et la hauteur du conteneur sont égales-hauteur de ligne = hauteur;

8. La boîte d'entrée de texte ne peut pas être alignée sur le texte adjacent.

Solution: Définissez la boîte de saisie du texte Vertical-Align: Middle;

9. IE Définissez le style de la barre de défilement

Solution:

corps{

Scrollbar-Face-Color: # F6F6F6;

Scrollbar-Highlight-Color: #FFF;

Scrollbar-Shadow-Color: #eeeeee;

ScrollBar-3Dlight-Color: #eeeeee;

Scrollbar-Arrow-Color: # 000;

Scrollbar-Track-Color: #FFFF;

Scrollbar-Darkshadow-Color: #FFF;

}

10. IE6 ne peut pas définir des conteneurs avec une hauteur de 1px

Solution: débordement: caché

Zoom: 0,8

hauteur de ligne: 1px

Détails 4 ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….

1. Que la couche soit affichée sur Flash

Solution: définissez transparent <param name = wMode value = transparent /> ou <param name = wMode value = opaque /> pour flash

2. Faites une couche verticalement centrée dans le navigateur

Solution: Utilisez le pourcentage de positionnement absolu, avec des valeurs négatives des correctifs externes.

Position: absolue;

en haut: 50%;

Gauche: 50%;

marge: -100px automatique Auto -100px;

Largeur: 200px;

hauteur: 200px;

3. Ajouter aux favoris

Solution: <Script Type = Text / JavaScript>

// <! [Cdata [

Fonction Bookmark () {

var title = document.title

var url = document.location.href

if (window.sidebar) window.sidebar.addpanel (titre, url,);

else if (window.opera && window.print) {

var mbm = document.create_r_relement_x ('a');

MBM.SetAttribute ('Rel', 'Sidebar');

MBM.SetAttribute («HREF», URL);

MBM.SetAttribute («Title», titre);

mbm.click ();}

else if (document.all) window.external.addfavorite (URL, titre);

}

//]]>

</cript>

<a href = javascript: Bookmark ()> Ajouter aux favoris </a>

Détails 5 ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….

1. Comment rédiger des listes de nouvelles communes:

<li> <span> 6 juin 2006 </span> <a href = #> Titre des nouvelles 01 </a> </li>

<li> <span> 6 juin 2006 </span> <a href = #> Titre des nouvelles 02 </a> </li>

<li> <span> 6 juin 2006 </span> <a href = #> Titre des nouvelles 03 </a> </li>

<li> <span> 6 juin 2006 </span> <a href = #> Titre des nouvelles 04 </a> </li>

</ul>

2.ie implémente le gradient d'arrière-plan de la page (FF et Chrome ne prennent pas en charge)

De haut en bas:

Body {Filter: PROGID: dxiageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # ffffff, endColorstr = # 000000);}

En haut de gauche en bas à droite:

Filtre: Alpha (style = 1, opacité = 25, fini -opacity = 100, startx = 50, finadX = 100, starty = 50, finidy = 100); Color en arrière-plan: SkyBlue;}

De gauche à droite

Body {Filter: PROGID: dxiageTransform.microsoft.gradient (GradientType = 1, startColorstr = # ffffff, endColorstr = # 000000);}

De haut en bas

style = filtre: PROGID: dxiageTransform.microsoft.gradient (gradientType = 0, startColorstr = bleu, endColorstr = blanc);

3. Le style d'un volant atteint une variété d'effets et peut être utilisé de manière flexible

#outer a {border: 1px solide # 069;}

#OUTER A: Hover {Border: 1px Dashed # C00;}

4. Faire: Aucun; Différence par rapport à la bordure: 0

Différences théoriques des performances:

bordure: 0; Définissez la bordure sur 0 pixels bien qu'elle soit invisible sur la page, selon la valeur par défaut de la bordure, le navigateur rend toujours la largeur de bordure / bordure de bordure, c'est-à-dire que la valeur de mémoire a été occupée. Border: aucun; Réglez la bordure à nulle, c'est-à-dire qu'il n'y a pas d'action de rendu lorsque le navigateur ne fait aucun, c'est-à-dire que la valeur de mémoire ne sera pas consommée.

Différences de compatibilité:

La différence de compatibilité est uniquement pour les navigateurs IE6, IE7, le bouton de balise, l'entrée, et cela se produira sous les thèmes XP de Win, Win7 et Vista. Lorsque la frontière n'est pas, il semble que la frontière non valide pour IE6 / 7 existe toujours. Lorsque la bordure est 0, elle semble plus efficace que rien. Tous les navigateurs cachent constamment la frontière.

Comment faire une bordure: aucun; entièrement compatible? Ajoutez simplement des attributs d'arrière-plan au même sélecteur

5.CSS implémente la disposition des contour multi-colonnes, la marge intérieure positive et la marge extérieure négative

Appliquez des styles à chaque colonne qui doit atteindre le contour: .e {padding-bottom: 32767px; marge-fond: -32767px;}

6.Position: relatif; utilisation spéciale? ? ? ?

* {marge: 0; rembourrage: 0; police: normal 12px / 25px Songti;}

corps {fond: # f8f8f8;}

ul {list-style: Aucun; largeur: 300px; hauteur: 25px; marge: 20px auto;}

li {float: gauche; largeur: 86px; hauteur: 25px; texte-adign: centre; marge: 0 -5px; affichage: en ligne;}

un {couleur: #ffff; Float: à gauche; largeur: 86px; hauteur: 25px; en haut: 0; gauche: 0; fond: URL (***. GIF) centre central sans répétition;}

A: Hover {Color: # 000; arrière-plan: URL (***. GIF) 0 0 sans répétition; largeur: 86px; position: relative;}

Détails 6 ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….

1. InnerText: le contenu de la position de début à la position finale, n'inclut pas la balise innerhtml

OUTERHTML: contient innerhtml et étiquettes

test.innerText: test1 test2

test.innerhtml: <span> test1 </span> test2

test.outerhtml: <div id = test> <span> test1 </span> test2 </div>

2. Numéro (): Lorsqu'une chaîne contenant des caractères non numériques est utilisée comme paramètre, le résultat est nan

parseInt (): convertir la chaîne en un nombre aussi bas que possible de gauche à droite jusqu'à ce qu'il s'arrête lorsqu'un non-chiffre est rencontré

isnan (): renvoie true lorsque le paramètre n'est pas un nombre;

3. A = 23,50abc

typeof (a) = chaîne

parsefloat (a) = 23,5

Parseint (a) = 23

Nombre (a) = nan

4. JS Les noms de variables contiennent des nombres soulignés par des panneaux en dollars et ne peuvent pas commencer par les nombres

5. GetElementsByTagname_R () doit être récupéré après le chargement du document

6. Nodetype: 12 types, 1 représente le nœud d'élément et 3 représente le nœud de texte

Nodename: représente le nom du nœud. S'il s'agit d'un nœud de texte, cela signifie #Text

nodevalue: représente la valeur du nœud

EG: Obtenez le nœud if (obj.nodename.tolowercase () == 'li') {}

Modifiez le contenu texte de p document.getElementsByTagName_R ('P') [0] .FirstChild.Nodevalue = ''

7. Nœud parent au nœud enfant

ChildNodes: liste de tous les nœuds enfants de premier niveau dans l'élément, à l'exclusion des nœuds enfants plus profonds

obj.firstchild = obj.childnodes [0]

obj.lastchild = obj.childnodes [obj.childnodes.length-1]

HaschildNodes () détermine si l'élément a des enfants et renvoie une valeur booléenne

7. Nœud enfant au nœud parent

var parentelm = myLinkitem.parentNode;

while (parentelm, className! = 'syna' && parentelm! = 'document.body')

parentelm = parentelm.parentNode

8. Modifier les propriétés des éléments

1) Obtenez ou définissez la forme des propriétés d'objet

var mainImage = document.getElementByidx_x ('nav' '). GetElementsByTagName [' img '] [0];

mainImage.src = '';

mainimage.;

2) Utiliser des méthodes getAtTribute () et setAttribute ()

Détails 7 …………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….

1. Convertir les nombres en une forme qui a x décimales fonctionnent rond à (base, précision)

{var m = math.pow (10, précision);

var a = math.round (base * m) / m;

retourner a;

}

var n = 3,942487;

Roundto (n, 3) = 3,942

Roundto (n, 0) = 3

2. Créer des nombres aléatoires contraints

fonction Randombetween (min, max)

{return min + math.floor (math.random () * (max-min + 1))}

3. Convertir les nombres en chaînes

var a = 10;

a = chaîne (a); / a = a.toString ();

4. URL de codage

var a =? p = e;

var b = Escape (a);

var c = (b);

5. Changer le type d'éléments dans le document

p ---> div

Créez d'abord un élément div, puis copiez le nœud enfant de P dans la div, et enfin remplacez P par div

6. Combien de paramètres sont nécessaires pour une fonction

fonction Add (n1, n2) {}

return num = add.length;

7. Combien de paramètres sont passés dans une fonction

fonction add (n1, n2) {

return arguments.length;}

Détails 8 ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….

1). Affichage: bloc en ligne; Comme son nom l'indique, il s'agit d'une forme de bloc en ligne et la largeur de hauteur peut être définie.

.Element-classe {

Affichage: -moz-inline-stack; // Firefox uniquement code

Affichage: bloc en ligne; // quelques navigateurs standard

Zoom: 1; // ie seulement

* Affichage: en ligne; // IE SEULEMENT CONNAISSE CE CODE (CSS Hack)

}

2) .Cian le flotteur

.ClearFix: après {visibilité: caché; affichage: bloc; police-taille: 0; contenu :; clairement: les deux; hauteur: 0;}

.ClearFix {Zoom: 1;}

3). Ajouter une icône personnalisée dans la barre d'adresse

Tout d'abord, nous devons pré-fabriquer un fichier d'icônes avec une taille de 16 * 16 pixels. L'extension de fichier est ICO et la télécharge dans le répertoire correspondant. Ajoutez le code suivant entre le fichier source HTML <A-Head> </ Head>: <Link Rel = Icon Nom Href = L'adresse de l'image (notez qu'elle correspond au répertoire tout à l'heure)>. Bien sûr, si l'utilisateur navigue en utilisant IE5 ou supérieur, c'est encore plus facile. Téléchargez simplement l'image sur le répertoire racine du site Web et il peut être automatiquement reconnu!

4). Lors de la définition de l'affichage: le conteneur vide du bloc dans IE6 sur une hauteur plus petite, comme <p style = hauteur: 1px;> </p>, vous constaterez que sa hauteur ne peut pas être inférieure à une certaine valeur. Solution: Définissez le débordement: caché.

5). Le texte est coupé avec des ellipses

div {largeur: 200px; hauteur: 100px; débordement: caché; text-overflow: ellipsis; white-espace: nowrap;}