标签之美四——为网页添加绚丽多彩的图像
2015-05-11 00:00
225 查看
摘要: 网页中图像的处理与应用。
这里图片路径的写法和本地超链接的写法是一样的,可以参考上一篇博客中关于本地路径的地方:http://my.oschina.net/u/2340880/blog/412934。
注意:如果图片大小不能充满网页,图片将会被复制平铺。
效果如下:
<img>标签的alt属性可以为图片添加缺省文字,当图片不存在或者无法显示时,会有提示效果。示例如下:
设置图片的尺寸属性:width,height
效果如下:
效果如下:
效果如下:
效果如下:
效果如下,图片被加上了黑色的边框:
也可以给图片设置一个间距,间距的效果和透明的边框是一样的。
其中,hspace是设置水平边框的宽度,还有一个属性vspace是设置垂直边框的宽度,上面代码效果如下:
专注技术,热爱生活,交流技术,也做朋友。
——珲少 QQ群:203317592
标签之美——图像的使用
一、设置网页背景图片
<body background="1.jpg"> </body>
这里图片路径的写法和本地超链接的写法是一样的,可以参考上一篇博客中关于本地路径的地方:http://my.oschina.net/u/2340880/blog/412934。
注意:如果图片大小不能充满网页,图片将会被复制平铺。
二、图片标签<img>的应用
<img>是图片插入标签。其中图片路径的写法和超链接路径的写法一样。示例如下:<body> <img src="2.png"/> </body>
效果如下:
<img>标签的alt属性可以为图片添加缺省文字,当图片不存在或者无法显示时,会有提示效果。示例如下:
<body> <img src="3.png" alt="图片不存在"/> </body>
设置图片的尺寸属性:width,height
<body> <img src="1.jpg" width="200" height="200"/><!--设置宽高为200像素--> </body>
三、图片的对齐模式
align是图片标签的对齐属性,对齐模式有5种属性值,下面一一对其进行介绍:1、bottom:底部对其
底部对齐的示例<img src="1.jpg" width="200" height="200" align="bottom"/>的图片
效果如下:
2、left:左部对齐
底部对齐的示例<img src="1.jpg" width="200" height="200" align="left"/>的图片
3、right:右部对其
底部对齐的示例<img src="1.jpg" width="200" height="200" align="right"/>的图片
效果如下:
4、middle:居中对齐
底部对齐的示例<img src="1.jpg" width="200" height="200" align="middle"/>的图片
效果如下:
5、top:上部对齐
底部对齐的示例<img src="1.jpg" width="200" height="200" align="top"/>的图片
效果如下:
四、设置图片边框和边距
通过border属性可以给图片添加边框。属性的值为边框的宽度。<img src="1.jpg" width="200" height="200" align="top" border="4"/>
效果如下,图片被加上了黑色的边框:
也可以给图片设置一个间距,间距的效果和透明的边框是一样的。
这里是图片<img src="1.png" align="middle" hspace="20">内容
其中,hspace是设置水平边框的宽度,还有一个属性vspace是设置垂直边框的宽度,上面代码效果如下:
五、插入视频的相关操作
插入视频的原理和图像是一样的,只是路径使用的时dynsrc,可以使用loop属性来设置循环次数,start属性来设置播放方式,这里,只将start属性说明一下,有两种方式,fileopen是网页加载就开始播放,mouseover是鼠标移动到视频位置后开始播放。<img dynsrc="2.wmv" start="fileopen" loop="1">
专注技术,热爱生活,交流技术,也做朋友。
——珲少 QQ群:203317592
相关文章推荐
- C# tableControl的标签添加图像
- Bootstrap框架,在使用栅格布局的时候,在父标签中添加row类,发现引起网页出现横向滚动条的问题
- 用link标签实现网页标题前添加一个小图标
- 用link标签实现 shortcut icon(给网页标题前添加一个小图标favicon.ico)
- 标签之美七——为网页添加音乐
- HTML5 标签audio添加网页背景音乐代码
- 关于select样式重置和移动端网页添加meta标签的问题
- <hx>标签,为你的网页添加标题
- 了解<hx>标签,为你的网页添加标题
- 了解<hx>标签,为你的网页添加标题
- 给浏览器网页标签页添加图标
- a标签上添加点击事件,执行完会跳到网页顶端
- 用link标签实现 shortcut icon(给网页标题前添加一个小图标favicon.ico)
- HTML5<canvas>标签:使用canvas元素在网页上绘制渐变和图像(2)
- <hx>标签,为网页内容添加标题
- 用asp.net为网页添加Meta标签
- PHP 给上传到网页的图片添加水印(文字和图像)
- ASPX网页,添加标签到你意想不到的位置,让生成的html代码正确
- 第五章 给你的网页添加图像 认识媒体
- [置顶] 谷歌网页翻译时 外语不被翻译如何实现 添加code标签