웹 프론트엔드 JS 튜토리얼 CSS Keqiji 커뮤니티 아바타 표시 effect_javascript 기술

CSS Keqiji 커뮤니티 아바타 표시 effect_javascript 기술

May 16, 2016 pm 07:04 PM
css

코드 설명:

이 단락에서는 대규모 블록 DIV가 정의되고 아래에 LI, A, SPAN 및 IMG라는 4개의 태그가 제공됩니다. CSS 이 네 가지 태그는



>http://www.zishu.cn /blogview.asp?logID=553">64d / 47회 조회수 pixu
.....
다음 단락에서는 웹페이지의 기본 콘텐츠와 링크 스타일을 정의합니다.

body{font -size:12px:font- family:Verdana, "宋体", text-align:center; color:#666; padding:0; 목록 -style:none; a:visited{color:#000099; text-꾸밈: underline;}
a:hover,a:active{color:#000;text-꾸밈: 없음 ;}
다음 줄은 가로 표시를 정의합니다. 각 LI는 너비의 14%를 차지하며 100%를 7개 블록으로 나눈 것과 같습니다. margin:0 auto; FIREFOX;
#zishu_test li{ float:left; width:14%; text-align:center; margin:0 auto; list-style:none }
다음은 A 태그를 일관되게 정의합니다. ; 테두리, 너비, 배경 등; 사실 이미 테두리가 있지만 웹 페이지의 배경색을 변경하면 볼 수 없습니다. 보세요 효과가 달성되었습니다.

#zishu_test li a{border-right:1px solid #fff;border-bottom:1px width:100px; height:110px; :block; padding-top:10px; margin:auto}
다음은 이미지 가장자리에 공백 효과와 테두리 효과를 추가하여 이미지를 정의합니다. width:75px; height:75px ; display:block; text-align:center; background:#FFF; padding:3px; border:1px solid #D8A18B;}
다음 줄은 내용을 숨기기 위한 것입니다.

#zishu_test lispan{display:none;}
다음 줄은 주로 SPAN에서 콘텐츠를 표시하기 위해 마우스를 움직이는 효과를 정의합니다. SPAN 콘텐츠의 위치, 이러한 방식으로 SPAN의 위치를 ​​정의하면 브라우저마다 효과가 달라집니다. 따라서 여기에는 SPAN만 정의되어 있습니다.
#zishu_test li a:hoverspan{ margin-top:-10px;display:block; border-bottom:1px solid #666; border-right:1px solid #666; :#FFF; position:absolute; }
다음 두 줄은 다른 브라우저에서 볼 수 있는 효과가 동일하도록 작성되었습니다. 주로 IE6과 IE7에 대해 작성되었습니다. 시도해 보고 생각해보면 알게 될 것입니다. ; 저는 이 방법을 사용하여 IE6과 IE7을 변경합니다. 더 나은 방법이 생각나지 않기 때문입니다. zishu_test li a:hover 범위 {margin-left:- 8px } /* IE6 */
* html #zishu_test li a:hover 범위 {margin-left:-8px }/* IE7*/
마지막 줄은 간단합니다. 테두리 색상만 변경하면 마우스가 위로 움직일 때 변화가 있는 것처럼 보입니다.

#zishu_test li a:hover{ border-right:1px solid #D8A18B; 테두리 하단:1px 솔리드 #D8A18B; 너비:100px; 높이:110px ; 배경:#F5F5F5;디스플레이:블록 상단:10px;}







zishu.cn 테스트

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

웹 페이지에 로컬로 설치된 'Jingnan Mai Round Body'를 올바르게 표시하는 방법은 무엇입니까? 웹 페이지에 로컬로 설치된 'Jingnan Mai Round Body'를 올바르게 표시하는 방법은 무엇입니까? Apr 05, 2025 pm 10:33 PM

최근 웹 페이지에 로컬로 설치된 글꼴 파일을 사용하여 인터넷에서 무료 글꼴을 다운로드하여 시스템에 성공적으로 설치했습니다. 지금...

CSS를 통해 일류 이름 항목으로 자식 요소를 선택하는 방법은 무엇입니까? CSS를 통해 일류 이름 항목으로 자식 요소를 선택하는 방법은 무엇입니까? Apr 05, 2025 pm 11:24 PM

요소 수가 고정되지 않은 경우 CSS를 통해 지정된 클래스 이름의 첫 번째 자식 요소를 선택하는 방법. HTML 구조를 처리 할 때 종종 다른 요소를 만듭니다 ...

H5 페이지 생산에는 지속적인 유지 보수가 필요합니까? H5 페이지 생산에는 지속적인 유지 보수가 필요합니까? Apr 05, 2025 pm 11:27 PM

코드 취약점, 브라우저 호환성, 성능 최적화, 보안 업데이트 및 사용자 경험 개선과 같은 요소로 인해 H5 페이지를 지속적으로 유지해야합니다. 효과적인 유지 관리 방법에는 완전한 테스트 시스템 설정, 버전 제어 도구 사용, 페이지 성능을 정기적으로 모니터링하고 사용자 피드백 수집 및 유지 관리 계획을 수립하는 것이 포함됩니다.

모바일 터미널의 멀티 라인 오버 플로우 누락과 호환되는 방법은 무엇입니까? 모바일 터미널의 멀티 라인 오버 플로우 누락과 호환되는 방법은 무엇입니까? Apr 05, 2025 pm 10:36 PM

VUE 2.0을 사용하여 모바일 애플리케이션을 개발할 때 다른 장치에서 멀티 로우 오버플로의 호환성 문제가 종종 텍스트를 넘어서야 할 필요성을 만듭니다 ...

H5 페이지 제작에 적합한 응용 프로그램 시나리오 H5 페이지 제작에 적합한 응용 프로그램 시나리오 Apr 05, 2025 pm 11:36 PM

H5 (HTML5)는 마케팅 캠페인 페이지, 제품 디스플레이 페이지 및 기업 프로모션 마이크로 웨스 사이트와 같은 가벼운 응용 프로그램에 적합합니다. 그것의 장점은 교차 성형 및 풍부한 상호 작용에있어 있지만, 그 한계는 복잡한 상호 작용 및 애니메이션, 로컬 리소스 액세스 및 오프라인 기능에 있습니다.

중첩 된 div 요소의 스타일을 효율적으로 수정하는 방법은 무엇입니까? 중첩 된 div 요소의 스타일을 효율적으로 수정하는 방법은 무엇입니까? Apr 05, 2025 pm 10:45 PM

중첩 된 DIV 스타일 수정 방법에 대한 심층적 인 논의이 기사는 중첩 구조의 DIV 요소 스타일을 효과적으로 수정하는 방법을 자세히 설명합니다. 우리가 직면 한 도전은 어떻게 ...

H5로 진행률 표시 줄을 만드는 방법 H5로 진행률 표시 줄을 만드는 방법 Apr 06, 2025 pm 12:09 PM

HTML5 또는 CSS를 사용하여 진행률 표시 줄을 만듭니다. 진행률 표시 줄 컨테이너를 만듭니다. 진행률 막대 너비를 설정하십시오. 진행률 표시 줄의 내부 요소를 만듭니다. 진행률 표시 줄의 내부 요소 너비를 설정합니다. JavaScript, CSS 또는 Progress Bar 라이브러리를 사용하여 진행 상황을 표시하십시오.

H5 페이지 제작은 프론트 엔드 개발입니까? H5 페이지 제작은 프론트 엔드 개발입니까? Apr 05, 2025 pm 11:42 PM

예, H5 페이지 제작은 HTML, CSS 및 JavaScript와 같은 핵심 기술을 포함하는 프론트 엔드 개발을위한 중요한 구현 방법입니다. 개발자는 & lt; canvas & gt; 그래픽을 그리거나 상호 작용 동작을 제어하기 위해 JavaScript를 사용하는 태그.

See all articles