注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

海浪

朋友们快乐

 
 
 

日志

 
 

【转载】文字与图片的几种排版用法  

2012-12-19 07:00:47|  分类: 素材... 2 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

引用

玫瑰夫人文字与图片的几种排版用法
    

1 把图片放在文字的左边:

文字与图片的几种排版用法 - 闲人SGM - 闲人SGM 的休闲乐园在图片右边写文字的源代码:


<P><IMG height=201 hspace=30 src="图片连接地址" width=154 align=left border=0><FONT face=Arial>你要输入的文字</FONT></P>

height=是图片高度,width=是图片宽度,hspace=是与文字之间的距离,可以自己调整数值,

 

 

 

===================

2 把图片放在文字的右边

 

文字与图片的几种排版用法 - 闲人SGM - 闲人SGM 的休闲乐园

在图片左边写字的源代码:

<P><IMG height=201 hspace=30 src="图片连接地址" width=154 align=right border=0><FONT face=Arial>你要输入的文字</FONT></P>


height=是图片高度,width=是图片宽度,hspace=是与文字之间的距离,可以自己调整数值

 

 

 

====================

3 图片上写字代码

<DIV></DIV><DIV align=center>
<TABLE height=300 width=400>
<TBODY><TR><TD style="BACKGROUND-POSITION: center center; BACKGROUND-REPEAT: no-repeat" vAlign=center align=middle background=图片地址><FONT color=#ff0000>文字<BR>文字</FONT><BR></TD></TR></TBODY></TABLE></DIV>
<DIV></DIV>

 

==========

实例:

 
文字与图片的几种排版用法 - 闲人SGM - 闲人SGM 的休闲乐园 看到现在页面的效果了吗?让图片和文字左右分开排列,有的时候真的是很需要这个效果。其实处理起来很简单,使用一小段代码就可以了。

代码: <img src="图片地址" align="left">

用法:在“显示源代码”状态下(打勾)粘贴上面的代码――用你的图片地址代替上面的文字――恢复到正常编辑状态――在图片另一侧编辑文字。

如果你想把图片放在文字的右侧,可以用这个代码: <img src="图片地址" align="right">

本文转自雾海心浪的博客

有的图片比较大,用起来不方便,所以我改了一下代码,可以更改图片的大小,代码是这样的:<img src="图片地址" width=250 height=200 align="left">

红色的数字可以根据自己的需要更改。

 

 ===============================

=======

 

一、在任意图片上写字的代码:

1、首先将要在上面写文章的图片上传,得到URL地址,然后将得到的URL地址带入到以下代码中

<TABLE width=650 cellSpacing=1 cellPadding=1 bgColor=#005F01 border=1>
<TBODY>
<TR>
<TD background=
http://photo9.hexun.com/p/2007/1209/153304/b_76540180D12913B0847223D5DF97003C.jpg >

蓝色:为图片地址  粉色:为图片宽度 绿色:为框的颜色代码(不需要框,将1改为0)

2、将鼠标放在图片上按“回车键”任意选择长度,直接复制图片在底图上。

3、再设定文本框在图片里,设定文本框宽度,在文本框里直接书写文章。

 

 

 

 

 

 二、在任意照片上写字的代码:

1、首先将要在上面写文章的图片上传,得到URL地址,然后将得到的URL地址带入到以下代码中

<TABLE width=500 cellSpacing=1  cellPadding=1 height=375 border=1>
<TBODY>
<TR>
<TD background=
http://photo9.hexun.com/p/2007/1209/153529/b_DB0B8BC6E9E36490D5FBAC033E2B733A.jpg >

蓝色:为图片地址  粉色:为图片宽度 绿色:为图片的高度(不需要框,将1改为0)

2、再设定文本框在图片里,设定文本框宽度,在文本框里直接书写文章。

3、文本框里的1一定要改成0。

 

三、照片上全屏移动文字的代码:

<TABLE borderColor=#cd5c5c height=600 width=650 align=center border=3>
    <TBODY>
        <TR>
            <TD background=
http://img.blog.163.com/photo/K2VFn9P0ZNV9zE2btUFOwg==/4585508845593911207.jpg
>
            <MARQUEE scrollAmount=3 direction=down behavior=alternate height=400>
            <MARQUEE scrollAmount=3 behavior=alternate width=500>
            <P align=center><FONT color=red size=6><B>
图片上的文字
</B></FONT></P>
            </MARQUEE></MARQUEE></TD>
        </TR>
    </TBODY>
</TABLE>

单击文字,调整文字飘动范围!

