编程 HTML / CSS

CSS3制作缩略图的详细过程

Posted in HTML / CSS onJuly 08, 2016

我们使用 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>

CSS3制作缩略图的详细过程

缩略图如何作为连接？

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制作缩略图的详细过程

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

CSS3制作缩略图的详细过程

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

CSS3 background-image颜色渐变的实现代码

Sep 13 HTML / CSS

css3 按钮样式简单可扩展创建

Mar 18 HTML / CSS

发现两个有趣的CSS3动画效果

Aug 14 HTML / CSS

CSS3实现大小不一的粒子旋转加载动画

Apr 21 HTML / CSS

CSS3 RGBA色彩模式使用实例讲解

Apr 26 HTML / CSS

使用HTML5拍照示例代码

Aug 06 HTML / CSS

利用HTML5 Canvas制作键盘及鼠标动画的实例分享

Mar 15 HTML / CSS

HTML5事件方法全部汇总

May 12 HTML / CSS

html5 div布局与table布局详解

Nov 16 HTML / CSS

详解html5页面 rem 布局适配方法

Jan 12 HTML / CSS

HTML5实现移动端弹幕动画效果

Aug 01 HTML / CSS

AmazeUI 点击元素显示全屏的实现

Aug 25 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

不重新编译PHP为php增加openssl模块的方法

2011/06/14 PHP

PHP中如何判断AJAX提交的数据

2012/02/05 PHP

php专用数组排序类ArraySortUtil用法实例

2015/04/03 PHP

php生成验证码，缩略图及水印图的类分享

2016/04/07 PHP

PHP+MySQL实现输入页码跳转到指定页面功能示例

2018/06/01 PHP

PHP getName()函数讲解

2019/02/03 PHP

用JavaScript和注册表脚本实现右键收藏Web页选中文本

2007/01/28 Javascript

载入jQuery库的最佳方法详细说明及实现代码

2012/12/28 Javascript

javascript自动给文本url地址增加链接的方法分享

2014/01/20 Javascript

jQuery实现Meizu魅族官方网站的导航菜单效果

2015/09/14 Javascript

jQuery获取某天的农历日期并判断是否除夕或新年的方法

2016/03/01 Javascript

浅谈JS原型对象和原型链

2016/03/02 Javascript

微信小程序五星评分(包括半颗星评分)实例代码

2016/12/14 Javascript

JavaScript 事件对内存和性能的影响

2017/01/22 Javascript

详解Angular4中路由Router类的跳转navigate

2017/06/09 Javascript

微信小程序模板（template）使用详解

2018/01/31 Javascript

javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】

2018/08/01 Javascript

node实现分片下载的示例代码

2018/10/17 Javascript

vue + typescript + video.js实现流媒体播放视频监控功能

2019/07/07 Javascript

jQuery设置下拉框显示与隐藏效果的方法分析

2019/09/15 jQuery

k8s node节点重新加入master集群的实现

2021/02/22 Javascript

[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13

2020/12/17 DOTA

python里使用正则表达式的组嵌套实例详解

2017/10/24 Python

python实现字符串加密生成唯一固定长度字符串

2019/03/22 Python

pygame实现非图片按钮效果

2019/10/29 Python

python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例

2020/02/25 Python

python2和python3哪个使用率高

2020/06/23 Python

python如何进入交互模式

2020/07/06 Python

打印机墨盒：123Inkjets

2017/02/16 全球购物

英国奢侈品在线精品店：Hervia

2020/09/03 全球购物

厂办主管岗位职责范本

2014/02/28 职场文书

2014年圣诞节促销方案

2014/03/14 职场文书

酒店节能减排方案

2014/05/26 职场文书

公司2014年度工作总结

2014/12/10 职场文书

2015年重阳节活动总结

2015/03/24 职场文书

2016新年感言

2015/08/03 职场文书