Analyse détaillée du processus de création de vignettes avec CSS3-tutoriel CSS-php.cn

Analyse détaillée du processus de création de vignettes avec CSS3

高洛峰

Libérer： 2017-03-07 15:20:33

original

1661 Les gens l'ont consulté

Nous utilisons l'attribut border pour créer des vignettes, les détails sont les suivants

<!DOCTYPE html>
<html>
<head>
<style>
img {   
    border: 1px solid #ddd;   
    border-radius: 4px;   
    padding: 5px;   
}   
</style>
</head>
<body>
<h2>缩略图</h2>
<p>我们使用 border 属性来创建缩略图。</p>
<img src="paris.jpg" alt="Paris" width="400"    style="max-width:90%">
</body>
</html>

Copier après la connexion

Analyse détaillée du processus de création de vignettes avec CSS3

Comment les vignettes servent-elles de connexions ?

<!DOCTYPE html>
<html>
<head>
<style>
a {   
    display: inline-block;   
    border: 1px solid #ddd;   
    border-radius: 4px;   
    padding: 5px;   
    transition: 0.3s;   
}   
a:hover {   
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);   
}   
</style>
</head>
<body>
<h2>缩略图作为连接</h2>
<p>我们使用 border 属性来创建缩略图。在图片外层添加一个链接。</p>
<p>点击图片查看效果：</p>
<a target="_blank" href="paris.jpg">
  <img src="paris.jpg" alt="Paris" width="400"    style="max-width:90%">
</a>
</body>
</html>

Copier après la connexion

Analyse détaillée du processus de création de vignettes avec CSS3

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde le fera. prend en charge le site Web PHP chinois.

Pour une analyse plus détaillée du processus de création de vignettes CSS3 et des articles connexes, veuillez prêter attention au site Web PHP chinois !