CSS3如何制作缩略图

本篇内容主要讲解“CSS3如何制作缩略图”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS3如何制作缩略图”吧!

网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了夷陵免费建站欢迎大家使用！

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

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

  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4. <style>  

  5. img {   

  6.     border: 1px solid #ddd;   

  7.     border-radius: 4px;   

  8.     padding: 5px;   

  9. }   

  10. </style>  

  11. </head>  

  12. <body>  

  13. <h3>缩略图</h3>  

  14. <p>我们使用 border 属性来创建缩略图。</p>  

  15. <img src="paris.jpg" alt="Paris" width="400" height="300">  

  16. </body>  

  17. </html>  

CSS3如何制作缩略图

缩略图如何作为连接？

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

  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4. <style>  

  5. a {   

  6.     display: inline-block;   

  7.     border: 1px solid #ddd;   

  8.     border-radius: 4px;   

  9.     padding: 5px;   

  10.     transition: 0.3s;   

  11. }   

  12. a:hover {   

  13.     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);   

  14. }   

  15. </style>  

  16. </head>  

  17. <body>  

  18. <h3>缩略图作为连接</h3>  

  19. <p>我们使用 border 属性来创建缩略图。在图片外层添加一个链接。</p>  

  20. <p>点击图片查看效果：</p>  

  21. <a target="_blank" href="paris.jpg">  

  22.   <img src="paris.jpg" alt="Paris" width="400" height="300">  

  23. </a>  

  24. </body>  

  25. </html>  

CSS3如何制作缩略图

到此，相信大家对“CSS3如何制作缩略图”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

当前题目：CSS3如何制作缩略图
URL链接：https://www.cdcxhl.com/article38/jhshsp.html

成都网站建设公司_创新互联，为您提供网站建设、响应式网站、商城网站、网站排名、全网营销推广、网站维护

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

成都app开发公司

Google知识

同城分类信息