HTML에서 CSS 및 JavaScript 적용 살펴보기-프런트엔드 Q&A-php.cn

HTML에서 CSS 및 JavaScript 적용 살펴보기

PHPz

풀어 주다： 2023-04-24 10:33:40

원래의

657명이 탐색했습니다.

최근 인터넷의 급속한 발전과 지속적인 기술의 발전으로 웹디자인과 프론트엔드 개발이 주목받고 있습니다. 웹 디자인과 프론트엔드 개발에 있어 두 가지 중요한 언어인 CSS와 JavaScript는 웹 제작에 매우 중요합니다. 이 기사에서는 NetEase를 사례 연구로 사용하여 HTML에서 CSS와 JavaScript를 적용하고 이들이 함께 작동하여 아름다운 웹 사이트를 구축하는 방법을 살펴봅니다.

NetEase는 중국에서 가장 잘 알려진 인터넷 회사이자 최초의 인터넷 포털 중 하나입니다. 웹사이트의 미적 측면과 기능적 무결성은 업계에서 매우 높은 평판을 얻고 있습니다. 그중 CSS와 JavaScript는 NetEase 웹사이트에서 핵심적인 역할을 합니다. 다음은 NetEase 뉴스 페이지를 예로 들어 웹 디자인에서 이러한 기술의 적용을 하나씩 분석합니다.

1. CSS

CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 설명하는 데 사용되는 언어입니다. 이러한 스타일에는 글꼴, 배경, 테두리, 타이포그래피 등이 포함됩니다. 웹 디자인에서 CSS는 웹 페이지가 좋은 시각 효과, 합리적인 레이아웃, 좋은 사용자 경험을 갖도록 만들 수 있습니다.

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는 아래와 같이 웹 페이지 레이아웃에서 매우 중요한 역할을 합니다.

.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 코드의 설정은 웹 페이지 레이아웃과 프리젠테이션의 기초가 되며 웹 페이지의 레이아웃이 안정적이고 아름답게 되도록 보장합니다.

2. JavaScript

JavaScript는 웹 페이지에 상호 작용, 동적 및 멀티미디어 효과를 가져올 수 있는 스크립팅 언어입니다. 대화형 사용자 인터페이스를 만들고, 웹 페이지 콘텐츠를 동적으로 업데이트하고, 멀티미디어 재생을 제어하는 데 자주 사용됩니다. NetEase 뉴스 레이아웃에서는 JavaScript도 매우 중요한 역할을 합니다.

예를 들어 NetEase 뉴스의 "헤드라인 뉴스" 위치는 매우 중요하며 뉴스 콘텐츠는 가끔씩 자동으로 업데이트되어야 합니다. 이때 이를 구현하기 위해서는 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 코드를 사용하여 데이터를 웹 페이지에 렌더링합니다. 이 과정에서 JavaScript와 CSS가 얽혀 역동적이고 대화형이며 아름다운 웹사이트를 구축합니다.

또한 JavaScript는 마우스 호버, 클릭, 애니메이션 효과와 같은 일부 대화형 효과를 웹 사이트에 추가할 수도 있습니다. 주의 깊은 독자라면 뉴스 이미지 위에 마우스를 올리면 이미지 주변에 일부 특수 효과가 나타나는 것을 알 수 있습니다. 이는 JavaScript의 결과이기도 합니다. 다음은 단순화된 코드입니다.

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

로그인 후 복사

위 코드는 클래스 이름을 일치시켜 뉴스 사진에 마우스 입력 및 종료 이벤트를 추가합니다. 뉴스 이미지 위에 마우스를 올리면 투명도가 변경됩니다. 이 간단한 애니메이션 효과는 웹 사이트에 많은 상호 작용 및 시각 효과를 추가할 수 있습니다.

결론적으로 CSS와 JavaScript는 웹 디자인과 프론트엔드 개발에 있어서 중요한 언어이고, 웹사이트 제작에서 이들의 역할은 자명합니다. 이는 웹 사이트를 더욱 아름답고 읽기 쉽게 만들 뿐만 아니라 상호 작용성, 역동성 및 멀티미디어 효과도 제공합니다. NetEase News에서는 CSS와 JavaScript가 완벽하게 결합되어 우수한 웹사이트를 구축하여 대다수의 네티즌에게 귀중한 뉴스 정보를 대량으로 제공합니다.

위 내용은 HTML에서 CSS 및 JavaScript 적용 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!