Maison > Article > interface Web > Analyse détaillée du processus de création de vignettes avec CSS3
Analyse détaillée du processus de création de vignettes avec CSS3
- 高洛峰original
- 2017-03-07 15:20:331654parcourir
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>
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>
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 !
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Partagez la méthode détaillée de création d'images de style carte avec CSS3Article suivant：Partagez la méthode détaillée de création d'images de style carte avec CSS3