作者:admin 日期:2012/02/21 14:12 人气:
不晓得代码如何放置的请看这篇:
代码放置及博客部分操作图示详解
更多代码请点这里:
漂亮心境博客代码目录汇总
两款倒计时器
第一款可恶版代码:
<EMBED src=" &imgfile=" width=230 height=210 ?></EMBED>
第二款科技版代码:
<EMBED src=" &imgfile=" width=230 height=210 type=application/x-shockwave-flash ?></P>
绿色部门: 调换成你要设置事件的时光
红色部分: 替代成你要设置的事件
在图片背景上写日志(十分不错的好代码!简单适用)
在写日志时勾选右下脚"显示源代码", 参加下面代码:
<DIV style="BACKGROUND: url(图片地址); WIDTH: ?px; HEIGHT: ?px"></div>
蓝色局部改为你要抉择的图片链接地址,宽跟高都可依据图片大小自行调剂
再返回一般视图,(撤消"显示源代码"的取舍)你就会在日志编纂框内看到背景图片,而且光标也在图片之上(可能光标的首行不在图片的顶端,不外不关联,只管从光标的首行可是你的写作就行了,文字会主动顶到图片的顶端) 典范请参考此篇,点击进入:
彩色边框代码
<div STYLE="border-style:solid;border-width:5pt; border-color:red">日志文字</div>
它会在你的文字外围天生一个红色边框,效果如框内显示.
border-style则节制边框的效果
border-width把持边框的粗细,
border-color调整边框的颜色,
这里你依然可以使用如#xxxxxx的颜色数值,而当使用"solid"则为单一颜色的线形简单边框.
<DIV style="BORDER-RIGHT: #ff4500 4px solid; BORDER-TOP: #ff4500 4px solid; BORDER-LEFT: #ff4500 4px solid; BORDER-BOTTOM: #ff4500 4px solid; BACKGROUND-COLOR: #ffdead">实线</DIV>
双线框代码
<div STYLE="border-style:Double;border-width:8pt; border-color: #8B008B"> <div style="width:100%;height:100%;background-color:#E6E6FA;">文字</div></div>
效果如框内,我祝你幸福.,是带背景色(熏衣草色)的简单双线框.
<div STYLE="border-style:Double;border-width:6pt; border-color: #ff4500"> <div style="width:100%;height:100%;background-color:#ffdab9;">文字</div></div>
显示的效果是背景色为桃色的简单双线框.效果如框内所示,边框的颜色是橙红色#ff4500,框内背景色为桃色#ffdab9.
<div STYLE="border-style:Double;border-width:6pt; border-color: #ff4500"> <div style="width:100%;height:100%;background-color:#FFdead;">文字</div></div>
显示的效果是背景色为NAVAJO白的简略双线框.效果如框内所示,边框的色彩是橙红色#ff4500,框内背风景为桃色#ffdead.
<div STYLE="border-style:Double;border-width:6pt; border-color: #ff4500"> <div style="width:100%;height:100%;background-color:#FFFFE0;">文字</div></div>
背景颜色为淡黄色#FFFFE0,www.88mu.net,效果如框内所示.
<div STYLE="border-style:Double;border-width:6pt; border-color: #f08080"> <div style="width:100%;height:100%;background-color:#FFdead;">文字</div></div>
这种双线框的效果有若隐若现的感觉,框的颜色是淡珊瑚色#f08080,框内背景的颜色是NAVAJO白#FFdead.效果如框内所示.
<div STYLE="border-style:Double;border-width:6pt; border-color: #f08080"> <div style="width:100%;height:100%;background-color:#FFFFE0;">文字</div></div>
这种双线框的效果有若有若无的感到,框的颜色是淡珊瑚色#f08080,框内背景的颜色是淡黄色#FFFFE0.效果如框内所示.
破体线框代码
<div style= "border-top-style:Ridge;border-right-style:Ridge;border-left-style:Ridge; border-bottom-style:Ridge;border-width:7pt; background-color:#8B008B"><div style="width:100%;height:100%;background-color:#E6E6FA;">文字</div></div>
效果如框内所示,是带背景色(熏衣草色)的浮出立体线框,代码中的#E6E6FA是背景的颜色(熏衣草色)
<DIV style="BORDER-RIGHT: 5pt ridge; BORDER-TOP: 5pt ridge; BORDER-LEFT: 5pt ridge; BORDER-BOTTOM: 5pt ridge; BACKGROUND-COLOR: #a0522d"> <DIV style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffc0cb">文字</DIV></DIV>
背景为粉红色,效果如框内所示.
<DIV style="BORDER-RIGHT: 5pt ridge; BORDER-TOP: 5pt ridge; BORDER-LEFT: 5pt ridge; BORDER-BOTTOM: 5pt ridge; BACKGROUND-COLOR: #a0522d"> <DIV style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffdab9">文字</DIV></DIV>
背景为桃色,效果如框内所示.
立体效果的彩色边框是在border-style后面使用不同的语法描写:
Solid 简单线形边框 Double 简单双线边框 Groove 沟线立体效果边框 Ridge 脊线立体效果边框 Inset 嵌入线立体效果边框 Outset 浮出线立体效果边框.
通过定制边框的方式再将上一教程增加颜色的语法嵌套其中,你就可以发明出存在立体效果的彩色日志背景.如:
<div STYLE="border-style:outset;border-width:2pt; border-color: red"> <div style="width:100%;height:100%;background-color:#ffdead;">日志文字 </div></div>
使用上述语法将会为你浮现一个NAVAJO白底色红边框的浮出线效果背景,效果如框内显示.
<div STYLE="border-style:outset;border-width:3pt; border-color: red"> <div style="width:100%;height:100%;background-color:#ffdab9;">日志文字 </div></div>
显示的效果是背景色为桃色的立体线框.效果如框内所示,框内背景色为桃色#ffdab9.
对背景边框的四个边你也可以按自己的须要进行调整,以左边框为例,你可以使用下述语法:
Border-left-style:solid (double, groove, ridge, inset, outset)定制边框样式 Border-left-color: #xxxxxx定制边框颜色 Border-left-width: xpt 定制边框粗细
其余三个边框只有分辨应用Right,热血江湖私服, Top, Bottom就可以了.将下面的语法放到你的日志中预览一下,看一看是什么效果:(效果这里就不给出来了,有兴致的能够回去试一下.)
<div style= "border-top-style:outset;border-right-style:outset;border-left-style:outset; border-bottom-style:outset;background-color:#cc3366">
你可以依照自己的主意随便调整四个边框的式样,以便创造不同凡响的效果,记住一点,不同的属性描述之间用 ; 隔开.另外,你可能会留神到,当你设置完边框返回到日志文本编辑模式,在键入文字进程中假如使用回车键,就会又呈现一个边框,从而影响文字的连贯性,这是由于HTML语法中不支撑硬回车.要解决这个问题,必需返回到HTML编辑模式,在需要回车的处所键入<br>,需要几回回车就键入几个<br>,而后再返回到文本编辑模式,你就会发明边框背景内已经为你加入了回车后的效果.
滚动文本框代码
把代码拷贝后可直接双击文本框就可以在里面输入文字和粘贴图片,而且文本框的大小可以随意调整.
<DIV align=center style=' color: #990099; background-color:#FFFFE0; border: solid 2px black; width: 470px; height: 180px; overflow: scroll; scrollbar-face-color: #ffc0cb; scrollbar-shadow-color: #ffb6c1; scrollbar-highlight-color: #98fb98; scrollbar-3dlight-color: #ffb6c1; scrollbar-darkshadow-color: #90ee90; scrollbar-track-color: #ffdead; scrollbar-arrow-color: #f5deb3; '>日志文字</DIV>
代码实现的文本框是浅黄色的背景,粗略效果如文本框内所示.
(解释:附语法语句的说明:
//层开端标志,对中对齐 : <DIV align=center //款式如下: : style=' //远景色为#ffffff : color: #ffffff; //背景色为#000000 : background-color: #000000; //边框为2像素,玄色 : border: solid 2px black; //宽度120像素 : width: 120px; //高度200像素 : height: 200px; //超越范畴时使用滚动条 : overflow: scroll; //转动条的各个颜色如下 : scrollbar-face-color: #889B9F; : scrollbar-shadow-color: #3D5054; : scrollbar-highlight-color: #C3D6DA; : scrollbar-3dlight-color: #3D5054; : scrollbar-darkshadow-color: #85989C; : scrollbar-track-color: #95A6AA; : scrollbar-arrow-color: #FFD6DA; //在这个层中显示文字"日志文字",层停止标记 : '>日志文字</DIV>
文字竖排代码
接下来说说文字竖排是如何实现的.除了制作特特效果,我在Space空间展现的文字竖排没有什么真正的实用性,只会给浏览者造成麻烦,不过本着尽可能发掘Space潜力的准则,我还是尝试了如下的语法:
<DIV style="FONT-SIZE: 9pt; WRITING-MODE: tb-rl; TEXT-ALIGN: left"><p>日志文字</P></DIV>
这个语法中独一的亮点就是Writing-Mode这个参数,其后的tb代表文字排列从上到下,rl代表从右到左.后果如下所示:
基础上文字竖排是没有任何作用的,但为了实际一下,仍是把效果贴出来给各位参考吧!~:)
顶部flash代码
代码:(放在个人档)
<div style="RIGHT: ?px; POSITION: absolute; TOP: ?px">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><embed style="WIDTH: ?px; HEIGHT: ?px" src="FLASH地址" width="603" height="288" type="application/x-shockwave-flash"></embed></td></tr></tbody></table></div>
阐明:
1.代码中的RIGHT: 0px和TOP:-133px用来掌握FLASH的位置.大家通过修改这两个数字来调整FLASH的位置.
2.代码中的WIDTH: 1024px; HEIGHT: 300px表现FLASH的宽度和高度大家本人可以恰当的修正数值来调整.(这个要配合上面的地位一起调整.)
3.你找的FLASH最好是横幅型的,必定要是.SWF格局的,我有空了找多少个贴出来.
上一篇:看不到大屏幕上的图象
下一篇:我们中午到岳阳的时候咱们去吃中午饭