莎蔓莉莎美容院价格表:学习笔记——插入图片练习

来源：百度文库 编辑：九乡新闻网 时间：2024/04/30 03:59:23
       多福老人欢迎您
http://qwp43.360doc.com

在网站插入图片:
基本  代码 ：
（ 一)        
祝福语A)   图片位置
1)  “插入图片的代码”

其中 align=center定义位置，
将其中的center（居中）换为   left   或者   right   即为居左或居右
width="480"height="360"表示图片的宽和高，数值可以改动
例：取图片地址      http://userimage2.360doc.com/10/0903/81/2572160_20100903814110557.jpg
代码为：

width=480   height=360;>

效果：

2）


图片的左右对齐方式
align="Left"（左对齐）
align="center"（中对齐）
align="right"（右对齐）
例1
width="480"height="360">
效果

图片处左对齐，顶对齐状态。为默认态！
例2

width=480 height=360;>

效果

例
3
width=480 height=360;>


效果

3)   水平方向和垂直方向（用在表格中）
水平方向
“插入图片的代码”
“插入图片的代码”
垂直方向
“插入图片的代码”
“插入图片的代码”
B)   按浏览器全页面定位
（在边框内不适用，因为图可能超出日志边框）

LEFT: 0px为从左边定位；
right   ：0px为从右边定位；
TOP: 100px是至顶距离。
POSITION标记属性名称：定位．
absolute  标记属性值：绝对定位．
上述代码加在"置入图片代码"之前。用于首页较合适
例：取LEFT: 100px；TOP: 100px
代码为：

width=480   height=360;>
效果见
学习笔记—— 按浏览器全页面定位
c)   利用代码


   


取图片地址：http://userimage2.360doc.com/10/1225/20/2572160_201012252023430531.jpg
WIDTH: 200px
代码为




效果

可以调整MARGIN-TOP: -50px; MARGIN-LEFT: 100px的取值，改变图片的位置。同时克服了按浏 览器全页面定位的缺点。可以调整左右上下位置，灵活适用1
MARGIN-TOP: -50px，是从“效果”下边缘起向上计算的；MARGIN-LEFT: 100px是从边框左内 边缘起算的。 这一代码的应用可参见学习笔记——将图片装入镜框2 （二)       border=0取值可加框
（改变81px 、80px 数据变换图片的大小）
取图片地址：http://userimage2.360doc.com/10/1225/20/2572160_201012252023430531.jpg
style="WIDTH: 200px; HEIGHT: "
代码：
src="http://userimage2.360doc.com/10/1225/20/2572160_201012252023430531.jpg   " border=0>
效 果
这种办法不同之处是多了border=0项，表示图片有边框，取值不为零
时，边框就会显示出来。
如
src="http://userimage2.360doc.com/10/1225/20/2572160_201012252023430531.jpg " border=10>
效果

两种方法比较：
1）      width="200">
2）src="http://userimage2.360doc.com/10/1225/20/2572160_201012252023430531.jpg   " border=0>
效果

可以看出，再没给图片定位的情况下，默认左对齐及顶对齐。同一代码连续粘贴的情况下，图形会
横向排列。
border=0
定位插入
为了更灵活的定位，可使用定位插入法。
贴图实例
点击  贴图练习 
参考文章
学习笔记——HTML图片
http://www.360doc.com/EditArt.aspx?articleid=93282022
学习笔记——插入图片练习 学习笔记——图片右移练习 学习笔记——插入动画 学习笔记——定位插入 学习笔记——插入多媒体 学习笔记——插入网上视频 学习笔记——贴图练习 学习笔记——插入FLASH代码的参数 学习笔记——图片右边+文字 学习笔记——图片添加文字 学习笔记——图片的添加 学习笔记——HTML图片(Images) 学习笔记——图片加边框 学习笔记——在背景图片中插入flash（透明）动画2 学习笔记——在背景图片中插入文字（原创） 学习笔记——多图片向上方向滚动 学习笔记——多图片向上方向滚动2 学习笔记——多图片向上方向滚动1 学习笔记——图片+滚动字+flash 学习笔记——图片防被盗代码 学习笔记——Flash音画加入图片的代码 学习笔记——图片添加透明动画 学习笔记——图片添加透明动画 学习笔记—— 字体大小