CSS3制作缩略图的详细过程


Posted in HTML / CSS onJuly 08, 2016

我们使用 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. <h2>缩略图</h2>  
  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. <h2>缩略图作为连接</h2>  
  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制作缩略图的详细过程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3的resize属性使用初探
Sep 27 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 #HTML / CSS
css3media响应式布局实例
Jul 08 #HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 #HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 #HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 #HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 #HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 #HTML / CSS
You might like
?生?D片??C字串
2006/12/06 PHP
mysql 性能的检查和优化方法
2009/06/21 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
Python搭建FTP服务器的方法示例
2018/01/19 Python
django的登录注册系统的示例代码
2018/05/14 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
Python如何实现转换URL详解
2019/07/02 Python
python多线程分块读取文件
2019/08/29 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
python绘制雪景图
2019/12/16 Python
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
搞笑创意广告语
2014/03/17 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
早会开场白台词大全
2015/06/01 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
python如何读取.mtx文件
2021/04/22 Python