编程 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 相关文章推荐

Web前端绘制0.5像素的几种方法

Aug 11 HTML / CSS

CSS3 border-image详解、应用及jQuery插件

Aug 29 HTML / CSS

纯CSS3实现给头像加个光芒四射且旋转的背景动画效果

May 07 HTML / CSS

实例教程一款纯css3实现的数字统计游戏

Nov 10 HTML / CSS

CSS3利用text-shadow属性实现多种效果的文字样式展现方法

Aug 25 HTML / CSS

css3通过scale()、rotate()实现放大、旋转

Mar 19 HTML / CSS

基于Canvas+Vue的弹幕组件的实现

Jul 23 HTML / CSS

HTML5 canvas 瀑布流文字效果的示例代码

Jan 31 HTML / CSS

canvas 橡皮筋式线条绘图应用方法

Feb 13 HTML / CSS

浅析HTML5 Landmark

Sep 11 HTML / CSS

奇妙的 CSS shapes(CSS图形)

Apr 05 HTML / CSS

background-position百分比原理详解

May 08 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

UCenter中的一个可逆加密函数authcode函数代码

2010/07/20 PHP

php5.5使用PHPMailer-5.2发送邮件的完整步骤

2018/10/14 PHP

在Javascript中为String对象添加trim,ltrim,rtrim方法

2006/09/22 Javascript

Ext 表单布局实例代码

2009/04/30 Javascript

SlideView 图片滑动(扩展/收缩)展示效果

2010/08/01 Javascript

js通过元素class名字获取元素集合的具体实现

2014/01/06 Javascript

javascript不同类型数据之间的运算的转换方法

2014/02/13 Javascript

在JS数组特定索引处指定位置插入元素

2014/07/27 Javascript

JS实现很酷的水波文字特效实例

2015/02/26 Javascript

js文字横向滚动特效

2015/11/11 Javascript

详解JavaScript中localStorage使用要点

2016/01/13 Javascript

深入理解js promise chain

2016/05/05 Javascript

对jQuary选择器的全面总结

2016/06/20 Javascript

jQuery插件扩展测试实例

2016/06/21 Javascript

关于iframe跨域POST提交的方法示例

2017/01/15 Javascript

Django+Vue跨域环境配置详解

2018/07/06 Javascript

jquery判断滚动条距离顶部的距离方法

2018/09/05 jQuery

微信小程序页面间值传递的两种方法

2018/11/26 Javascript

vue-router为激活的路由设置样式操作

2020/07/18 Javascript

vue项目中使用多选框的实例代码

2020/07/22 Javascript

[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南

2016/06/25 DOTA

python抓取豆瓣图片并自动保存示例学习

2014/01/10 Python

PyQt5每天必学之事件与信号

2018/04/20 Python

如何利用python制作时间戳转换工具详解

2018/09/12 Python

Python 找出出现次数超过数组长度一半的元素实例

2020/05/11 Python

程序设计HTML5 Canvas API

2013/04/08 HTML / CSS

全球最大的中文旅行网站：去哪儿网

2017/11/16 全球购物

区优秀教师事迹材料

2014/02/10 职场文书

小学社团活动总结

2014/06/27 职场文书

党的群众路线教育实践活动对照检查材料（四风）

2014/09/27 职场文书

房屋租赁合同协议书范本

2014/10/19 职场文书

优秀护士事迹材料

2014/12/25 职场文书

研究生简历自我评

2015/03/11 职场文书

《钓鱼的启示》教学反思

2016/02/18 职场文书

python数字类型和占位符详情

2022/03/13 Python

【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说

2022/04/01 DOTA