Résumé de l'expérience du projet de page statique HTML5+CSS3

J'étudie le front-end depuis un moment. Je lis des connaissances théoriques dans des livres, mais il y a très peu de projets pratiques. Le frère aîné dit souvent que si vous voulez connaître votre force et la quantité de connaissances que vous maîtrisez, la meilleure façon est de pratiquer. La pratique vous donnera la vraie connaissance. J'ai donc décidé d'améliorer mon niveau de codage pendant ce séjour principalement grâce à la pratique de projets et à l'aide de connaissances théoriques. La première étape consiste à faire quelques exercices de mise en page statique HTML5+CSS3, à vérifier les points de connaissances manquants et à résumer certaines erreurs rencontrées lors de la pratique. L'ébauche de conception de la page a été principalement trouvée sur Internet. J'ai également essayé de couper l'image, de mesurer la position, d'obtenir les attributs du contenu, etc., et de faire comme si j'étais réellement en train de terminer un projet.

La première page a été trouvée sur la plateforme Design Master. La conception des pages sur cette plateforme recommande principalement des designs étrangers et certaines pages de recommandations de conception Web sont relativement concises et généreuses. Par rapport aux pages de style chinois au contenu explosif, j'apprécie également les designs étrangers.

Les rendus du design sont les suivants :

Conception La largeur de la page du manuscrit est de 1 550 pixels et le corps principal de la page est une grille de 12 colonnes de 960 pixels. La largeur totale du design dépasse de loin la largeur de la fenêtre d'affichage du navigateur. Ainsi, lors de la conception, comme il s'agissait d'une page statique et que je n'utilisais pas de design réactif, j'ai défini toutes les largeurs et hauteurs en pixels. Utilisez l'élément div pour définir la largeur sur 960 px et définissez l'attribut margin sur 0 px auto. Cela garantira que le contenu principal de la page est centré dans la fenêtre du navigateur et que vous n'aurez plus à vous soucier de la largeur totale de la page. page.

Ma photo restaurée est :

Voir Lors de la conception le psd, mon idée est à peu près comme ça. Tout d'abord, il y a un en-tête de barre de navigation contenant deux navigations, une barre de saisie et une image de logo ; puis il y a une bannière de site Web qui comprend un grand titre et un paragraphe et deux. des connexions de type bouton ; l'étape suivante est le contenu principal de la page Web, qui contient trois modules avec la même mise en page. Le contenu comprend des images, des titres, des paragraphes et un lien, et il y a également une rangée de liens de navigation en bas. ; et enfin la page Le pied de page comprend une ligne de liens de navigation et deux paragraphes de texte.

Sur la base de cette idée, j'ai également commencé à construire le cadre de la page, qui est divisé en quatre parties : en-tête, section, principale et pied de page. Et écrivez les balises requises en fonction du contenu de chaque partie et ajoutez l'attribut class si nécessaire. L'étape suivante consiste à compléter le contenu de la page petit à petit pour chaque partie et à ajouter des styles à l'aide de CSS3. Voir mon explication détaillée ci-dessous.

---

1. Partie d'en-tête

Ce qui précède est l'image complète de l'en-tête. Premièrement, les deux navigations sont divisées en deux parties. La première ligne utilise des balises de navigation pour insérer des liens et deux zones de saisie sont traitées en utilisant le rayon de bordure pour en faire des coins arrondis, mais malheureusement il y a des bords irréguliers. Pas particulièrement délicat. Les lignes verticales des deux côtés du lien sont serties de bordures colorées. La navigation dans la ligne suivante consiste à utiliser une liste non ordonnée et à définir la propriété float à gauche pour la faire flotter vers la gauche. L'image du logo est le résultat de la découpe du dessin de conception. Le défaut est qu'il y a un petit triangle dans le film après le lien comme signe d'un lien secondaire, je ne l'ai pas ajouté parce que j'étais paresseux (coupable) . Le code HTML détaillé est le suivant :

<header>                 <nav class="firstnav"><div class="headerlimit"> <a href="#" class="firstnav1">Business</a><a href="#" class="firstnav2">Personal</a><input type="text" name="email" placeholder="  Leave your email" class="inputcase1" /><input type="text" name="omit" palaceholder="……" class="inputcase2" /></div><nav class="secondnav"> <div class="headerlimit"> <img src="images/Logo.png" /><div class="headnav"><ul><li><a href="#">Buy</a></li><li><a href="#">Sell</a></li><li><a href="#">Manage</a></li></ul></div></div></nav>    </header>

　　其中遇到了一个问题是，图片和无序列表在浏览器中显示时分为了两行，查找了资料以后是使用div元素包含无序列表，并且设值margin和padding的值才使得两个元素在同一行中。无序列表表示链接的CSS代码如下：

.headnav {width: 280px;padding-left: 170px;margin-top: -70px;
}.headerlimit ul {list-style-type: none;padding-left: 0px;
}.headerlimit li a{text-decoration: none;border-left: 1px solid #fff;border-right: 1px solid #ebebeb;width: 90px;text-align: center;line-height: 25px;color: #68676a;float: left;font-family: PTSans;font-size: 14px;
}

二、Banner部分

