各种定位代码

《各种定位代码》由会员分享，可在线阅读，更多相关《各种定位代码（9页珍藏版）》请在装配图网上搜索。

1、欢迎您！启步学代码。（供初学 HTML 代码的朋友参考） 定位插入的各种代码 页面上要在那一个位置插入文字或图片等内容，有三种方法：第一，是定位标签第二，是 用表格多行多列，在单元格内插入内容第三，是 html 标签行内套用 css 语句，设置绝对定位加叠内容先学习第一种方法定位标签 定位标签有二种属性内容及属值：定位标签属性内容：水平方向（align）和垂直方向（valign）.水平方向align有三种属值：left （左对齐），center （居中）,right （右对齐）.垂直方向valign有二种属值：top （靠顶），bottom （靠底）。定位标签模式：定位标签模式 1定位标签模式

2、 2 水平方向即左中右的示例：文字左对齐的代码：文字左对齐的标签:显示结果：文字左对齐的标签:文字居中的代码：文字居中的标签:还有下面两条居中标签： 居中标签/CENTER 居中标签 显示结果：文字居中的标签:文字右对齐的代码：文字右对齐的标签:显示结果文字右对齐的标签:垂直方向即靠顶和靠底的示例：垂直方向定位靠顶或靠底，可以结合水平方向左中右，构成六种位置指令.代码必须加在表格的列标签中，才有效.一个单元格中只能执行一条指令. 代码模式： （一） 靠顶 top 的不同水平位置代码： 居左靠顶 居中靠顶 居右靠顶（二） 靠底 bottom 的不同水平位置代码： 居左靠顶 居中靠顶 居右靠顶不同

3、位置插入文字的实例（一） 练习做生日图片设置一张有鲜花作背景的图框，表格 分拆为上中下三个单元格，边框粗度设为0.第一单元格插入的文字靠顶居左；第二单元插入的文字居中；第三单元格插入的文字靠底居 右.代码如下： 送给春兰妹妹 祝你生日快乐！ 大姐冬梅 20080808 说明： 居中标签. 表格标签，用鲜花图片作背景.第一单元格.加入居左靠顶语句. 第二单元格.加入居中语句. 第三单元格.加入居右靠底语句.表格和图片居中代码的尾标签.注：这种多元格表格，边框虽 设定为零，但有一些论坛发表时，仍显示出单元格分隔线，用下面不设多元格的方法，也可达到相仿的效果.送给春兰妹妹祝你生日快乐！ 大姐冬梅 2

4、0080808说明：列标签指令第一行文字居左靠顶语句.定义居中的第二行特效文字的代码. 设置6个空行标签，占用一些位置. 定义第三行文字居右靠底.欢迎您！启步学代码。(供初学 HTML 代码的朋友参考)如何使用绝对定位加叠法要在音画贴页面的任何一位置上或同一位置上加叠文字，图片和Flash等内容，可以套用css 样式表定位属性两个属值，即绝对定位和相对定位的语句，进行加叠或叫挂贴.绝对定位的应用比较广泛，有一些技术难度，初步先选易入 手的内联样式来学习.绝对定位和相对定位的语句：style=LEFT: 0px; WIDTH: 940px; POSITION: absolute; TOP: 20

5、pxstyle=LEFT: 0px; WIDTH: 940px; POSITION: relative; TOP: 20px style=内联css样式标记.LEFT: 0px 距离左边水平启点数，值越大越靠右侧。 LEFT: 0px也可设为RIGHT: 320px距离右边水平启点数.WIDTH: 940px 宽度. POSITION 标记属性名称：定位.absolute定位的属值：绝对定位.relative 定位的属值：相对定位.TOP: 20px 距离顶部垂直启点，值越大越靠下部。绝对定位加叠法示例代码(1)101INPUTtype=imagewidth=120src=分析： 图片的显示位

6、置没有在本图框内，而是在本页的右上角.原因是绝对定位必须有参照条 件，作为启始基准点，特别是垂直启点.增设相对定位代码，就可解决这个问题.本代码垂直启点TOPP: 20px，系统默认页面顶部作为垂直 启始基准点.绝对定位加叠法示例代码(2 )102INPUTtype=imagewidth=120src= 示例代码(2)仅是将示例代码(1)的水平和垂直启始点修改一下.示例代码(1)的水平和垂直启始点： LEFT: 780px;TOP: 20px. 示例代码(1)的水平和垂直启始点： LEFT: 410px;TOP: 2100px.垂直启始点参数TOP: 2100px，是根据本对象所在位置进行调整

7、出来的. 示例代码(2)是作为学习对照参考，不可单独使用.看分析： 图片虽然是在本图框内显示，但上面的内容稍有变动，或访问者使用不同分辨率，就会出现错位.所以绝对定位加叠，必须结合相对定位容框内使用.相对定位与绝对定位加叠法示例图片加叠图片代码： INPUTtype=imagewidth=160 src=INPUT type=image width=200 src=INPUT type=image width=300 src=相片加叠相框代码：INPUT style=LEFT: 130px; WIDTH: 220px; POSITION: absolute; TOP: 110px; HEIGH

8、T: 320pxtype=image width=220src=INPUT style=LEFT: -20px; WIDTH: 500px; POSITION: absolute; TOP: -20px; HEIGHT: 550pxtype=image height=1 width=500src= DIV style=LEFT: 0px; WIDTH: 500px; POSITION: relative.相对定位标签. POSITION: relative 相对定位语句.相对定位标签，可以说是一个容框，绝对定位加叠的所有内容都装在这个范围中.INPUT style=LEFT: 130px; W

9、IDTH: 220px; POSITION: absolute.套用绝对定位语句的 贴像片标签.套用绝对定位语句的 贴像框标签.这例代码是先用绝对定位贴像片，再用绝对定位加叠透明相框.关键在于设置水平和 垂直启始点参数用绝对定位挂贴 Flash示例代码（1）： 用绝对定位编辑竖排文字示例编辑竖排文字有用软件，也有各种特效代码，做法有些困难这里试用绝对定位挂贴的 方法，效果很好，提供大参考 示例代码（1):毛主席诗词 答李淑 一 i我失骄杨君失柳，杨柳轻扬直上重霄九。 问讯吴刚何所有， 吴刚捧出桂花酒。 寞嫦娥舒广袖，万里长空且为忠魂舞。 忽报人间曾伏虎， 泪飞顿作倾盆雨。 示例代码（2）:毛主席诗词 答李淑 一 i 我失骄杨君失柳， 杨柳轻扬直上重霄九。 问讯吴刚何所有， 吴刚捧出桂花酒。 寞嫦娥舒广袖， 万里长空且为忠魂舞。 忽报人间曾伏虎， 泪飞顿作倾盆雨。 示例代码(3)： 毛主席诗词欣赏答李淑一 i我失骄杨君失柳，杨柳轻扬直上重霄九。问讯吴刚何所有， 吴刚捧出桂花酒。 寞嫦娥舒广袖， 忽报人间曾伏虎，泪飞顿作倾盆雨。