注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

.

定格成①道美丽的风景綫 在彼此间......

 
 
 

日志

 
 

【引用】图片代码、标签及属性  

2011-10-04 21:41:43|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自火力光波《图片代码、标签及属性》

 

   图片代码、标签及属性

格式: <img src="图片路径"属性="属性值">

 

基 本 属 性

      alt="简单说明"               border="边框宽度"

  width="宽度"               height="高度"

hspace="水平方向空白"               vspace="垂直方向空白"

align="对齐":  left 左      middle中      absmiddle 绝对中间

           right 右       up 居上        bottom居下

              其中靠左放可以造成‘文绕图’的效果

lowsrc:设定低分辨率图片,若所加入的是一张很大的图片,可先显示图片

usemap:映像地图

dynsrc:avi 文件的url的路径

loop:设定avi 文件循环播放的次数

loopdelay:设定avi 文件循环播放延迟

start:设定avi 文件的播放方式

 

 

版 面 属 性

 横线:<hr 属性="属性值"> 就是水平线或称分隔线

color="颜色":查颜色代码表

noshade(无阴影)

换行:<br>  空出一行   

不换行:<nobr></nobr>

分段:<p 属性="属性值">分段内容</p>  空出两行

      align ="对齐":left 左  center 中  right 右

区隔:<div 属性="属性值">区域内容</div>

      align ="对齐":left 左  center 中  right 右

置中:<center>文字、图片、表格等</center>

置左:<left>文字、图片、表格等</left>

预设:<pre>预设内容</pre>

右缩:<blockquote>文字</blockquote>   加一组标签往右缩排一单位

 

 

图文排版编辑

 

基本用法

用法:<img src="图档名称、路径">(就是不加任何属性啦!)

原始码

<img src="http://www.tool.la/logo/logo2.gif">嗨!我是本站的模特儿喔!

呈现结果

普通图片代码及属性 - 火力光波 - 火力光波的博客嗨!我是本站的模特儿喔!

长宽设定

用法:<img src="图档" height="高度" width="宽度">

原始码

<img src="http://www.tool.la/logo/logo2.gif">

呈现结果 普通图片代码及属性 - 火力光波 - 火力光波的博客

加上说明

用法:<img src="图档" alt="说明文字">滑鼠一到图上时,说明文字就会自动出现。

原始码

<img src="http://www.tool.la/logo/logo2.gif" alt="本站特约模特儿">移到图上看看。

呈现结果

普通图片代码及属性 - 火力光波 - 火力光波的博客移到图上看看。

图片

位置

用法:<img src="图档" align="位置">图片位置设定!可以靠左放:align=left、靠上align=top、靠下align=bottom、垂直置align=middle,其中靠左放可以造成‘文绕图’的效果。

原始码

<img src="http://www.tool.la/logo/logo2.gif" align=right>嗨!我往右边靠!

呈现

结果

普通图片代码及属性 - 火力光波 - 火力光波的博客嗨!我右边靠!

原始码

<img src="http://www.tool.la/logo/logo2.gif" align=left>嗨!我往左边靠!

呈现

结果

普通图片代码及属性 - 火力光波 - 火力光波的博客嗨!我往左边靠!

原始码

<img src="http://www.tool.la/logo/logo2.gif" align=top>文字对齐我头顶!

呈现

结果

普通图片代码及属性 - 火力光波 - 火力光波的博客文字对齐我头顶!

原始码

<img src="http://www.tool.la/logo/logo2.gif" align=bottom>文字对齐我脚底!

呈现

结果

普通图片代码及属性 - 火力光波 - 火力光波的博客文字对齐我脚底!

原始码

<img src="http://www.tool.la/logo/logo2.gif" align=middle>文字对齐我中间!

呈现

结果

普通图片代码及属性 - 火力光波 - 火力光波的博客文字对齐我中间!

原始码

<img src="http://www.tool.la/logo/logo2.gif" align=absmiddle>文字对齐我绝对中间!

呈现

结果

普通图片代码及属性 - 火力光波 - 火力光波的博客

边框设定

用法:<img src="图档" border="边框粗细">