　　背景的大图是使用background-img实现的，而在这个banner部分的设置中使用了position的定位方法，将所有的文字内容模块相对于背景模块的绝对定位，使得在缩小视口的时候，两个模块可以保持位置的不变形、不一位，position属性值也是CSS中很重要的一点。HTML代码和两个模块的绝对定位CSS代码如下：

<section class="banner"><div class="backimg"><div class="bannercontent"> <div class="bannerintr"> <h1>Paul makes your payments easy</h1> <p>With over 1 Billion users, paypal is simply the best way to pay</p> </div> <div class="button1"> <a href="#">  <p>Check this awesome button right here</p> </a> </div> <div class="button2"> <p>Sign up for a paypaul account today</p> <button><a href="#">Click here to join</a></button></div></div></div></section>

.bannercontent {width: 960px;margin: 0px auto;position: absolute;left: 10px;top: 25px;
}.backimg {width: 1055px;height: 415px;margin-left: 195px;background-image: url(../images/banner.png);position: relative;
}

三、Main部分

　　因为三个模块的布局是一模一样的，所以只要使用同一个class属性就能保证样式相同。图片和文字都处理都比较简单，没有特别需要指出的了，因此代码也省略了。

四、Footer部分

　　在footer部分，导航栏的部分同样是使用无序列表的方式，要注意的是，在设置的时候发现，因为无序列表中设置了向左浮动，因此会影响后面的两个段落在浏览器中的显示，需要使用clear: both; 清除两个段落的浮动，才能使得两个段落在导航栏的下方。问题产生和清除浮动的部分CSS代码如下：

.footernav li a{color: #fff;font-size: 12px;margin-right: 15px;margin-top: 35px;float: left;
}.footercontent {width: 960px;margin: 0px auto;padding: 25px 0px;clear: both;
}

　

---

Bien entendu, vous rencontrerez également quelques problèmes lors de la mise en œuvre de cette page statique selon le brouillon de conception, comme connaître la taille et la taille de chacun L'espacement entre les espaces, les attributs de taille et de couleur des polices, etc. sont des opérations très gênantes (Tucao) . Bien sûr, le vrai problème que vous rencontrez n’est pas celui-ci, mais quelque chose qui, selon vous, devrait ressembler à ceci, il aura un aspect différent lorsqu’il sera affiché dans le navigateur. C’est la source de maux de tête. Par conséquent, au cours du processus de mise en œuvre, nous avons également enregistré certains problèmes rencontrés et essayé d’en découvrir les raisons et les solutions.

1. Lorsque le texte et les images apparaissent sur la même ligne ou dans le même élément div, le navigateur s'exécutera sur des lignes différentes.

Après avoir interrogé les informations, trois solutions ont été proposées :

①En CSS, définissez l'alignement vertical pour l'attribut div: middle ; Ce div contient des images et du texte, de sorte que les éléments du div puissent être alignés verticalement au centre.

② Lorsque l'image est une image d'arrière-plan, définissez l'image à l'aide de background-img et modifiez le remplissage du texte pour qu'il puisse être sur la même ligne.

③Placez l'image et le texte dans deux divs et définissez la valeur de la marge. C'est la méthode que j'utilise, qui est un peu plus gênante que la première méthode.

2. Les éléments en ligne ne prennent pas en charge les valeurs des attributs de marge et de remplissage​​dans les directions supérieure et inférieure. Vous devez utiliser la hauteur de ligne pour les modifier.

3. Les éléments ont souvent des marges supplémentaires de manière inexplicable. Il s'agit en fait de l'effet par défaut du navigateur. Ces effets doivent être effacés manuellement avant de définir le style CSS. Par exemple, la liste non ordonnée ul aura une marge gauche supplémentaire.

---

Résumé

J'ai aussi imité le projet de Microsoft Chine il y a longtemps. temps Si vous utilisez votre temps libre pour le terminer, vous n'avez pas une vue d'ensemble de la structure et de l'aménagement, vous dépenserez donc beaucoup d'énergie pour le terminer. Mais faire cela au cours des deux derniers jours ne sera pas si fatigant. Je pensais que je serais très rouillé puisque je n'ai pas pratiqué le codage depuis longtemps, mais en fait, je connais toujours les points de connaissances que je connais, et je le fais toujours. Je n'ai pas les points de connaissance que je ne connais pas. Rechercher des informations et trouver des méthodes à appliquer aux exemples peut vraiment améliorer la compréhension et la mémoire des points de connaissance. Même si le niveau n'est pas encore très élevé, je suis très heureux d'avoir progressé et de continuer à travailler dur.

Je continuerai à pratiquer la mise en œuvre de pages statiques jusqu'à ce que je sois très compétent, puis je commencerai à pratiquer des pages dynamiques en JavaScript. Cela a toujours été ma procrastination. osez essayer ! Continuez votre bon travail et rattrapez tout le monde !

Le projet complet, y compris le dessin de conception psd, le code HTML et le code CSS, est sur github. J'espère que quelqu'un de disposé et capable pourra signaler mes lacunes, et moi. j'espère pouvoir travailler avec tout le monde, communiquer et progresser ensemble !

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!