莫祥慧的照片:学习笔记——定位插入

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

定位插入代码
（参阅游子学习笔记）
学习笔记
定位插入文字或图片，有三种方法：
第一，是用定位标签．
第二，是在表格内插入．
第三，是html标签行内套用css语句，设置绝对定位加叠内容．
定位标签．
定位代码模式：
文字或插入图片的代码

文字或插入图片的代码


属性
align （水平方向）
align=left　（左对齐），
align=center（中对齐），
align=right（右对齐）．
valign（垂直方向）．
valign=top（顶对齐），
valign=center（中对齐），
valign=bottom（底对齐）。
用在表格中 的代码
水平方向


垂直方向


水平方向的示例：
文字左对齐的代码：


文字左对齐的标签:



显示结果：
文字左对齐的标签:
文字居中的代码：


文字居中的标签:



显示结果：
文字居中的标签:
文字右对齐的代码：


文字右对齐的标签:



显示结果：
文字右对齐的标签:
垂直方向的示例：
只有在表格中，才可有上中下之分，因此，垂直方向的属性用在表格中。
代码模式：
不同组合
（一）　靠顶top的不同水平位置代码：
居左靠顶
居中靠顶
居右靠顶
（二）　靠底bottom的不同水平位置代码：
居左靠底
居中靠底
居右靠底
垂直中对齐是默认的,不设置valign属性即可。
表格中插入定位
先绘制表格，然后在表格中插入，从而实现定位。
cellpadding属性值设置为0的表格
代码




第一
行


第二
行




在第一行一列和 在第二行二列中插入图片
http://userimage2.360doc.com/10/0822/23/2572160_201008222340480660.jpg
http://userimage2.360doc.com/10/0822/23/2572160_201008222341050676.jpg
代码





src=http://userimage2.360doc.com/10/0822/23/2572160_201008222340480660.jpg
WIDTH=200px>

行


第二

src="http://userimage2.360doc.com/10/0822/23/2572160_201008222341050676.jpg"
WIDTH=200px>





效果
行
第二
可见，垂直中对齐是默认的
加入定位
代码





WIDTH=200px>

行


第二
>
WIDTH=200px>





效果
行
第二
取  border="0"时，格线会消掉
更多定位内容，参见 插入图片练习 
参考文章
插入图片练习 
定位插入的各种代码——东北狼均线
http://blog.eastmoney.com/zxb8888/blog_180231831.html
如何使用绝对定位加叠法——东北狼均线
http://blog.eastmoney.com/zxb8888/blog_180232532.html
定位贴图的方法——理睬
http://lxc66188.blog.163.com/blog/static/917649862008112113535490/
学习笔记——定位插入 学习笔记——插入动画 学习笔记——插入图片练习 学习笔记——插入多媒体 学习笔记——插入网上视频 学习笔记——插入FLASH代码的参数 学习笔记—— 按浏览器全页面定位 学习笔记——在背景图片中插入flash（透明）动画2 学习笔记——在背景图片中插入文字（原创） 学习笔记—— 字体大小 学习笔记——文字颜色 学习笔记——图片右边+文字 学习笔记——图片添加文字 学习笔记——换片+flash 学习笔记——图片的添加 学习笔记——Flash+文字 学习笔记——单层表格制作 学习笔记——HTML图片(Images) 学习笔记——HTML列表(Lists) 学习笔记——HTML表单(Forms) HTLM教程——学习笔记 学习笔记——多层表格制作 学习笔记——图片加边框 学习笔记——贴图练习