Explorez l'application de CSS et JavaScript en HTML

Ces dernières années, avec le développement rapide d'Internet et les progrès continus de la technologie, la conception Web et le développement front-end sont devenus un point chaud d'attention. En tant que deux langages importants pour la conception Web et le développement front-end, CSS et JavaScript sont essentiels à la production Web. Cet article utilisera NetEase comme étude de cas pour explorer l'application de CSS et JavaScript en HTML et comment ils fonctionnent ensemble pour créer un beau site Web.

NetEase est la société Internet la plus connue en Chine et l'un des premiers portails Internet. L'esthétique et l'intégrité fonctionnelle de son site Web jouissent d'une très grande réputation dans l'industrie. Parmi eux, CSS et JavaScript jouent un rôle clé dans le site Web NetEase. Ce qui suit prendra la page d'actualités NetEase comme exemple pour analyser une par une l'application de ces technologies dans la conception Web.

1. CSS

CSS (Cascading Style Sheets) est un langage utilisé pour décrire les styles sur les pages Web. Ces styles incluent les polices, les arrière-plans, les bordures, la typographie, etc. Dans la conception Web, CSS peut donner aux pages Web de bons effets visuels, une mise en page raisonnable et une bonne expérience utilisateur.

Dans la mise en page des actualités NetEase, CSS est largement utilisé. Par exemple, le titre, le corps du texte, le pied de page, etc. sont tous décorés et composés à l'aide de CSS. En fait, chaque morceau de texte, chaque image et chaque lien de ce contenu peut présenter un style différent. C'est la puissance du CSS. Comme indiqué ci-dessous :

.news-title{
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: #333333;
  margin-top: 16px;
  margin-bottom: 24px;
}

.news-content{
  font-size: 14px;
  line-height: 24px;
  color: #666666;
  margin-bottom: 32px;
}

.news-image{
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

.news-link{
  color: #0079FF;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

Grâce au réglage du code CSS, nous pouvons clairement voir la taille de la police, la gras, la hauteur de ligne, la couleur, etc. du titre, ainsi que la taille de la police, la hauteur de ligne, la couleur du contenu de l'actualité. et la couleur de la police du lien en gras et souligné, etc., peut grandement améliorer l'expérience de lecture et le sentiment d'utilisation de l'utilisateur.

De plus, CSS joue également un rôle très important dans la mise en page des pages Web, comme indiqué ci-dessous :

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.news-wrapper{
  display: flex;
  flex-wrap: wrap;
}

.news-list{
  width: calc(33.33333% - 16px);
  margin-right: 16px;
  margin-bottom: 32px;
  box-sizing: border-box;
  overflow: hidden;
}

Le code ci-dessus montre la mise en page CSS d'éléments tels que les conteneurs et les listes d'actualités. Parmi eux, .container définit la largeur maximale et l'alignement automatique à gauche et à droite, .news-wrapper définit la méthode de composition et .news-list définit la largeur, la marge droite et la marge inférieure. Les paramètres de ces codes CSS constituent la base de la mise en page et de la présentation des pages Web. Ils garantissent que la mise en page de la page Web est stable et belle.

2. JavaScript

JavaScript est un langage de script qui peut apporter de l'interactivité, de la dynamique et des effets multimédia aux pages Web. Il est souvent utilisé pour créer des interfaces utilisateur interactives, mettre à jour dynamiquement le contenu Web et contrôler la lecture multimédia. Dans la mise en page des actualités NetEase, JavaScript joue également un rôle très important.

Par exemple, la position « Headline News » dans NetEase News est très importante et le contenu des actualités doit être automatiquement mis à jour de temps en temps. À l’heure actuelle, JavaScript est nécessaire pour l’implémenter. Voici le code simplifié :

function getTopNews(){
  //处理数据
  var data = [
    {title: "新闻标题", url: "http://news.163.com/xxx", img: "http://image.163.com/xxx.jpg"},
    ...
  ];

  //呈现效果
  var html = "";
  for(var i=0; i<data.length; i++){
    var item = data[i];
    html += &#39;<a href="&#39; + item.url + &#39;">';
    html += '<img src="&#39; + item.img + &#39;">';
    html += '<span class="headline">' + item.title + '</span>';
    html += '</a>';
  }
  $("#top-news").html(html);
}

setInterval(getTopNews, 3000);

Le code ci-dessus implémente des mises à jour régulières des titres en appelant la fonction setInterval. Tout d'abord, JavaScript récupère les données sur le réseau, puis utilise le code HTML pour restituer les données sur la page Web. Dans ce processus, JavaScript et CSS sont étroitement liés pour créer un site Web dynamique, interactif et magnifique.

De plus, JavaScript peut également ajouter des effets interactifs tels que le survol de la souris, le clic et les effets d'animation au site Web. Les lecteurs attentifs remarqueront peut-être que lorsque la souris survole une image d’actualité, des effets spéciaux apparaissent autour de l’image. C'est aussi le résultat de JavaScript. Voici le code simplifié :

$(".news-image").hover(function(){
  //鼠标进入事件
  $(this).css("opacity", ".8");
},function(){
  //鼠标离开事件
  $(this).css("opacity", "1");
});

Le code ci-dessus ajoute des événements d'entrée et de sortie de souris aux images d'actualité en faisant correspondre les noms de classe. Lorsque la souris passe sur une image d'actualité, la transparence change. Ce simple effet d’animation peut ajouter beaucoup d’interactivité et d’effets visuels au site Web.

Pour résumer, CSS et JavaScript sont des langages importants dans la conception Web et le développement front-end, et leur rôle dans la production de sites Web va de soi. Ils rendent non seulement le site Web plus beau et plus lisible, mais lui confèrent également de l'interactivité, de la dynamique et des effets multimédia. Dans NetEase News, CSS et JavaScript sont parfaitement combinés pour créer un excellent site Web, fournissant une grande quantité d'informations précieuses à la majorité des internautes.

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!