페이지 94-H5 튜토리얼 프로그래밍 튜토리얼: H5 튜토리얼 온라인 학습-php.cn

Article Tags

H5 튜토리얼

집

Technical articles

웹 프론트엔드

H5 튜토리얼

이미지 갤러리를 장식하기 위해 CSS를 사용하기 위한 HTML5 연습 코드 공유 (2)

이전 강의에서 우리 솔루션은 jquery를 사용하여 스팬 태그를 생성했습니다. 이 강의에서는 :before 및 :after 의사 클래스를 사용하여 더 나은 솔루션을 사용합니다. :before는 추가 요소를 추가하는 데 자주 사용됩니다.

Mar 23, 2017 pm 03:43 PM

HTML5，css，图片画廊

HTML5 실습 - CSS3 미디어 쿼리 세부 소개

CSS2를 사용하면 화면이나 프린터와 같은 특정 미디어 유형의 스타일을 지정할 수 있습니다. CSS3는 더욱 강력한 미디어 쿼리를 제공하며 다양한 미디어 유형에 대한 표현식을 설정하고 다양한 조건에 따라 다양한 스타일을 설정할 수 있습니다. 예를 들어 대형 화면에 한 스타일을 설정하고 모바일에 다른 스타일을 설정할 수 있습니다. 이 기능은 매우 강력하며 페이지 내용을 수정하지 않고도 다양한 장치에 다양한 스타일 효과를 제공할 수 있습니다. 다음 강의에서는 이 기술을 사용하는 일부 사이트를 소개하겠습니다.

Mar 23, 2017 pm 03:36 PM

HTML5，Media ，Queries

CSS3 미디어 쿼리를 사용한 반응형 디자인을 위한 HTML5 실습 코드 공유

이제 화면 해상도의 범위는 320px(iPhone)에서 2560px(대형 모니터) 이상입니다. 사용자는 더 이상 데스크톱 컴퓨터를 사용하여 웹사이트에 액세스하는 것이 아니라 휴대폰, 노트북, 태블릿도 사용합니다. 따라서 웹 사이트 너비를 고정된 값으로 설정하는 기존 방법은 더 이상 요구 사항을 충족할 수 없습니다. 웹 디자인은 이 새로운 요구 사항에 적응해야 하며 페이지 레이아웃은 액세스 장치의 다양한 해상도에 따라 자동으로 조정될 수 있어야 합니다. 이 튜토리얼에서는 html5 및 CSS3 미디어 쿼리를 사용하여 크로스 브라우저 반응형 디자인을 완성하는 방법을 소개합니다.

Mar 23, 2017 pm 03:33 PM

HTML5，CSS3 ，Queries

HTML5 실습 - 비반응형 디자인에서 ViewPort 메타 태그를 사용하는 방법 소개

반응형 디자인에서 뷰포트 태그의 중요성은 누구나 알고 있지만, 비반응형 디자인에서도 중요한 역할을 한다는 사실은 모를 수도 있습니다. 사이트가 여전히 응답하지 않는 경우 이 문서에서는 뷰포트 태그를 사용하여 모바일 장치에서 사이트 표시 효과를 향상시키는 방법을 알아봅니다.

Mar 23, 2017 pm 03:29 PM

HTML5，ViewPort ，meta标签

CSS를 사용한 유연한 비디오를 위한 HTML5 연습 코드 공유

Elemin 테마(최근 디자인한 반응형 사이트)를 코딩할 때 직면한 프레임 건너뛰기 문제 중 하나는 삽입된 비디오의 크기 변경을 보다 유연하게 만드는 방법이었습니다. max-width:100% 및 height:auto를 사용하면 HTML5 비디오 태그가 제대로 작동할 수 있지만 이 솔루션은 iframe 또는 개체 태그 인라인 코드에서는 작동하지 않습니다. 몇 시간 동안 검색하고 실험한 끝에 마침내 해결책을 찾았습니다. 이 CSS 트릭은 반응형 디자인을 수행할 때 유용합니다. 최종 데모 주소를 방문하여 브라우저를 확대하여 효과를 확인할 수 있습니다.

Mar 23, 2017 pm 03:26 PM

HTML5，CSS，弹性视频

반응형 디자인의 3단계 구현에 대한 HTML5 실습 상세 소개

반응형 웹 디자인은 이제 어려운 작업이 아닙니다. 아직 익숙하지 않은 초보자라면 반응형 디자인이 다소 복잡할 수도 있지만 사실 생각보다 훨씬 간단합니다. 반응형 디자인을 더 빨리 배울 수 있도록 특별히 이 튜토리얼을 작성했습니다. 세 가지 간단한 단계를 통해 반응형 디자인의 기본 논리와 미디어 쿼리를 익힐 수 있습니다(CSS에 대한 지식이 있다고 가정).

