网页怎么做文字显示位置的控制
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页怎么做文字显示位置的控制相关的知识，希望对你有一定的参考价值。
文字显示位置分别为：水平方向（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>
显示:
金钥匙
喜欢你的到来!
朋友
你好!
说明;
1. 代码中红色的就是图片的地址, 大家是可以换的!
2. 代码中粉色的是文字的标签, 它里面的含义包括了文字设置的大小; 文字的字体; 文字的颜色值; 这些都是可以调整的!
3. 代码中黄色的就是直接显示文字的位置了, 其实就是水平方向即左中右的代码!
二. 靠顶和靠底的代码：
垂直方向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 > 水平线(设定宽度)
<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=图片地址 > 设定图片宽度
<img src=图片地址 > 设定图片高度
<img src=图片地址 > 设定图片提示文字
<img src=图片地址 border="1"> 设定图片边框
<bgsound src=MID音乐文件地址> 背景音乐设定
<body background="背景图片地址"> 贴背景
<body bgcolor="#ff0000"> 设定背景颜色
<embed src="flash地址" > 贴Flash图
<img dynsrc="影视文件地址" start=mouseover> 贴影视
<iframe src="相关地址" ></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> 用来显示电子邮箱地址 参考技术A 【问题描述】：设置浏览器主页【简易步骤】：方案一:在【360网盾】中—右下角—【设置主页向导】—将想设置的网页输入方案二:在【internet选项中】—【主页设置】—输入想要的网站—点击【确定】【解决方案】：方案一：在360网盾中设置主页1）完成【确定】即可。 (如图2-3)图2图3方案二：设置internet主页1. 如没有安装360安全卫士，通过浏览器属性操作，打开【控制面板】选择【网络和internet】连接打开图标。（如图4）图42. 选择【internet选项】。（如图5）图53. 打开后第一个常规下面有个【主页设置】对话框，在里面输入需要的主页地址即可。（如图6）图64. 点击【应用】方案三：360极速浏览器设置1. 打开【360极速浏览器】—【选项】.（如图7）图72. 【基本设置】——主页将要改的主页地址填上即可。 填写完毕后浏览器有自动保存功能，关闭即可。（如图8）图8方案四：360安全浏览器设置1. 打开【360安全浏览器】—【工具】—【主页设置】。（如图9）图92. 【常规设置】中—如下图选中—填入地址即可。填写完毕后浏览器有自动保存功能。（如图10）图10
css 怎么控制弹出层位置,跪求
我现在做的是网页中有两排小图,就是点击一下小图,出现新层,显示的图片中心点怎么位于小图的中间,有人会吗??请指教 我用的是css js只实现了弹出功能
简单写了一个 大概就是用了个相对定位 通过设置top和left的值来确定弹出框位于图片上边和左边的距离！具体的值你要以调下top和left.bottomdivposition:relative;background:#FCC;width:200px;height:200px;
.popposition:absolute;width:150px;height:100px;top:50px;left:100px;border:1px solid #000;background:#CCC
</style>
<div class="bottomdiv">
<div class="pop">弹出层内容</div>
<img src="http://www.baidu.com/search/zhidao/jctuijian/1217ms.jpg" width="200" height="200" />
</div> 参考技术A
这个意思吗
html:
<div class="d2">
<img src="img/t1.png" alt="" class="img1" />
<div class="d1"></div>
</div>
css:
.d1
width:30px;
height:30px;
background: #000;
border-radius:50%;
position: absolute;
top:50%;
left:50%;
margin-left:-15px;
margin-top:-15px;
display: none;
.d2
width:300px;
height:150px;
position: relative;
js:
$(".img1").click(function()
$(".d1").css("display","block");
)
参考技术B 可以采用css中的position来实现决定定位。代码实例如下：
<html><head><style type="text/css">p.oneposition:fixed;left:5px;top:5px;p.twoposition:fixed;top:30px;right:5px;</style></head><body><p class="one">一些文本。</p><p class="two">更多的文本。</p></body></html>
此实例是相对于浏览器边框进行的定位。
2、补充相关知识
bsolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。 参考技术C 我建议你还是截图一下。
大概意思我给你说下这个用法。
首先你需要获取你要点击的图的位置。比如他是 class="img1",并且第二个class=“img2”是display：none
js或jq当中获取他
var Img1=document.getElementByClassName("img1");
var Img2=document.getElementByClassName("img2");
Img1.onclick=function()
Img2.style.display="block"
$(".img1").click(function()
$(".img2").show();
);
以上是关于网页怎么做文字显示位置的控制的主要内容，如果未能解决你的问题，请参考以下文章