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>:
<Script Language = JavaScript>
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
<Script Language = JavaScript>
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
<Script Language = JavaScript>
parent.location.reload ();
</cript>
b) La fenêtre enfant rafraîchit la fenêtre parent
<Script Language = JavaScript>
self.opener.location.reload ();
</cript>
(ou <a href = javascript: ouverter.location.reload ()> rafraîchir </a>)
c) actualiser la page d'un autre cadre
<Script Language = JavaScript>
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;}
<li> </li>
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 ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….
1.
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:
<ul class = list>
<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
<div id = test> <span> test1 </span> test2 </div>
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;}