整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
看一下这样的效果。这里展示了四张图片，每一个图片都有一个倒影。当鼠标旋转每个图片的时候倒影会消失，并且把图片放大显示。接下来跟着我一起完成这样的效果制作。
·这里展示了一个空白的HTML模板，来设置一下它的背景颜色。
·bargain设置为边距为零，内边距也为零，背景颜色为黑色。
·再添加一个INMAX标签，添加上图片。这个图片当前是没有任何效果的，就直接的展示出来了。
·给图片添加一个样式，设置一个宽度为一百五十像素。这个时候发现这个图片是靠左上角的，设置一个next布局body。
·再设置一下它的高度为一百，根据这个四口来设置高度，宽度也是。现在就可以把它在窗口的页面上进行剧终了。
·再来设置一下它的图片样式。
·order top left，左上角的圆角设置成十像素，右上角也设置成十像素的圆角。
·这个时候遇到一个关键的问题，怎么样去把设置成一个倒影，增加一个倒影？它有这么一个属性，这里有设置一下它的倒影，往下的倒影让倒影离开主要图片的五个像素的间距，间距也就是这里的缝隙。
·再设置一下颜色，这个颜色来设置一个渐变的，这个时候是空白的，这样子就产生了这样的倒影。但是倒影还是太高了一点，可以给透明加一个，如果不够可以继续加，这样子就差不多了，设置成八十暗一点，这样子就有了一个倒影。
·再设置一下鼠标悬停，悬停是没有效果的，可以给英美的标签添加一个鼠标悬停的效果。
·然后是它的放大，放大为一点五倍，这个时候放大缩小是很生硬的，可以在这里加上零点五秒的过渡时间，但倒影还没有消失，希望它的倒影消失一下。
·可以继续设置一下属性，它有一个on set，也就是恢复到默认设置。这个时候再来看一下，再给它添加外发光的效果，这样就出现了这个效果。
·给元素多复制几个，这个时候再来看一下，但它是挨在一起的，可以给元素设置一个外边距，上下为零，左右为十像素，可以设置成五像素。
·这个时候再来看，这个时候会发现后边的一张图片会遮住前面的那张图片，但这不是想要的，可以在over的时候把英美解的元素的层级往上走一下，这样子设置到最高，就展现到最前面，外发光效果还是太小小了点，这样子看起来就好看一些。
·如果图片放大了，最好是把左下角也设置成圆角，也可以这里设置一下。再来看一下，这样子是不是放大的时候全为圆角了。
今天的展示就到这里，谢谢大家。
维网和其它网络类型最大的区别就是它在网页上可呈现丰富多彩的色彩和图像，还可以播放音频、视频，及把图像作为链接使用。
网络上流行的图片格式主要有jpg、jpeg、png、gif等，以下是这几种格式的介绍。
1、gif格式
gif采用LZW压缩，是以压缩相同颜色色块来减少图像大小。由于LZW压缩不会造成任何品质的损失，且压缩率高，支持动画效果，很适合互联网平台，但是它只支持256种颜色。
2、jpg或jpeg格式
以JPEG有损压缩图片，通常用来保存超过256色的图片格式。JPEG压缩过程会对一些图像数据造成损失，这部分损失不影响图片显示，一般人眼是看不出来差异的。损失数据越多，图片就越不清晰。
3、png格式
png是一种非破坏性的网页图像文件格式，它以最小的方式压缩图片且不造成图片数据损失。它不仅支持像gif大部分优点，还支持48 bit的色彩，跨平台的图像亮度控制，更多层的透明度设置。
网页中通过<img>标签插入图片，语法如下：
<img src="图片路径" alt="替换文本" />具体示例：
<!DOCTYPE HTML>
<html>
<body>
<p>
一幅图像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅动画图像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>
</body>
</html>效果如下：
替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本。
<img src="boat.gif" alt="Big Boat">当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好地显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
图像宽度和高度属性
如下代码，在网页中插入一个宽度和高度都是300像素的图片。
<img src="/i/ct_netscape.jpg" width="300px" height="300px" />图片超链接
如下代码，在网页中对一个图片进行超链接设置，点击这张图片就会跳转到其它页面。
<a href="页面路径"><img src="/i/ct_netscape.jpg" /></a>除了对整个图片进行超链接设置外，还可以将图像划分成不同区域进行链接设置，比如一张地图中给每个省份图形进行超链接。
图像热区链接，使用usemap 属性通过#name指定到名叫name的map元素上，map定义了每个热区点击区域形状、大小、坐标等。
area标签的 shape 属性有三种，rect 方形，circle 圆形，poly 多边形。coords 属性定义坐标点位置，相对于图片左上角位置。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>点击太阳或其他行星，注意变化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
<area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
<area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
</body>
</html>效果可参考 https://www.w3cschool.cn/html5/html5-img.html 这里。
可以看到鼠标在图片上点击小行星会打开对应的图片。
到此网页中使用图片已经大体介绍了，自己亲手写下，会加深印象，感谢关注。
上篇：前端入门——html 超链接
下篇：前端入门——html 如何在网页中使用视频音频
片
当我们在制作页面的时候，通常会遇到图片的三种表现形式，如下：
1、内容图片
内容图片是页面中真正的内容，没有内容图片，就无法完整的理解页面内容。如淘宝网上的商品展示图片，这些图片是网页的一部分，它们能帮助你决定这个页面的内容是否是你需要的。
内容图片
2、布局图片
布局图片出现在页面背景中，要想理解页面的内容，它们不是必须的。如苹果官网的这个图片，没有这个图片也能理解页面上文字描述的内容是什么意思。
布局图片
3、交互图片
图中用红色框起来的图片会给你浏览页面的时候带来一些帮助，如搜索图片，一看到就知道这里可以搜索想要的东西，购物车图片可以看到选购的产品，箭头图片点击可以看到更详细的产品等。
交互图片
在HTML中我们用 img 标签创建图片，英文是image的缩写。
<img src="" alt="">
内容图片
布局图片是在CSS中被创建出来的，使用CSS中的background属性，如：
1）background-color 定义背景颜色，设置背景图片时，要始终设置背景颜色，确保背景图片没有成功时会显示一个背景颜色
2）background-image 可以指向一个相对路径或者绝对路径来添加图片。
3）background-repeat可以设置背景是否平铺在容器中，包含四个关键字：
4）background-position 属性可以控制背景图片显示在什么位置，包含两个关键字，如：
background-position：top left 设置图片显示在容器的左上角，第一个关键字可以是top、center、bottom，第二个关键字可以是left、center、right
CSS中和背景相关的属性可以简写在一行中，如：
background: #FF1298 url(images/logo.png) center right no-repeat;
首先是图片的颜色color，image，position，repeat，CSS属性能用简写就尽量用简写，简写比分开写性能更高。
布局图片
Web上最常用的三种图像格式
1）Jpeg 可以展示一张照片或者复杂图像
2）png最适合展示网页插画、logo和网页小图标
3）gif适合展示网页插画、logo和网页小图标
建议：
一般情况下用户交互图片都是一些小图标，所以使用png或gif作为用户交互图片；使用CSS的background属性以背景图片的形式为网页添加用户交互图片；推荐把用户交互图片放在同一个文件中，可以提高网络和服务器性能，如：
交互图片
交互图片
具体如何操作呢？后续教头会通过视频给大家详细演示，请继续关注。
*请认真填写需求信息，我们会在24小时内与您取得联系。
