首页 > 开发 > CSS > 正文

CSS3制作缩略图的详细过程

2024-07-11 08:32:42

字体：大中小

来源：转载

供稿：网友

我们使用 border 属性来创建缩略图，具体内容如下

XML/HTML Code复制内容到剪贴板

<!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" height="300"> </body>
</html>

缩略图如何作为连接？

XML/HTML Code复制内容到剪贴板

<!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" height="300">
</a> </body>
</html>

上一篇：分享CSS3制作卡片式图片的方法

下一篇：CSS中单位px与em的区别(推荐)

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注