Quand je faisais les exercices de Navigation, j'ai regardé les codes sources des sites Web à succès pour m'entraîner. J'espère qu'à travers ces codes réussis, je pourrai apprendre le. front-end derrière le code. Les idées de programmation des ingénieurs.
En visualisant le code source, j'ai également appris beaucoup de détails que j'avais ignorés auparavant, et je sens que j'en ai beaucoup bénéficié.
Lorsque j'ouvre le fichier css de Lagou.com, la première partie est marquée de annotations pour marquer l'époque du document, l'auteur, et certains éléments du style feuille facile à visualiser en couleur, en largeur et en hauteur.
La deuxième partie contient quelques styles d'éléments initialisés et des classes publiques initialisées.
La troisième partie est le style de chaque partie de la page Web.
Le premier exercice de navigation que j'ai fait était la navigation de Lagou.com.
exercices de navigation sur des pages Web
Observation et réflexion
1. De combien de niveaux d'imbrication dois-je écrire pour cela. navigation?
2. Voulez-vous définir la largeur ou utiliser 100 % ?
3. Comment le centrer ?
4. Comment réaliser la fine ligne entre la connexion et l'inscription.
Ce sont les problèmes que j'ai découverts, et il y aura certainement des problèmes au fur et à mesure.
Définissez le style de l'élément environnant
#header{
background: #fafafa;
height: 60px;
min-width: 1024px;
border-top: 3px solid #00B38A;
}
#header .wrapper{
width: 1024px;
margin: 0 auto;
}1. La périphérie la plus externe #header définit la hauteur de la navigation et la couleur d'arrière-plan de la navigation. , en ajoutant un style de bordure supérieure.
2. La largeur est définie dans le .wrapper intérieur et la largeur minimale est définie dans le #header extérieur. Les deux attributs ont la même valeur. Bien entendu, la largeur de l'écran d'affichage doit être supérieure à 1024px, donc ajouter .wrapper à l'intérieur de margin: 0 auto; peut centrer le contenu avec une largeur de 1024px.
Effectuer la disposition de base des éléments de navigation
exercices de navigation sur des pages Web
.wrapper .logo{
float: left;
margin-top: 7px;
width: 229px;
height: 43px;
background: url(image/logo.png) no-repeat;
}
.wrapper .navheader{
float: left;
margin-left: 30px;
}
.navheader li{
float: left;
}
.wrapper .loginTop{
float: right;
}
.loginTop li{
float: left;
}1 . Lors de la définition du logo, la taille originale de l'image est de 229×43, ce paramètre n'étirera donc pas l'image.
2. Le logo et le menu de navigation flottent à gauche, et le bouton de connexion et d'enregistrement flotte à droite.
Modifier le style de base du menu de navigation
Remarque : Lorsque la souris passe sur a, il doit y avoir une bordure de 3px-bas, mais ce 3px Il ne peut pas dépasser #header. Ce qu'il faut faire, c'est faire une hauteur de li 60px et une hauteur de a 57px, pour que lorsque la souris passe dessus, le bord inférieur soit affiché sans dépasser. .
exercices de navigation sur des pages Web
.navheader li{
height: 60px;
padding: 0px 20px;
}
.navheader li a{
display: block;
line-height: 57px;
text-decoration: none;
color: #999;
font-size: 20px;
}
.navheader li a:hover{
color: #333;
border-bottom: 3px solid #00B38A;
}
.loginTop li{
height: 30px;
line-height: 30px;
color: #FFF;
background: #00B38A;
}
.loginTop li a{
display: block;
line-height: 30px;
padding: 0px 10px;
color: #fff;
text-decoration:none ;
}
.loginTop li a:hover{
color: #CCEAE3;
}1 a est un élément en ligne et doit être converti en un. élément de niveau bloc, afin que la hauteur puisse être définie. Si l'élément en ligne n'est pas défini au niveau bloc et que la hauteur de ligne est définie directement, bien que la hauteur puisse être modifiée et occuper le flux de documents, l'espace occupé par la hauteur de ligne n'appartient pas à a.
2. Ceux qui font attention peuvent constater que je définis uniquement la hauteur de ligne pour chaque a et que je n'ai pas défini la hauteur, car dans les versions IE6 et 7 du navigateur, j'ai constaté que lorsque la hauteur n'était pas définie, J'ai trouvé a Il n'a pas la largeur qui remplit l'élément parent comme un véritable élément de niveau bloc. Mais après avoir réglé la hauteur, j’ai découvert qu’ils avaient soudainement les caractéristiques d’éléments de niveau bloc. Mais nous ne voulons pas qu’il fasse ça, donc je n’écrirai pas la hauteur. Cet effet est compatible. Si vous l'écrivez, c'est très simple. Ajoutez simplement un float<a href="//m.sbmmt.com/wiki/974.html" target="_blank">:left<code>float<a href="//m.sbmmt.com/wiki/974.html" target="_blank">:left</a> <.>
3. IE6 ne prend pas en charge les images au format png. . . . .
En fait, à première vue, cela semble avoir l'apparence, mais j'ai constaté que lorsque je passe la souris sur le menu, le changement de menu est progressif, pas soudain.
.navheader a,.loginTop a{
transition: all .2s ease-in-out ;
-webkit-transition: all .2s ease-in-out ;
-moz-transition: all .2s ease-in-out ;
-o-transition: all .2s ease-in-out ;
}transitionCet attribut peut être défini, et lorsqu'un certain style d'un élément change, le dégradé peut être modifié. Il peut réaliser des images plus excitantes et doit acquérir les connaissances pertinentes de html5. Je continuerai à apprendre.
*{<a href="//m.sbmmt.com/wiki/938.html" target="_blank">contour<code>*{<a href="//m.sbmmt.com/wiki/938.html" target="_blank">outline</a>:none;} : aucun ;Définit le contour de tous les éléments sur Aucun par défaut.
body,p,a,span,ul,li{margin: 0;padding: 0;} Définissez les marges intérieures de tous les éléments sur 0.
ul.<a href="//m.sbmmt.com/wiki/1081.html" target="_blank">reset</a>{list-style:none;}去除掉列表的默认样式
首先分出body与footer两个部分。这里面还涉及相应的height与min-height设置，但是这些又涉及一些兼容的问题，所以我就先不写了，回头再另写一篇。
最外层嵌套使用id='header'标记，方便寻找里面子元素，里面就可以用class啦，.wrapper可以用作包围元素做公共类使用。class="navheader"与class="loginTop"可以作为查找元素使用。
ul>li>a，一般的导航基本上都是这样的结构。
ul前的a可以以背景为图片，做链接。
第一步：设计出html结构，并为元素设置相应的id与类
<p> </p><p> </p><p> <a></a> </p>
对网页进行全局的css设置。
我先写下做导航时我用到的
对导航进行css设置
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