width为浮动文字框架的宽度;
height为浮动文字框架的高度;
color=red表示文字颜色为红色(请在网上查询颜色代码再修改。

 

图片上的文字

 照片上由下往上移动文字的代码:

<TABLE height=500 width=650  background=http://img.blog.163.com/photo/qapvhPzRe_3qleHtYO1RfQ==/477663035478206746.jpg border=0>

<TBODY>

<TR>

<TD align=middle>

<MARQUEE scrollAmount=2 direction=up height=200>

<CENTER><FONT style="FONT-SIZE: 32pt" face=华文新魏 color=red><B>加入文字

</B> </FONT></CENTER></MARQUEE></TD></TR></TOBDY></TBODY></TABLE>

<CENTER></CENTER>

 

蓝色:为照片地址;红色:照片高度;粉色:照片宽度;绿色:加入文字。

 

加入文字    

 照片旁边写文字的代码:

图片靠左边的代码,这样文字就可以写在图片的右边了!

<P><IMG  src="图片连接地址" height=100 width=100 align=left>文章内容<BR> <BR > clear=left></P>

代码说明:

height=100 width=100是图片的高和宽实际上不用调整数值,单击图片就可以拉动图片修改大小!

align=left 文字在右边图在左边        修改成align=right文字在左边图在右边

照片上由下往上移动文字走走停停的代码:

<DIV align=center>

<FIELDSET style="WIDTH: 336px; HEIGHT: 302px">
<DIV align=center>
<MARQUEE style="WIDTH: 280px; HEIGHT: 240px" scrollAmount=1 direction=up behavior=alternate width=210 height=240>
<EMBED style="FILTER: invert(); WIDTH: 70px; HEIGHT: 25px" src= http://www.fuhuang.com.cn/admin/uploadphotos/2005469448706.mp3 type=audio/mpeg volume="0" loop="true" autostart="teue " ShowStatusBar="1">

<MARQUEE style="WIDTH: 288px; HEIGHT: 154px" scrollAmount=1 direction=up width=288 height=154><FONT style="FONT-SIZE: 13pt; FILTER: Alpha(opacity=100,style=2)" face=
华文行楷 color=#abc111><FONT size=4>图片上的文字

</FONT></FONT></MARQUEE></MARQUEE></DIV>
</FIELDSET></DIV>

 

 

 

 =========

 

文章滚动条代码

滚动条样式主要涉及到如下CSS属性:
overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容
overflow: auto; 在需要时内容会自动添加滚动条
overflow: scroll; 总是显示滚动条
overflow-x: hidden; 禁止横向的滚动条
overflow-y: scroll; 总是显示纵向滚动条

width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等]
height: 120px; 设置区域的高度[像素/百分比等等]
 
scrollbar-base-color:#006699; 
设置基色 设置该选项后可以不设置下面的属性, 浏览器会依据基色自动调整
scrollbar-track-color:rgb(10,100,254); 底板轨迹颜色
scrollbar-3dlight-color: ; 上/左边沿亮边颜色
scrollbar-arrow-color: ; 两端箭头颜色
scrollbar-darkshadow-color: ; 下/右边沿颜色
scrollbar-face-color: ; 表面颜色
scrollbar-highlight-color: ; 上/左斜面亮边框颜色
scrollbar-shadow-color:; 下/右斜面暗边框颜色

颜色设置可参考下列工具:

我们可以改变上边的颜色代码部分,自定义出自己喜欢的样式。


要选择CSS的方式输出代码,得到的代码要经过更改,我们只要颜色的设置部分。

如生成:

<style>
BODY { SCROLLBAR-ARROW-COLOR:#FFFFFF;
SCROLLBAR-FACE-COLOR:#00FF00;
SCROLLBAR-DARKSHADOW-COLOR:#00FF00;
SCROLLBAR-HIGHLIGHT-COLOR:#00FF00;
SCROLLBAR-3DLIGHT-COLOR:#00FF00;
SCROLLBAR-SHADOW-COLOR:#00FF00;
SCROLLBAR-TRACK-COLOR:#CCCCCC;}
</style>

我们只要括号里的东西。

SCROLLBAR-ARROW-COLOR:#FFFFFF;
SCROLLBAR-FACE-COLOR:#00FF00;
SCROLLBAR-DARKSHADOW-COLOR:#00FF00;
SCROLLBAR-HIGHLIGHT-COLOR:#00FF00;
SCROLLBAR-3DLIGHT-COLOR:#00FF00;
SCROLLBAR-SHADOW-COLOR:#00FF00;
SCROLLBAR-TRACK-COLOR:#CCCCCC;

 

标准的滚动条代码:

<div style="overflow:auto; width:98%; height:100px; line-height:15px; border-width:1px; border-color:#ffccff; border-style:dotted; scrollbar-base-color:#ff66ff; scrollbar-face-color:none; scrollbar-arrow-color:none; scrollbar-track-color:#ffefff; scrollbar-3dlight-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-highlight-color:#f5d8f5; scrollbar-shadow-color:#e5c8e5"><br/>
<div>&nbsp;这里为文字输入区<br/>&nbsp;这里为文字输入区<br/>&nbsp;这里为文字输入区<br/>&nbsp;这里为文字输入区<br/>&nbsp;这里为文字输入区<br/><br/><br/>
</div>
</div>

 

=================

文字滚动的公告栏代码

一、代码:
<CENTER>
<TABLE width=190 border=0>
<TBODY>
<TR>
<TD background=背景图片地址(也可不放背景图片)>
<DIV align=center>
<DIV style="OVERFLOW: auto; WIDTH: 159px; HEIGHT: 145px">
<P align=center>
<MARQUEE scrollAmount=1 scrollDelay=60 direction=up height=60>
<FONT color=#ff0000 size=3>公告内容<br>各位博友:<br>由于时间的关系<br>不能一一回复<br>请原谅</FONT></MARQUEE></P></DIV></DIV>
</TD></TR></TBODY></TABLE></CENTER>
二、效果:

公告内容
各位博友:
由于时间的关系
不能一一回复
请原谅

=====================
 
文字与图片的几种排版用法 - 闲人SGM - 闲人SGM 的休闲乐园
 
==================
 

一、左图右文混排代码:

<TABLE style="BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 width=410 border=0><TBODY><TR><TD width=197><IMG height=150 src="图片地址" width=200 border=0></TD><TD vAlign=top width=200 rowSpan=3><P align=right><FONT color=#808080><BR>这里写文字<BR>......</FONT><FONT size=2>&nbsp;</FONT></P>

<P align=left>&nbsp;</P></TD></TR></TBODY></TABLE>

 

说明: 1.height=是图片高度,width=是图片宽度2.<br>是换行。<FONT size=2>代表字体的大小,数字越大,

二、看看效果吧:

文字与图片的几种排版用法 - 闲人SGM - 闲人SGM 的休闲乐园

 

 

 

 

 

 

 

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

 

 
 
  评论这张
 
阅读(33)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017