Recommandations intéressantes 💭 Contactez-moi à la fin
✍️ Auteur : Un blogueur passionné par la transformation des idées en code 💂 Page d'accueil : 【Page - 🚀 obtenir plus de codes sources utiles】 🎓 Projet final de développement web : 【📚 cas pratiques complets (1000 projets) 】 🧡 Manières amusantes pour les développeurs de déclarer leur amour : 【💌 site web pour la Saint-Valentin en utilisant HTML (110 projets) 】 🌎 Codes source visuels avancés avec Echarts : 【🔰 Visualisation de données en temps réel avec Echarts (150 projets) 】 🔖 Exemples HTML + CSS + JS : 【🗂️ Exemples HTML + CSS + JS (code impressionnant) en cours de mise à jour…】 🎁 Guide complet pour apprendre le développement web : 【📂 tutoriels vidéo du débutant au niveau avancé (120 Go de contenu) 】
A propos de l'auteur : 💬 Ancien ingénieur en R&D, chef de projet technique, directeur pédagogique ; a reçu deux fois le titre de "Blogueur le plus influent de CSDN" en 2016 et 2020. Après des années de travail, malgré les changements, mon désir de découverte technologique ne s'est jamais éteint. 💪 Je continue à écrire, à partager, et à rester fidèle à mes origines.
I. 🧑🎓 Titre du site
Site sur la culture du thé, thème culturel chinois, art du Peking Opera, style de peinture classique, site sur les arts populaires chinois, etc.
II. ✍️ Description du site
Ce code de page d'accueil utilise la méthode des boîtes DIV, comme l'emboîtement, le flottage, margin, border, background, etc. Le grand conteneur externe est centré, le contenant interne est divisé en trois parties (gauche, milieu, droite), et le bas est disposé horizontalement. Les connaissances en développement web enseignées à l'université sont toutes intégrées, le code CSS est très détaillé, et des effets de transition et de survol sont réalisés avec hover. Des tableaux et formulaires sont ajoutés pour compléter les modules. Pour faciliter l'apprentissage des débutants, certains fichiers sources n'utilisent pas JavaScript, mais peuvent être ajoutés si nécessaire.
Un bon design de site web devrait inclure (selon les besoins personnels)
- La page se compose de la tête, de la barre de navigation (avec menu déroulant), du corps principal et du pied de page.
- Toutes les pages sont liées entre elles, peuvent atteindre des pages de niveau trois, et comprennent entre 5 et 10 pages.
- Le style de la page est uniforme, l'agencement fonctionne normalement, et la technologie Div+CSS est utilisée.
- Le menu est visuel, clair, et les menus secondaires peuvent s'afficher et se connecter normalement.
- Il doit y avoir des effets JavaScript, comme une animation de diapositives automatique ou manuelle.
- La page comporte des éléments multimédias tels que des GIFs, des vidéos, de la musique, ainsi que l'utilisation de formulaires.
- La page est propre, belle, élégante, et originale.
- Non seulement il faut afficher le contenu demandé par l'utilisateur, mais aussi respecter les exigences de mise en page, d'esthétique et de choix de couleurs.
III. 📚 Présentation du site
En termes de conception du site : Une structure de mise en page flottante courante, compatible avec les principaux navigateurs Web et stable en affichage.
En termes de programmation du site : L'utilisation du langage HTML5 + CSS3 + JS pour réaliser les fonctions du site. Le code du site est compatible avec tous les navigateurs principaux, afin que le site soit visible dès son ouverture.
En termes de matériaux du site : Recueillir des images attrayantes provenant de diverses plateformes, sélectionner soigneusement celles adaptées au style du site, puis les ajuster avec Photoshop selon les dimensoins nécessaires.
En termes de fichiers du site : Les types de fichiers comprennent : fichiers de structure HTML, fichiers de style CSS, fichiers d'effets JavaScript, fichiers d'images.
En termes d'édition du site : Le code du site est simple, et peut être exécuté ou modifié avec n'importe quel logiciel d'édition HTML (comme Dreamweaver, HBuilder, VSCode, Sublime, Webstorm, Text, Notepad++).
Parmi ceux-ci : (1) Le fichier HTML comprend : index.html est la page d'accueil, les autres fichiers HTML sont des pages secondaires ; (2) Le fichier CSS comprend : styles de toutes les pages, défilement de texte, agrandissement d'images, etc. ; (3) Le fichier JS comprend : effets dynamiques de diapositives, soumission de formulaire, événements de clic, etc. (certains sites utilisent du code JS).
IV. 🌐 Démonstration du site
V. ⚙️ Code du site
Code de structure HTML
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page d'accueil</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="conteneur_principal">
<div id="bandeau">
</div>
<nav>
<a href="">Accueil</a>
<a href="pinceau.html">Pinceau</a>
<a href="encre.html">Encre</a>
<a href="papier.html">Papier</a>
<a href="brosse.html">Brosse</a>
</nav>
<div id="corps">
<p>
Le pinceau, l'encre, le papier et la brosse sont les outils de bureau chinois, connus sous le nom de « quatre trésors de l'étudiant ». « Pinceau, encre, papier, brosse » ont été mentionnés pour la première fois pendant la dynastie des Jin du Sud. Historiquement, les objets désignés par ces termes ont varié. Pendant la dynastie des Tang, le pinceau, l'encre, le papier et la brosse désignaient spécifiquement le pinceau de Xuan, l'encre de Li Tinggui, le papier de Chengxin Tang, et la brosse de Wuyi. Depuis la dynastie Song, ils désignaient spécifiquement le pinceau de Xuan (Xuancheng), l'encre de Huizhou (Shexian), le papier de Xuan (Jing County), la brosse de Xihui (Shexian), la brosse de Tao (Zhuoni), et la brosse de Duan (Zhaoqing). À partir de la dynastie Yuan, le pinceau de Huzhou (Huzhou) s'est développé, tandis que le pinceau de Xuan s'est progressivement décliné. Après la réforme et l'ouverture, le pinceau de Xuan a retrouvé un regain d'énergie. Xuancheng, en tant que berceau des quatre trésors de l'étudiant, est le lieu d'origine le plus authentique de ces objets et est célèbre dans le monde entier comme « le berceau des quatre trésors de l'étudiant chinois ». Son papier (Jing County), son pinceau (Jing County / Jingde), son encre (Jixi / Jingde), et sa brosse (Jingde) sont renommés à travers le monde et recherchés par les lettrés historiques.
</p>
<p>
L'histoire du pinceau est encore plus ancienne. Avant la dynastie Qin, les noms variaient selon les régions. Le royaume de Chu appelait le pinceau « Yù », le royaume de Yan le nommait « Fú ». Après l'unification de la Chine par la dynastie Qin, on a adopté « l'écriture commune », et le pinceau a obtenu un nom unique. Le pinceau de Xuan est considéré comme l'origine du pinceau. Car depuis longtemps, on dit que « la compétence du pinceau précède tout ».
</p>
<p>
Selon les légendes anciennes, Meng Tian a inventé le pinceau. Selon « le compte rendu du pinceau » écrit par Han Yu de la dynastie Tang, en 223 avant J.-C., Meng Tian, général de la dynastie Qin, a mené une campagne militaire vers le sud contre le royaume de Chu. Il est arrivé dans la région de Zhongshan (dans la zone de Xuancheng). Deux hypothèses existent quant à la localisation exacte. Une hypothèse indique que Zhongshan est aujourd'hui située autour de Xuancheng et Jing County. Une autre suppose que Zhongshan est située près de Lishui, dans la province du Jiangsu. Selon le « Dictionnaire des préfectures et des districts du Yuanhe », le Zhongshan est situé à quinze miles à l'est de Lishui, dans la préfecture de Xuanchou. En raison de la vaste étendue géographique de la préfecture de Xuanchou à l'époque Tang et Song, Lishui faisait partie de la juridiction de Xuanchou.
</p>
<p>
Meng Tian a découvert que les lapins de Zhongshan étaient gras et avaient une fourrure longue, ce qui était idéal. Il a utilisé un tube de bambou comme manche et des poils de lapin (appelés « zi hao ») comme extrémité pour fabriquer un pinceau. On l'appelle le « pinceau de Meng Tian », qui est le premier pinceau de Xuan.
</p>
</div>
<div id="illustrations">
<h1>Pinceau, encre, papier, brosse</h1>
<div id="categorie">
<p>Pinceau</p>
</div>
<div id="categorie">
<p>Encre</p>
</div>
<div id="categorie">
<p>Papier</p>
</div>
<div id="categorie">
<p>Brosse</p>
</div>
</div>
<footer>
© Tous droits réservés***
</footer>
</div>
</body>
</html>
Code de style CSS
* {
margin: 0px;
padding: 0px;
list-style: none;
}
#conteneur_principal {
width: 1000px;
margin: 0 auto;
}
body {
background: url(../images/fond.png);
}
#bandeau {
font-size: 0px;
}
#bandeau img {
width: 1000px;
}
nav {
width: 1000px;
font-size: 0px;
background-color: #3B2818;
}
nav a {
display: inline-block;
width: 200px;
height: 50px;
font-size: 14px;
text-align: center;
line-height: 50px;
text-decoration: none;
color: #fff;
}
nav a:hover {
background-color: #896D58;
border-radius: 20px;
}
#corps {
padding-top: 30px;
width: 1000px;
background-color: #685A4F;
color: #cdc8c2;
}
#corps span {
font-weight: bold;
font-size: 20px;
color: #3B2818;
}
#corps p {
padding-right: 30px;
margin-top: 20px;
text-indent: 32px;
line-height: 30px;
padding-left: 30px;
}
#corps img {
float: left;
width: 400px;
margin-left: 50px;
margin-top: 20px;
margin-right: 30px;
}
#illustrations {
width: 1000px;
padding-top: 30px;
width: 1000px;
background-color: #685A4F;
color: #cdc8c2;
font-size: 0px;
}
h1 {
text-align: center;
font-size: 32px;
margin-bottom: 30px;
}
#categorie {
width: 200px;
display: inline-block;
margin-left: 25px;
margin-right: 25px;
}
#categorie p {
font-size: 16px;
text-align: center;
font-weight: bold;
line-height: 60px;
}
#categorie img {
width: 200px;
height: 200px;
border-radius: 50%;
}
footer {
width: 1000px;
line-height: 60px;
background-color: #3B2818;
color: #ccc;
text-align: center;
font-size: 14px;
}
VI. 🥇 Comment apprendre efficacement
Premièrement, apprenez avec un objectif clair, que ce soit en lisant, en regardant des cours ou en participant à des activités hors ligne. Définissez clairement vos objectifs d'apprentissage, ce que vous souhaitez résoudre et quelle cible vous voulez atteindre.
Deuxièmement, construisez votre propre système de connaissance. Les connaissances sont infinies, les livres sont nombreux. Lorsque nous naviguons dans ces connaissances, ne soyons pas submergés. Pendant l'apprentissage, chaque concept a ses propres limites et contextes. Apprenez à organiser et à synthétiser ces connaissances.
Troisièmement, appliquez ce que vous avez appris.
Parfois, après une journée, vous pensez avoir appris beaucoup de choses utiles. Vous devez alors les relier aux situations de travail et de vie. Les connaissances doivent être mises en pratique. Apprendre est une bonne chose, mais seul celui qui sait comment apprendre a de la valeur.
VII. 🎁 Plus de ressources
- Si mon blog vous a aidé, si vous aimez le contenu de mon blog,
cliquez sur "👍", "✍️", "💙"pour les trois actions ! 【👇🏻👇🏻👇🏻 Suivez-moi | 💬 Obtenez plus de codes sources | Articles utiles】vous aidera à apprendre divers plug-ins web, effets 3D impressionnants, présentation d'images, effets de texte, modèles complets, modèles de projet final pour les étudiants, etc. « Ici, il y a beaucoup de développeurs web, qui partagent leurs connaissances en Node.js. »
3.
Si vous avez des questions techniques, n'hésitez pas à me contacter ! 👇🏻👇🏻👇🏻💬