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>

?????? ???

????