Terokai aplikasi CSS dan JavaScript dalam HTML

Dalam beberapa tahun kebelakangan ini, dengan perkembangan pesat Internet dan kemajuan teknologi yang berterusan, reka bentuk web dan pembangunan bahagian hadapan telah menjadi tumpuan yang membimbangkan. Sebagai dua bahasa penting untuk reka bentuk web dan pembangunan bahagian hadapan, CSS dan JavaScript adalah penting untuk pengeluaran web. Artikel ini akan menggunakan NetEase sebagai kajian kes untuk meneroka aplikasi CSS dan JavaScript dalam HTML dan cara mereka bekerjasama untuk membina tapak web yang cantik.

NetEase ialah syarikat Internet paling terkenal di China dan salah satu portal Internet terawal. Estetika dan integriti fungsi tapak webnya mempunyai reputasi yang sangat tinggi dalam industri. Antaranya, CSS dan JavaScript memainkan peranan penting dalam laman web NetEase. Berikut akan mengambil halaman berita NetEase sebagai contoh untuk menganalisis aplikasi teknologi ini dalam reka bentuk web satu demi satu.

1. CSS

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk menerangkan gaya pada halaman web. Gaya ini termasuk fon, latar belakang, sempadan, tipografi, dsb. Dalam reka bentuk web, CSS boleh menjadikan halaman web mempunyai kesan visual yang baik, reka letak yang munasabah dan pengalaman pengguna yang baik.

Dalam susun atur berita NetEase, CSS digunakan secara meluas. Contohnya, tajuk, teks kandungan, pengaki, dsb. semuanya dihiasi dan set taip menggunakan CSS. Malah, setiap sekeping teks, setiap gambar, dan setiap pautan dalam kandungan ini boleh menampilkan gaya yang berbeza Ini adalah kuasa CSS. Seperti yang ditunjukkan di bawah:

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

Melalui tetapan kod CSS, kita dapat melihat dengan jelas saiz fon, keberanian, ketinggian baris, warna, dsb. tajuk, serta saiz fon, baris ketinggian, dan warna kandungan berita Warna fon, keberanian dan garis bawah pautan semuanya boleh meningkatkan pengalaman membaca dan rasa penggunaan pengguna.

Selain itu, CSS juga memainkan peranan yang sangat penting dalam reka letak halaman web, seperti yang ditunjukkan di bawah:

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

Kod di atas menunjukkan susun atur CSS elemen seperti bekas dan senarai berita. . Antaranya, .container menetapkan lebar maksimum dan penjajaran kiri dan kanan automatik, .news-wrapper menetapkan kaedah penetapan taip dan .news-list menetapkan lebar, jidar kanan dan jidar bawah. Tetapan kod CSS ini adalah asas untuk susun atur halaman web dan pembentangan mereka memastikan susun atur halaman web adalah stabil dan cantik.

2. JavaScript

JavaScript ialah bahasa skrip yang boleh membawa kesan interaktiviti, dinamik dan multimedia ke halaman web. Ia sering digunakan untuk mencipta antara muka pengguna interaktif, mengemas kini kandungan web secara dinamik dan mengawal main balik multimedia. Dalam susun atur berita NetEase, JavaScript juga memainkan peranan yang sangat penting.

Contohnya, kedudukan "Berita Tajuk" dalam NetEase News adalah sangat penting dan kandungan berita perlu dikemas kini secara automatik sekali-sekala. Pada masa ini, JavaScript diperlukan untuk melaksanakannya. Berikut ialah kod yang dipermudahkan:

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

Kod di atas melaksanakan kemas kini biasa tajuk dengan memanggil fungsi setInterval. Mula-mula, JavaScript mengambil data melalui rangkaian, dan kemudian menggunakan kod HTML untuk memaparkan data ke halaman web. Dalam proses ini, JavaScript dan CSS saling berkait untuk membina tapak web yang dinamik, interaktif dan cantik.

Selain itu, JavaScript juga boleh menambah beberapa kesan interaktif seperti tuding tetikus, klik dan kesan animasi pada tapak web. Pembaca berhati-hati mungkin menyedari bahawa apabila tetikus melayang di atas imej berita, beberapa kesan khas muncul di sekeliling imej. Ini juga hasil daripada JavaScript. Berikut ialah kod yang dipermudahkan:

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

Kod di atas menambah acara masuk dan keluar tetikus pada gambar berita dengan memadankan nama kelas. Apabila tetikus dilegar pada imej berita, ketelusan berubah. Kesan animasi ringkas ini boleh menambah banyak interaktiviti dan kesan visual pada tapak web.

Ringkasnya, CSS dan JavaScript ialah bahasa penting dalam reka bentuk web dan pembangunan bahagian hadapan, dan peranan mereka dalam penghasilan tapak web adalah jelas. Mereka bukan sahaja menjadikan tapak web lebih cantik dan boleh dibaca, tetapi juga memberikan kesan interaktiviti, dinamik dan multimedia. Dalam NetEase News, CSS dan JavaScript digabungkan dengan sempurna untuk membina tapak web yang sangat baik, menyediakan sejumlah besar maklumat berita berharga kepada majoriti netizen.

Atas ialah kandungan terperinci Terokai aplikasi CSS dan JavaScript dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!