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;}
<!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>
