html技巧

最新推荐文章于 2022-05-24 23:27:21 发布

xiaoxiaohai123

最新推荐文章于 2022-05-24 23:27:21 发布

阅读量648

点赞数

分类专栏： html 文章标签： html javascript 文本编辑 button function div

html 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

滚动条：

在发布文章的时候切换到HTML模式，加入如下代码：

<div style='height:280px;overflow:auto;'>你的文字内容</div>

280是高度，可自己根据情况换成别的数字。

背景音乐：

在发布文章的时候切换到HTML模式，加入如下代码：

<img height=0 loop=infinite dynsrc="http://www.7totem.com/music/sky/yilianna/01.mp3"

width=0 border=0>

http://www.7totem.com/music/sky/yilianna/01.mp3是你的背景音乐的网址，可自己根据情况换成别的地址

背景:

例如：<div STYLE="border-style:outset;border-width:2pt; border-color: red">

<div style="width:100%;height:100%;background-color:#ffff00;">日志文字

</div></div>

使用上述语法将会为你呈现一个黄底色红边框的浮出线效果背景，其实上述语法还有其他形式的简化写

法，这里不再赘述，只采用上述较直接易理解形式。

对于背景边框的四个边你也可以按自己的需要进行调整，以左边框为例，你可以使用下述语法：

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>，然后再返回到文本编辑模式，你就会发现边框背景内已经为你加入了回车后的效果。

如何在点击超链接时显示确认窗口：
1.在<head></head>中加入下列代码。
<script>
function winconfirm()
{ question = confirm("确实要进入吗?")
if (question != "0")
{
window.open("test.htm", "NewWin", "status=yes, height=200, width=200")
}
}
</script>

2.在<body></body>中加入下列代码。
<a href="test.htm"
onClick="winconfirm(); return false;">点这里进入</a>

●把你的主页添加到收藏夹
代码：
<A HREF="javascript:window.external.addFavorite('http://paf.126.com','D-元素欢迎您!')">单击这里添加</A>

●改变背景的颜色

代码：
<A HREF="#" οnclick="document.bgColor='red';">红色</A>

●返回功能

代码：
<A HREF="javascript:history.back(1)">单击这里返回</A>

●用JavaScript刷新本页

代码：
<a href="javascript:location.reload()">刷新</a>

●查看源代码
代码：
<A HREF="javascript:window.location='view-source:'+window.location.href">查看源代码</A>

●弹出确认窗口
请单击这里

代码：
<A HREF="javascript:alert('看到了吗！')">请单击这里</A>

●弹出是否确认窗口

代码：
<INPUT TYPE="BUTTON" NAME="Button" VALUE="单击这里" οnclick="Button.value=confirm('你是男的吗？');" >

●在状态栏显示文字

代码：
<INPUT TYPE="BUTTON" VALUE="试一下" οnmοusemοve="window.status ='你好！欢迎光临本站！'">

●JavaScript事件

onkeydown 键盘按下时发生此事件
onkeypress 按键盘时发生此事件
onkeyup 按键盘放开时发生此事件
onmousedown 鼠标按下时发生此事件
onmouseup 鼠标放开时发生此事件
onmousemove 移动时发生此事件
onmouseover 移入时发生此事件
onmouseout 移出时发生此事件
onhelp 按“F1”时发生此事件
onblur 失去焦点时发生此事件
onchange 改变文字时发生此事件
onclick 单击时发生此事件
onfocus 得到焦点时发生此事件
onload 找开时发生此事件
onselect 选中时发生此事件
onsubmit 提交时发生此事件
onunload 关闭时发生此事件

例子：
请把鼠标移到这里

代码：
<A HREF="#" οnmοuseοver="alert('移到这里就发生了 onMouseOver 事件了！')">请把鼠标移到这里</A>

如果想在整个窗口按键盘每一个键时执行某个函数例子如下：
<script>
function keydown()
{alert("你按下了键盘"); }
document.οnkeydοwn=keydown;
</script>

关闭窗口
<a href="javascript:window.close()">关闭窗口</a>