exercices de navigation sur des pages Web
Apr 04, 2017 am 11:20 AMQuand 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; }
Copier après la connexion1. 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 demargin: 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; }
Copier après la connexion1 . 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 sura
, 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 deli
60px et une hauteur dea
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; }
Copier après la connexion1
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 chaquea
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 unfloat<a href="http://www.php.cn/wiki/974.html" target="_blank">:left<code>float<a href="http://www.php.cn/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 ; }
Copier après la connexiontransition
Cet 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="http://www.php.cn/wiki/938.html" target="_blank">contour<code>*{<a href="http://www.php.cn/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="http://www.php.cn/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>
Copier après la connexion 对网页进行全局的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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Faire votre première transition Svelte personnalisée

Téléchargement de fichiers avec Multer dans Node.js et Express

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)
