HTML5 CSS3는 소스 코드 download_html5 튜토리얼 기술을 사용하여 사진 앨범 효과를 만듭니다.

오늘 우연히 내 컴퓨터에서 그런 예제를 발견했는데 효과가 꽤 좋은 것 같아요. 언제 다운로드했는지 기억이 나지 않습니다. 프론트 데스크이므로 여러분과 공유하고 싶습니다.

렌더링:


아직도 효과가 아주 좋지 않나요? 가장 중요한 것은 js 라인을 사용하지 않는다는 점입니다.

먼저 html 파일을 보세요:

간략한 설명:

1. ul의 li가 사진 수를 결정합니다.

2. 앨범의 오른쪽 영역에 표시하려면 float: right, width: 140px; 3. li: left의 float는 p가 왼쪽으로 떠 있을 수 있도록 합니다. 큰 이미지는 li에 저장되며 위치는 p#gallary를 기준으로 절대 위치이며 기본적으로 첫 번째 이미지만 표시됩니다.

4. li 위로 마우스를 이동하면 li 스팬 img의 투명도를 변경하고 큰 이미지를 표시하는 li p 표시

다음은 CSS 파일입니다.



코드는 다음과 같습니다.

복잡한 내용은 없습니다. 스타일은 CSS에 있으므로 설명하지 않겠습니다. 또한 html에 재설정 스타일 CSS인 Reset.css를 도입했습니다.

코드는 다음과 같습니다.

html, body, p, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend{ 
margin: 0; 
padding: 0; 
font-size: 100%; 
border: 0; 
outline: 0; 
background: transparent; 
} 
ol, ul { 
list-style: none; 
} 
blockquote, q { 
quotes: none; 
} 
:focus { 
outline: 0; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
}