如何设置文字在网页中的位置
请问怎样能将左边的字靠向右边的编辑框呢？我的代码：<html><head><style>.A1{margin-left:400;margin-top:50;width:2...
请问怎样能将左边的字靠向右边的编辑框呢？
我的代码：
<html> <head> <style> .A1{margin-left:400;margin-top:50;width:280;height:25;padding:3} .A2{margin-left:400;margin-top:10;width:280;height:25;padding:3} </style> </head> <body> 学生列表：<select class="A1"> <option> 张三 </option> <option> 李四 </option> </select><p> 编辑窗口：<input type="text" class="A2"> </body></html> 展开
我的代码：
<html> <head> <style> .A1{margin-left:400;margin-top:50;width:280;height:25;padding:3} .A2{margin-left:400;margin-top:10;width:280;height:25;padding:3} </style> </head> <body> 学生列表：<select class="A1"> <option> 张三 </option> <option> 李四 </option> </select><p> 编辑窗口：<input type="text" class="A2"> </body></html> 展开
展开全部
文字显示位置分别为：
水平方向（align），垂直方向（valign）
水平方向即左中右：
left（左对齐）
center（居中）
RIGHT（右对齐）
垂直方向即靠顶和靠底.
top（靠顶）、bottom（靠底）等。
一. 水平方向即左中右的代码：
<p align=left>
<font style=font:15pt face=黑体 color=fff000>向左对齐</font></P>
<p align=CENTER>
<font style=font:15pt face=黑体 color=fff000>表示居中</font></P>
<p align=RIGHT>
<font style=font:15pt face=黑体 color=fff000>向右对齐</font></P>
说明:
金钥匙就不显示了, 其实是很明显的, 看文字你就知道具体的方位了!
下面我们用图片做出来的效果代码, 对大家的帮助和学习是实例的意义, 理解起来就清楚得多了;
代码如下:
<CENTER>
<TABLE width=480 height=320 bordercolor=olive background=http://img.bimg.126.net/photo/jo8HqUwaHI7sW-so_hKerg==/1988339235485514743.jpg border=18>
<TBODY>
<TR>
<td align=center valign=top><br>
<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#ff00ff> <B>
<p align=left>金钥匙</P><br>
<p align=CENTER>喜欢你的到来!</P><BR><BR>
<p align=RIGHT>朋友<br>你好!</P></B></FONT>
</TD></TR></TOBDY></TABLE></CENTER>
二. 靠顶和靠底的代码：
垂直方向valign）靠顶的代码：
<TD align=LEFT valign=top>居左靠顶</TD>
<TD align=center valign=top>居中靠顶</TD>
<TDalign=RIGHT valign=top>居右靠顶</TD>
垂直方向valign）靠底的代码：
<TD align=LEFT valign=bottom>居左靠底</TD>
<TD align=center valign=bottom>居中靠底</TD>
<TD align=RIGHT valign=bottom>居右靠底</TD>
文字输出位置垂直方向的代码是设置在一张空表格的单元格里（TD）和(/TD)，方便易用。
实例如下：
<CENTER>
<TABLE width=480 height=320 bordercolor=olive background=http://sucai.heima.com/sucai/news/bg/59.jpg border=18>
<TR>
<TD>
<TABLE width=460 height=320 bordercolor=olive border=0>
<TR>
<TD align=LEFT valign=top height=80><FONT style="FONT-SIZE: 12pt" face=黑体 color=#fff000><B>
居左靠顶的代码<BR><h3>align=LEFT valign=top</h3></B></FONT></TD></TR>
<TR>
<TD align=center valign=top height=160><FONT style="FONT-SIZE: 12pt" face=黑体 color=#fff000><B>
居中靠顶的代码<BR><h3>align=center valign=top</h3></B></FONT></TD></TR>
<TR>
<TD align=RIGHT valign=bottom height=80><FONT style="FONT-SIZE: 12pt" face=黑体 color=#fff000><B>
居右靠底的代码<BR><h3>align=RIGHT valign=bottom</h3></B></FONT>
</TD></TR></TABLE>
</TD></TR></TABLE></CENTER>
显示:
居左靠顶的代码
align=LEFT valign=top
居中靠顶的代码
align=center valign=top
居右靠底的代码
align=RIGHT valign=bottom
说明:
◇垂直方向设置必须在表格的单元格里（TD）和(/TD)。
◇本实例在图框内插入一张空表格，分为三横排。
◇根据各行插入内容设置高度。
◇在一张表格中，设置每一行的关键语句。
行的开始标签：
<TR>
<TD align=center valign=top height=160>
插入内容
行的结束标签：
</TD></TR>
代码命令注解:
一、字体语法：
align=center 字体居中
align=right 字体居右
align=left 字体居左
align=up 字体居上
align=down 字体居下
<font color=ff000>...</font> 字体颜色
face=华文行楷表示字体
<font style=font:30pt face=新宋体 color=#ff0000>文字</font>
font:30pt 数值大文字就大
<font size=1>...</font> 最小字体
<font size=7>...</font> 最大字体
<h1>...</h1> 标题字(最大 )
<h6>...</h6> 标题字(最小)
<b>...</b> 粗体字
<strong>...</strong> 粗体字(强调)
<i>...</i> 斜体字
<em>...</em> 斜体字(强调)
<big>...</big> 字体加大
<marquee>...</marquee> 移动字体(走马灯)
<dfn>...</dfn> 斜体字(表示定义)
<u>...</u> 底线
<ins>...</ins> 底线(表示插入文字)
<strike>...</strike> 横线
<s>...</s> 删除线
<del>...</del> 删除线(表示删除)
<kbd>...</kbd> 键盘文字
<tt>...</tt> 打字体
<xmp>...</xmp 固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>...</plaintext> 固定宽度字体(不执行标记符号)
<listing>...</listing> 固定宽度小字体
<font style ="font-size:100px">...</font> 无限增大
二、区断标记：
<hr> 水平线
<hr size="9" 水平线(设定大小)
<hr width="80%"> 水平线(设定宽度)
<hr color="ff0000"> 水平线(设定颜色)
<br> (换行)
空格命令
<nobr>...</nobr> (不换行)
<p>...</p> (段落)
<center>...</center> 置中 <!>连结格式
<base href=地址> (预设好连结路径)
<a href=地址></a> 外部连结
<a href=地址 target="_blank"></a> 外部连结(另开新窗口)
<a href=地址 target="_top"></a> 外部连结(全窗口连结)
<a href=地址 target="页框名"></a> 外部连结(在指定页框连结)
三、贴图/音乐：
<img src=图片地址> 贴图
<img src=图片地址 width="180"> 设定图片宽度
<img src=图片地址 height="30"> 设定图片高度
<img src=图片地址 alt="提示文字"> 设定图片提示文字
<img src=图片地址 border="1"> 设定图片边框
<bgsound src=MID音乐文件地址> 背景音乐设定
<body background="背景图片地址"> 贴背景
<body bgcolor="#ff0000"> 设定背景颜色
<embed src="flash地址" width="宽度" height="高度"> 贴Flash图
<img dynsrc="影视文件地址" width="宽度" height="高度" start=mouseover> 贴影视
<iframe src="相关地址" width="宽度" height="高度"></iframe> 贴网页
<A href="对方网址">写文字 文字连接
<a href="对方网址"><IMG src="图片地址" border=0> 图片连接
<DIV><FONT face=黑体 color=#ff0000 size=4> <A href="对方网址">文字</DIV> 彩色文字连接
<P align=center><FONT color=#0066ff face=华文行楷 size=5>插入文字</FONT></P>设定文
四、滑动语法：
<marquee>...</marquee>普通滑动
<marquee behavior=slide>...</marquee>滑动
<marquee behavior=scroll>...</marquee>预设卷动
<marquee behavior=alternate>...</marquee>来回滑动
<marquee direction=down>...</marquee>向下滑动
<marquee direction=up>...</marquee>向上滑动
<marquee direction=right></marquee>向右滑动
<marquee direction=left></marquee>向左滑动
<marquee loop=2>...</marquee>滑动次数
<marquee width=180>...</marquee>设定宽度
<marquee height=30>...</marquee>设定高度
<marquee bgcolor=FF0000>...</marquee>设定背景颜色
<marquee scrollamount=2>...</marquee>设定滑动速度数值
<marquee scrolldelay=200>...</marquee>设定滑动时间
<marquee scrolldelay=300 scrollamount=100>插入文字</marquee>滑动停顿
<body background="背景图片地址" body bgproperties=fixed>固定背景不随滚动条滚动
五．表格语法：
<table aling=left>...</table>表格位置,置左
<TABLE aling=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table>设定表格的背景颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
<table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数
<table frame=参数>...</table>设定表格外框线的显示方式
<table width=宽度>...</table>指定表格的宽度大小(使用数字)
<table height=高度>...</table>指定表格的高度大小(使用数字)
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)
<!>分割窗口
<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
<frameset cols="20%,*">分割左右两个框架
<frameset cols="20%,*,20%">分割左中右三个框架
<分割上下两个框架
<frameset rows="20%,*,20%">分割上中下三个框架
<! - - ... - -> 批注
<A HREF TARGET> 指定超级链接的分割窗口
<A HREF=#锚的名称> 指定锚名称的超级链接
<A HREF> 指定超级链接
<A 被连结点的名称
<ADDRESS>....</ADDRESS> 用来显示电子邮箱地址
水平方向（align），垂直方向（valign）
水平方向即左中右：
left（左对齐）
center（居中）
RIGHT（右对齐）
垂直方向即靠顶和靠底.
top（靠顶）、bottom（靠底）等。
一. 水平方向即左中右的代码：
<p align=left>
<font style=font:15pt face=黑体 color=fff000>向左对齐</font></P>
<p align=CENTER>
<font style=font:15pt face=黑体 color=fff000>表示居中</font></P>
<p align=RIGHT>
<font style=font:15pt face=黑体 color=fff000>向右对齐</font></P>
说明:
金钥匙就不显示了, 其实是很明显的, 看文字你就知道具体的方位了!
下面我们用图片做出来的效果代码, 对大家的帮助和学习是实例的意义, 理解起来就清楚得多了;
代码如下:
<CENTER>
<TABLE width=480 height=320 bordercolor=olive background=http://img.bimg.126.net/photo/jo8HqUwaHI7sW-so_hKerg==/1988339235485514743.jpg border=18>
<TBODY>
<TR>
<td align=center valign=top><br>
<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#ff00ff> <B>
<p align=left>金钥匙</P><br>
<p align=CENTER>喜欢你的到来!</P><BR><BR>
<p align=RIGHT>朋友<br>你好!</P></B></FONT>
</TD></TR></TOBDY></TABLE></CENTER>
二. 靠顶和靠底的代码：
垂直方向valign）靠顶的代码：
<TD align=LEFT valign=top>居左靠顶</TD>
<TD align=center valign=top>居中靠顶</TD>
<TDalign=RIGHT valign=top>居右靠顶</TD>
垂直方向valign）靠底的代码：
<TD align=LEFT valign=bottom>居左靠底</TD>
<TD align=center valign=bottom>居中靠底</TD>
<TD align=RIGHT valign=bottom>居右靠底</TD>
文字输出位置垂直方向的代码是设置在一张空表格的单元格里（TD）和(/TD)，方便易用。
实例如下：
<CENTER>
<TABLE width=480 height=320 bordercolor=olive background=http://sucai.heima.com/sucai/news/bg/59.jpg border=18>
<TR>
<TD>
<TABLE width=460 height=320 bordercolor=olive border=0>
<TR>
<TD align=LEFT valign=top height=80><FONT style="FONT-SIZE: 12pt" face=黑体 color=#fff000><B>
居左靠顶的代码<BR><h3>align=LEFT valign=top</h3></B></FONT></TD></TR>
<TR>
<TD align=center valign=top height=160><FONT style="FONT-SIZE: 12pt" face=黑体 color=#fff000><B>
居中靠顶的代码<BR><h3>align=center valign=top</h3></B></FONT></TD></TR>
<TR>
<TD align=RIGHT valign=bottom height=80><FONT style="FONT-SIZE: 12pt" face=黑体 color=#fff000><B>
居右靠底的代码<BR><h3>align=RIGHT valign=bottom</h3></B></FONT>
</TD></TR></TABLE>
</TD></TR></TABLE></CENTER>
显示:
居左靠顶的代码
align=LEFT valign=top
居中靠顶的代码
align=center valign=top
居右靠底的代码
align=RIGHT valign=bottom
说明:
◇垂直方向设置必须在表格的单元格里（TD）和(/TD)。
◇本实例在图框内插入一张空表格，分为三横排。
◇根据各行插入内容设置高度。
◇在一张表格中，设置每一行的关键语句。
行的开始标签：
<TR>
<TD align=center valign=top height=160>
插入内容
行的结束标签：
</TD></TR>
代码命令注解:
一、字体语法：
align=center 字体居中
align=right 字体居右
align=left 字体居左
align=up 字体居上
align=down 字体居下
<font color=ff000>...</font> 字体颜色
face=华文行楷表示字体
<font style=font:30pt face=新宋体 color=#ff0000>文字</font>
font:30pt 数值大文字就大
<font size=1>...</font> 最小字体
<font size=7>...</font> 最大字体
<h1>...</h1> 标题字(最大 )
<h6>...</h6> 标题字(最小)
<b>...</b> 粗体字
<strong>...</strong> 粗体字(强调)
<i>...</i> 斜体字
<em>...</em> 斜体字(强调)
<big>...</big> 字体加大
<marquee>...</marquee> 移动字体(走马灯)
<dfn>...</dfn> 斜体字(表示定义)
<u>...</u> 底线
<ins>...</ins> 底线(表示插入文字)
<strike>...</strike> 横线
<s>...</s> 删除线
<del>...</del> 删除线(表示删除)
<kbd>...</kbd> 键盘文字
<tt>...</tt> 打字体
<xmp>...</xmp 固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>...</plaintext> 固定宽度字体(不执行标记符号)
<listing>...</listing> 固定宽度小字体
<font style ="font-size:100px">...</font> 无限增大
二、区断标记：
<hr> 水平线
<hr size="9" 水平线(设定大小)
<hr width="80%"> 水平线(设定宽度)
<hr color="ff0000"> 水平线(设定颜色)
<br> (换行)
空格命令
<nobr>...</nobr> (不换行)
<p>...</p> (段落)
<center>...</center> 置中 <!>连结格式
<base href=地址> (预设好连结路径)
<a href=地址></a> 外部连结
<a href=地址 target="_blank"></a> 外部连结(另开新窗口)
<a href=地址 target="_top"></a> 外部连结(全窗口连结)
<a href=地址 target="页框名"></a> 外部连结(在指定页框连结)
三、贴图/音乐：
<img src=图片地址> 贴图
<img src=图片地址 width="180"> 设定图片宽度
<img src=图片地址 height="30"> 设定图片高度
<img src=图片地址 alt="提示文字"> 设定图片提示文字
<img src=图片地址 border="1"> 设定图片边框
<bgsound src=MID音乐文件地址> 背景音乐设定
<body background="背景图片地址"> 贴背景
<body bgcolor="#ff0000"> 设定背景颜色
<embed src="flash地址" width="宽度" height="高度"> 贴Flash图
<img dynsrc="影视文件地址" width="宽度" height="高度" start=mouseover> 贴影视
<iframe src="相关地址" width="宽度" height="高度"></iframe> 贴网页
<A href="对方网址">写文字 文字连接
<a href="对方网址"><IMG src="图片地址" border=0> 图片连接
<DIV><FONT face=黑体 color=#ff0000 size=4> <A href="对方网址">文字</DIV> 彩色文字连接
<P align=center><FONT color=#0066ff face=华文行楷 size=5>插入文字</FONT></P>设定文
四、滑动语法：
<marquee>...</marquee>普通滑动
<marquee behavior=slide>...</marquee>滑动
<marquee behavior=scroll>...</marquee>预设卷动
<marquee behavior=alternate>...</marquee>来回滑动
<marquee direction=down>...</marquee>向下滑动
<marquee direction=up>...</marquee>向上滑动
<marquee direction=right></marquee>向右滑动
<marquee direction=left></marquee>向左滑动
<marquee loop=2>...</marquee>滑动次数
<marquee width=180>...</marquee>设定宽度
<marquee height=30>...</marquee>设定高度
<marquee bgcolor=FF0000>...</marquee>设定背景颜色
<marquee scrollamount=2>...</marquee>设定滑动速度数值
<marquee scrolldelay=200>...</marquee>设定滑动时间
<marquee scrolldelay=300 scrollamount=100>插入文字</marquee>滑动停顿
<body background="背景图片地址" body bgproperties=fixed>固定背景不随滚动条滚动
五．表格语法：
<table aling=left>...</table>表格位置,置左
<TABLE aling=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table>设定表格的背景颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
<table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数
<table frame=参数>...</table>设定表格外框线的显示方式
<table width=宽度>...</table>指定表格的宽度大小(使用数字)
<table height=高度>...</table>指定表格的高度大小(使用数字)
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)
<!>分割窗口
<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
<frameset cols="20%,*">分割左右两个框架
<frameset cols="20%,*,20%">分割左中右三个框架
<分割上下两个框架
<frameset rows="20%,*,20%">分割上中下三个框架
<! - - ... - -> 批注
<A HREF TARGET> 指定超级链接的分割窗口
<A HREF=#锚的名称> 指定锚名称的超级链接
<A HREF> 指定超级链接
<A 被连结点的名称
<ADDRESS>....</ADDRESS> 用来显示电子邮箱地址
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
因为.A1与.A2并没有包含“学生列表”和“编辑窗口”这两个元素，所以你设置的margin-left:400;的位移也就不包括“学生列表”和“编辑窗口”。
你可以使用段落标签来实现整体位移
<p>学生列表：
<select class="A1">
<option> 张三 </option>
<option> 李四 </option>
</select>
</p>
<p>
编辑窗口：<input type="text" class="A2" />
</p>
然后对p进行css样式设置
<style>
p{margin-top:50px;height:25px;padding:3px;text-align:right;}
p select.A1{width:150px;height:22px;}
p input.A2{width:150px;height:20px;}
</style>
时间有限，代码就帮你改到这，经过测试，是可以得到你想要的结果。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你框框不是left400吗？那么学生列表这几个字也可以加上css样式控制距离阿。
更多追问追答
追问
能帮忙写一下吗，我只会那样写文本，怎样给文本也加css控制呢？
追答
你这样，在文字前面加空格就好了，在dw里敲空格，敲到位置接近就好了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