原始码

<img src="http://www.tool.la/logo/logo2.gif" border="4">

呈现结果

 

左右间距

用法:<img src="图档" hspace="离左右物件的距离">

原始码

左边的字<img src="http://www.tool.la/logo/logo2.gif" hspace="15">右边的字

呈现结果

左边的字 普通图片代码及属性 - 火力光波 - 火力光波的博客 右边的字

上下间距

用法:<img src="图档" vspace="离上下物件的距离">

原始码

上面的字<br><img src="http://www.tool.la/logo/logo2.gif" vspace="15"><br>下面的字

呈现结果

    上面的字

普通图片代码及属性 - 火力光波 - 火力光波的博客

下面的字

 

相对路径:如图档放在c:\images里,网页档放在c:\demo里,如何写图片的路径呢?

情形

html档

的位置

图档的位置

写法

图文均在同一目录

c:\demo

c:\demo

<img src="tad.gif">

图在网页下一层

c:\demo

c:\demo\images

<img src="images/tad.gif">

图在网页上一层

c:\demo

c:\

<img src=" ../tad.gif">

图文在同一层但不同目录

c:\demo

c:\image

<img src="image/tad.gif">

说明: “../”是回到上一层目录的意思。“images/”则是进入下一层目录image之意,而“images/”的意思就是,回到上一层目录,然后再进入目录images中。以上均为“相对路径”的概念。  

 

   影像单位:px 完整的写法是“pixels”,称之为“像素”。像素,是萤幕上的一个小光点,然而这一小光点的大小,并非是固定的,举个例子而言,萤幕本身十五寸,不会因为你的任何设定而变成十七寸。但是,其解析度是可以改变的,举其640 ×480来说,其代表的就是在萤幕上有宽640个光点,高有480光点,若是我们将解析度调整为800 ×600其宽势必要从640变成800个光点,也因此,该光点便会变小一点,所以,我们看起来就会觉得解析度调高后,萤幕内的东西,变得小小的,很精致,那就是因为光点变小的原因。我们常见的解析度有以下几种:“640 ×480”、“800 ×600”、“1024 ×768”。

   影像格式:

图档范例

说明

普通图片代码及属性 - 火力光波 - 火力光波的博客 gif格式的图形只能以256个颜色显示,虽然其色彩较少,但颜色鲜艳亮丽,若是图形颜色不多,用gif格式存档会较漂亮。
普通图片代码及属性 - 火力光波 - 火力光波的博客 jpg格式的图形是以全彩显示,适合用在相片或是渐层颜色的图片上,压缩比例以75%为适中。

 

 

图片特效代码及属性

 

图片翻转制作

   左右翻转:  <img src="图片地址" style="filter:FlipH">  

 上下翻转  <img src="图片地址" style="filter:FlipV">

具体方法请点击连接

 

图片倒影制作

 <center><IMG src="图片地址" width="宽度" height="高度"><BR><IMG src="图片地址" style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()" width="宽度" height="高度"></center>

具体方法请点击连接

 

 透明图片制作 

(两种都可)

1、 <img src="图片地址" style="filter:Alpha(opacity=100,finishOpacity=0,style=0)">

2、 <div style="filter:Alpha(opacity=100,finishOpacity=0,style=0)";width:宽;height:高"><img src="图片

注解: 涉及到的属性:修改数值对应即可

opacity:  开始处的透明度    finishOpacity:结束处的透明度

style:   0,平均透明 1,线状透明 2,圆形透明 3,菱形透明

具体方法请点击连接

 

 朦胧图片制作

<TABLE align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: Alpha(opacity=100,style=2)" width=200 background=http://img.blog.163.com/photo/xPtjg97_UVzJFz72NNGF7w==/4806748177288317599.jpg height=200></TD></TR></TBODY></TABLE>

其中:opacity:开始处的透明度,finishOpacity:结束处的透明度;

   style:0,平均透明 1,线状透明 2,圆形透明 3,菱形透明。

 具体方法请点击连接 

 

 

返回图片制作目录

  评论这张
 
阅读(94)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018