HTML での CSS と JavaScript の応用を探る-フロントエンドQ&A-php.cn

HTML での CSS と JavaScript の応用を探る

PHPz

リリース： 2023-04-24 10:33:40

オリジナル

670 人が閲覧しました

近年、インターネットの急速な発展とテクノロジーの継続的な進歩に伴い、Web デザインとフロントエンド開発が注目を集めています。 Web デザインとフロントエンド開発にとって 2 つの重要な言語として、CSS と JavaScript は Web 制作にとって重要です。この記事では、NetEase をケーススタディとして使用し、HTML での CSS と JavaScript の適用と、それらがどのように連携して美しい Web サイトを構築するかを探ります。

NetEase は中国で最も有名なインターネット会社であり、最も初期のインターネットポータルの 1 つです。その Web サイトの美しさと機能的な完全性は、業界で非常に高い評価を得ています。その中でも、CSS と JavaScript は NetEase Web サイトで重要な役割を果たします。以下では、NetEase ニュースページを例として、Web デザインにおけるこれらのテクノロジの応用を 1 つずつ分析します。

1. CSS

CSS (Cascading Style Sheets) は、Web ページ上のスタイルを記述するために使用される言語です。これらのスタイルには、フォント、背景、境界線、タイポグラフィなどが含まれます。 Web デザインでは、CSS を使用して Web ページに優れた視覚効果、合理的なレイアウト、優れたユーザーエクスペリエンスを持たせることができます。

NetEase ニュースのレイアウトでは、CSS が広く使用されています。たとえば、タイトル、本文、フッターなどはすべて CSS を使用して装飾され、組版されます。実際、このコンテンツ内のすべてのテキスト、すべての画像、およびすべてのリンクは、異なるスタイルを表示できます。これが CSS の力です。以下に示すように:

.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;
}

ログイン後にコピー

CSSコードの設定により、タイトルのフォントサイズ、太さ、行の高さ、色などを明確に確認できます。、ニュース内容のリンクフォントの色、太字、下線などにより、ユーザーの読書体験や使用感が大幅に向上します。

さらに、CSS は、以下に示すように、Web ページのレイアウトでも非常に重要な役割を果たします。

.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;
}

ログイン後にコピー

上記のコードは、コンテナやニュースリストなどの要素の CSS レイアウトを示しています。このうち、.container は最大幅と自動左右揃えを設定し、.news-wrapper は組版方法を設定し、.news-list は幅、右マージン、下マージンを設定します。これらの CSS コードの設定は、Web ページのレイアウトと表示の基礎となり、Web ページのレイアウトが安定して美しくなります。

2. JavaScript

JavaScript は、Web ページにインタラクティブ性、ダイナミクス、マルチメディア効果をもたらすことができるスクリプト言語です。インタラクティブなユーザーインターフェイスの作成、Web コンテンツの動的更新、マルチメディア再生の制御によく使用されます。 NetEase ニュースのレイアウトでは、JavaScript も非常に重要な役割を果たします。

たとえば、NetEase News の「ヘッドラインニュース」の位置は非常に重要であり、ニュースコンテンツは時々自動的に更新される必要があります。現時点では、それを実装するには JavaScript が必要です。以下は簡略化されたコードです:

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);

ログイン後にコピー

上記のコードは、setInterval 関数を呼び出すことによって見出しの定期的な更新を実装します。まず、JavaScript がネットワーク経由でデータを取得し、次に HTML コードを使用してデータを Web ページ上にレンダリングします。このプロセスでは、JavaScript と CSS が絡み合って、動的でインタラクティブな美しい Web サイトを構築します。

さらに、JavaScript では、マウスホバー、クリック、アニメーション効果などのインタラクティブな効果を Web サイトに追加することもできます。注意深い読者は、マウスをニュース画像の上に置くと、画像の周囲にいくつかの特殊効果が表示されることに気づくかもしれません。これも JavaScript の影響です。以下は簡略化されたコードです:

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

ログイン後にコピー

上記のコードは、クラス名を照合することによってニュース画像にマウスの出入りイベントを追加します。ニュース画像の上にマウスを置くと、透明度が変わります。このシンプルなアニメーション効果により、Web サイトに多くのインタラクティブ性と視覚効果を追加できます。

要約すると、CSS と JavaScript は Web デザインとフロントエンド開発において重要な言語であり、Web サイト制作におけるそれらの役割は自明です。これらは Web サイトをより美しく、読みやすくするだけでなく、Web サイトにインタラクティブ性、ダイナミクス、マルチメディア効果を与えます。 NetEase News では、CSS と JavaScript を完璧に組み合わせて優れた Web サイトを構築し、大量の貴重なニュース情報を大多数のネチズンに提供します。

以上がHTML での CSS と JavaScript の応用を探るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。