Mar 23, 2017 pm 03:12 PM

HTML5，响应式设计

HTML5 실습 - CSS3를 활용하여 구글 그래피티 애니메이션을 완성하는 방법에 대한 자세한 설명

여기서 강조해야 할 한 가지는 IE가 CSS3의 애니메이션 속성을 지원하지 않는다는 것입니다. 저는 다시 한번 사악한 IE에 대해 불평합니다. 그러나 우리는 이것을 CSS3를 수용하지 않는 이유로 사용할 수 없습니다.

Mar 22, 2017 pm 04:22 PM

HTML5，css3，google涂鸦

CSS를 사용하여 삼각형을 만들고 CSS3를 사용하여 3D 사면체를 만드는 HTML5 실습 상세 코드 설명

제가 여러분과 가장 먼저 공유하고 싶은 것은 div+css를 사용하여 삼각형을 만드는 방법입니다. 여기에는 관련 코드를 먼저 붙여넣은 다음 원리를 설명하겠습니다.

Mar 22, 2017 pm 04:19 PM

HTML5，css，CSS3

HTML5 연습 - 이미지 스타일을 풍부하게 하기 위해 CSS3를 사용하는 샘플 코드

CSS3에서는 box-shadow와 border-radius를 이미지에 직접 사용하면 브라우저가 이미지를 제대로 렌더링할 수 없습니다. 하지만 해당 이미지를 배경 이미지로 사용하면 추가된 스타일 브라우저에서 잘 렌더링할 수 있습니다. 다양한 이미지 스타일 효과를 만들기 위해 상자 그림자, 테두리 반경 및 전환을 사용하는 방법을 소개하겠습니다.

Mar 22, 2017 pm 04:15 PM

HTML5，css3，图片样式

HTML5 가이드 (4) - Geolocation 사용에 대한 자세한 설명

오늘 배울 내용은 Geolocation을 활용하여 위치 확인 기능을 구현하는 것입니다. 다음 메소드를 제공하는 navigator.geolocation을 통해 Geolocation 객체를 얻을 수 있습니다.

Mar 22, 2017 pm 04:09 PM

html5，Geolocation

HTML5 가이드(3) - 드래그 앤 드롭 기능 구현

이 글의 내용은 html5에서 html 요소의 드래그 앤 드롭 기능을 구현하는 방법에 관한 것입니다. html5 이전에는 드래그 앤 드롭을 구현하려면 js를 사용해야 했지만, 이제 html5에서는 내부적으로 드래그 앤 드롭 기능을 지원하지만, 조금 더 복잡한 기능을 구현하려면 여전히 js의 도움이 필요합니다. 아래에서 몇 가지 예를 살펴보겠습니다.

Mar 22, 2017 pm 04:05 PM

html5，拖拽功能

HTML5 가이드(2) - 문서 메타데이터 운영에 대한 자세한 소개

compatMode 속성은 브라우저가 현재 문서를 처리하는 방법을 알려줍니다. 비표준 HTML이 너무 많아서 브라우저는 HTML 사양을 따르지 않더라도 이러한 페이지를 표시하려고 시도합니다. 일부 콘텐츠는 브라우저 전쟁 초기에 존재했던 고유한 기능에 의존하며 이러한 속성은 사양을 준수하지 않습니다. compatMode는 다음과 같이 하나 또는 두 개의 값을 반환합니다.

Mar 22, 2017 pm 04:01 PM

html5，Document ，metadata

HTML5 Canvas는 주사위 놀이 게임(그림 및 텍스트)에 대한 코드 공유를 구현합니다.

이전에 C#의 WinForm과 Java 그래픽 패키지에서 GDI+를 사용하여 주사위 놀이를 만든 적이 있기 때문에 이러한 논리적인 아이디어는 익숙합니다. 그러나 최근 HTML5의 캔버스 그리기 기능을 검토하고 싶었기 때문에(회사에서는 일반적으로 이러한 기능을 사용하지 않습니다) 물론 이전 클라이언트 코드를 참고한 것은 아니고 이전의 승패판단 알고리즘과 컴퓨터 AI(네트워크 차용) 알고리즘만을 사용하고 있습니다. 물론 html5로 만든 주사위도 많이 있습니다. 그리고 Baidu를 사용하는 것이 좋지만 한쪽을 직접 구현하는 것은 항상 좋은 일입니다. 더 이상 고민하지 말고 본론으로 들어가겠습니다. ^_^

Mar 22, 2017 pm 03:43 PM

HTML5 ，Canvas，五子棋游戏