标签之美四——为网页添加绚丽多彩的图像 原

标签之美——图像的使用

一、设置网页背景图片

<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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个小程序员的成长笔记

Canvas 图形组合方式

/** * 图形组合 */ function initDemo5() { var canvas = document.getElementById(...

37660
来自专栏Java后端技术

让div等块级元素水平以及垂直居中的解决办法

  我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让d...

10320
来自专栏跟着阿笨一起玩NET

html打印表格每页都有的表头和打印分页

本文转载:http://www.cnblogs.com/RitchieChen/archive/2008/07/30/1256829.html

58810
来自专栏河湾欢儿的专栏

表格

表格标签: table 表格 thead 表格头 tbody 表格主体 tr 表格行 th 元素定义表头 td 元素定义表格单元

10710
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何在手机上开发仪表盘控件

设置仪表盘轴线段,打开集合编辑器,并点击"添加",Color属性(仪表盘轴线段的颜色)和SplitNumRate属性(仪表盘轴线段占总线段的比例,取值0-1),...

11030
来自专栏Android开发指南

13.按比例显示图片、自定义属性、测量

386100
来自专栏python3

tkinter -- Canvas(1)

提供可以用来进行绘图的 Container,支持基本的几何元素,使用 Canvas 进行绘图时,所有的操作都是通过 Canvas,不是通过它的元素

9420
来自专栏.Net移动开发

.NET(C#、VB)移动开发——Smobiler平台控件介绍:TextTabBar控件

获得和设置标签栏单元集合,打开集合编辑器,并点击“添加”,分别填写Text(菜单项文本),Value(内部值,不在界面上显示),如图 7、图 8;

15320
来自专栏河湾欢儿的专栏

手机浏览器的八个容易忽略的兼容问题

33730
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:实现手机上常见的ListMenuView

打开集合编辑器,并点击“添加”,ID属性(用于标识菜单组),Items属性(菜单项集合),Title属性(菜单组文本),Value属性(菜单组值),如图1、图2

11640

扫码关注云+社区

领取腾讯云代金券