CSS 이미지 갤러리

CSS를 사용하여 이미지 갤러리 만들기:

은 아래와 같습니다

아아아아아

코드 설명:

CSS 사진 갤러리, 2개의 div 레이어를 사용하여 각 사진을 표시합니다. <a> ;a> 태그의 <img> 태그는 이미지 경로를 설정하고, alt 속성은 마우스를 위로 이동할 때 표시되는 프롬프트이며, 해당 CSS 클래스는
입니다.
div.img, .는 "img" 클래스의 속성을 정의하는 CSS 클래스 선택기입니다.
여백: 2px;
테두리: 1px, 실선, 색상
높이: 자동;
너비: 자동;
왼쪽 부동;
가운데 정렬된 텍스트

div.img(img 태그는 인라인 요소)
인라인 요소입니다. 다른 블록 수준 요소에 첨부되어 있으므로 인라인 요소의 높이, 너비, 내부 및 외부 여백 설정이 유효하지 않습니다.
여백:
테두리: 1px, 실선, 색상; >

div.desc

텍스트 정렬: 가운데 정렬

글꼴 두께: 보통
너비: 120px
여백: 2px

div .img a:hover img {border: 1px solid #0000ff;}

마우스를 가리키면 img 테두리와 색상이 변경됩니다

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <style type="text/css"> div.img { margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center; } div.img img { display: inline; margin: 3px; border: 1px solid #ffffff; } div.img a:hover img {border: 1px solid #0000ff;} div.desc { text-align: center; font-weight: normal; width: 120px; margin: 2px; } </style> </head> <body> <div class="img"> <a href="#"><img src="https://img.php.cn//upload/image/837/831/318/1476339949246926.jpg" alt="Klematis" width="110" height="90"></a> <div class="desc">1</div> </div> <div class="img"> <a href="#"><img src="https://img.php.cn//upload/image/153/383/263/1476339955769441.jpg" alt="Klematis" width="110" height="90"></a> <div class="desc">2</div> </div> <div class="img"> <a href="#"><img src="https://img.php.cn//upload/image/815/625/584/1476339961304990.jpg" alt="Klematis" width="110" height="90"></a> <div class="desc">3</div> </div> <div class="img"> <a href="#"><img src="https://img.php.cn//upload/image/870/504/597/1476339972616793.jpg" alt="Klematis" width="110" height="90"></a> <div class="desc">4</div> </div> </body> </html>

제출하다 코드 재설정

자동운전