请教这种情书类的网页如何做、

2023-02-21 10:53:02html-css07

请教这种情书类的网页如何做、,第1张

下载个特效大师就有的

要不我吧这个页的源程序给你吧，你自己研究研究

注意要保存为html文件

<HTML>

<HEAD>

function click(){

if(event.button==2){

alert('送给一个我心爱的女孩！')

}

document.onmousedown=click

</SCRIPT>

var MESSAGE="如果爱上你也算是一种错，我深信这会是生命中最美丽的错，我情愿错一辈子......"

var POSITION=100

var DELAY=5

var scroll=new statusMessageObject()

function statusMessageObject(p,d){

this.msg =MESSAGE

this.out =" "

this.pos =POSITION

this.delay=DELAY

this.i=0

this.reset=clearMessage}

function clearMessage(){

this.pos=POSITION}

function scroller(){

for (scroll.i=0scroll.i<scroll.posscroll.i++){

scroll.out += " "}

if (scroll.pos >= 0)

scroll.out += scroll.msg

else scroll.out=scroll.msg.substring(-scroll.pos,scroll.msg.length)

window.status=scroll.out

scroll.out=" "

scroll.pos--

if (scroll.pos <-(scroll.msg.length)) {

scroll.reset()}

setTimeout('scroller()',scroll.delay)}

function snapIn(jumpSpaces,position){

var msg = scroll.msg

var out = ""

for(var i=0i<positioni++)

{out+= msg.charAt(i)}

for(i=1i<jumpSpacesi++)

{out += " "}

out+=msg.charAt(position)

window.status = out

if(jumpSpaces <= 1) {

position++

if(msg.charAt(position) == ' ')

{position++ }

jumpSpaces = 100-position

}else if (jumpSpaces > 3)

{jumpSpaces *= .75}

else

{jumpSpaces--}

if(position != msg.length) {

var cmd = "snapIn(" + jumpSpaces + "," + position + ")"

scrollID = window.setTimeout(cmd,scroll.delay)

}else{window.status=""

jumpSpaces=0

position=0

cmd = "snapIn(" + jumpSpaces + "," + position + ")"

scrollID = window.setTimeout(cmd,scroll.delay)

return false }

return true}

snapIn(100,0)

</script>

.spanstyle {

position:absolute

visibility:visible

top:-50px

font-size:9pt

color: #09F738

font-weight:bold

}</style>

var x,y

var step=20

var flag=0

var message="因为知道不能没有你,所以我会更珍惜.... ."

message=message.split("")

var xpos=new Array()

for (i=0i<=message.length-1i++) {

xpos[i]=-50}

var ypos=new Array()

for (i=0i<=message.length-1i++) {

ypos[i]=-50}

function handlerMM(e){

x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX

y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY

flag=1}

function makesnake() {

if (flag==1 &&document.all) {

for (i=message.length-1i>=1i--) {

xpos[i]=xpos[i-1]+step

ypos[i]=ypos[i-1] }

xpos[0]=x+step

ypos[0]=y

for (i=0i<message.length-1i++) {

var thisspan = eval("span"+(i)+".style")

thisspan.posLeft=xpos[i]

thisspan.posTop=ypos[i] } }

else if (flag==1 &&document.layers) {

for (i=message.length-1i>=1i--) {

xpos[i]=xpos[i-1]+step

ypos[i]=ypos[i-1] }

xpos[0]=x+step

ypos[0]=y

for (i=0i<message.length-1i++) {

var thisspan = eval("document.span"+i)

thisspan.left=xpos[i]

thisspan.top=ypos[i]} }

var timer=setTimeout("makesnake()",30)}

</script>

<title>原来等待也可以如此的美丽,因为爱你。--- http://www.qfans.net</title>

</HEAD>

for (i=0i<=message.length-1i++) {

document.write("<span id='span"+i+"'class='spanstyle'>")

document.write(message[i])

document.write("</span>")}

if (document.layers){

document.captureEvents(Event.MOUSEMOVE)}

document.onmousemove = handlerMM

</script>

<SCRIPT language=JavaScript><!--

// Hide the JavaScript from older browsers

(window.alert("你来了！"))

// End hiding of script

// --></SCRIPT>

<SCRIPT language=JavaScript><!--

// Hide the JavaScript from older browsers

(window.alert("我就知道你一定会来的， "))

// End hiding of script

// --></SCRIPT>

<SCRIPT language=JavaScript><!--

// Hide the JavaScript from older browsers

(window.alert("知道我要告诉你什么吗？"))

// End hiding of script

// --></SCRIPT>

<SCRIPT language=JavaScript><!--

// Hide the JavaScript from older browsers

(window.alert(" 猜出来了吗？"))

// End hiding of script

// --></SCRIPT>

<SCRIPT language=JavaScript><!--

// Hide the JavaScript from older browsers

(window.alert("我不会写情书，只会写“心”....."))

// End hiding of script

// --></SCRIPT>

<SCRIPT language=JavaScript><!--

// Hide the JavaScript from older browsers

(window.alert("认识你才知道有一种心情叫做依恋，有一种感觉叫做爱。"))

// End hiding of script

// --></SCRIPT>

<SCRIPT language=JavaScript><!--

// Hide the JavaScript from older browsers

(window.alert("不知道爱你算不算是一个贴心的理由？ "))

// End hiding of script

// --></SCRIPT>

<SCRIPT language=JavaScript><!--

// Hide the JavaScript from older browsers

(window.alert("自从你出现后，我才知道原来有人爱是那么地美好... "))

// End hiding of script

// --></SCRIPT>

<SCRIPT language=JavaScript><!--

// Hide the JavaScript from older browsers

(window.alert("我知道，爱要自由才能快乐！我却宁愿留在你身边，陪你、陪你走过..."))

// End hiding of script

// --></SCRIPT>

<SCRIPT language=JavaScript><!--

// Hide the JavaScript from older browsers

(window.alert("不管今世也好来世也好...我所要的只有你...... "))

// End hiding of script

// --></SCRIPT>

<!-- Hide the JavaScript from older browsers

(window.alert("只有你知我的情绪，也只有你能带给我情绪！ "))

// End hiding of script -->

</SCRIPT>

<!-- Hide the JavaScript from older browsers

(window.alert("今生....如果..不能拥有你，我会............好恨自己 "))

// End hiding of script -->

</SCRIPT>

<!-- Hide the JavaScript from older browsers

(window.alert("不要问我爱你有多深，我真的说不出来，只知道你已成为...... "))

// End hiding of script -->

</SCRIPT>

<SCRIPT language=JavaScript><!--

// Hide the JavaScript from older browsers

(window.alert("如果爱上你也算是一种错，我深信这会是生命中最美丽的错，我情愿错一辈子......... "))

// End hiding of script

// --></SCRIPT>

<SCRIPT language=JavaScript><!--

// Hide the JavaScript from older browsers

(window.alert("假如可以的话，我愿意花去生命中的每一分每一秒~陪著你~ "))

// End hiding of script

// --></SCRIPT>

<!-- Hide the JavaScript from older browsers

(window.alert("我说的都是真的，"))

// End hiding of script -->

</SCRIPT>

<SCRIPT language=JavaScript><!--

// Hide the JavaScript from older browsers

(window.alert("你相信我吗？"))

// End hiding of script

// --></SCRIPT>

<SCRIPT language=JavaScript><!--

// Hide the JavaScript from older browsers

(window.alert("接受我的爱吧！！！"))

// End hiding of script

// --></SCRIPT>

<TBODY>

<TR>

<p></p>

</CENTER>

align=center><b><font size="4" color="#FF00FF">让我痴迷的你：<BR> 最近过的如何？</font></b><FONT size=2 color="#FF00FF"></FONT></P>

align=center><img border="0" src="pic2.gif" width="50" height="40"><FONT size=2><font color="#FFFF00"><BR>你仿佛有一种魔力,<BR>使我每次见到你都会感到自己的心在狂跳不止,<BR>我知道你根本没有意识到我的存在,<BR>但你的容颜,<BR>已在我逐渐变冷的心中点燃了熊熊烈火,<BR>好几次我想鼓起勇气向你表明心中的感受,<BR>但是只被你那一双明亮的眼睛压了回去,<BR>我是如此的害怕看你的双眼,<BR>只好把话留在心里.<BR>我努力的强迫自己不去想你,<BR>不要打扰你平静的生活,<BR>尽管如此,当我闭上双眼,<BR>你的身影又浮现在我的眼前.<BR>我挥手让他散去,<BR>他却纹丝不动,<BR>我终于明白,<BR>你对于我来说不只是一阵过眼云烟,<BR>而是深深的印在了我的每一个角落.<BR>在我的心中,有一间为你敞开门的小屋,<BR>它的名字叫"爱"

<BR>我始终把他藏在那最温暖的角落,<BR>等待着你能住在里面,我期望有一天,<BR>你也能把你的心扉向我敞开,<BR>不要让我的梦想象一个美丽的泡泡一样破灭,<BR>美丽的东西都是应该被珍藏的,对吗?<BR>让我的梦想变成现实吧!<BR>不要让他再折磨我,<BR>我会付出我的一切,关心你,爱护你,<BR>让你这朵美丽的花朵永远不会凋谢,<BR>哪怕是有狂风暴雨,<BR>我的温暖都会在你身边!

<BR><BR><BR>祝你永远漂亮！<BR></font><BR> <font color="#FFFF00">

</font></FONT><font color="#00FF00" size="4">爱你的我</b></font></P>

align=center>

align=center><b><strong><font size="3" color="#008000"><i>

<marquee align="middle" scrollamount="3">你知道吗？其实最远的距离并不是天涯海角，而是我在你身边你却不懂我的心！</marquee>

</i></font></strong></b><FONT size=2>

<SCRIPT language=JavaScript1.2><!-- Begin

var no = 15// snow number

var speed = 10// smaller number moves the snow faster

var snowflake = "xin.gif"

var ns4up = (document.layers) ? 1 : 0// browser sniffer

var ie4up = (document.all) ? 1 : 0

var dx, xp, yp// coordinate and position variables

var am, stx, sty// amplitude and step variables

var i, doc_width = 800, doc_height = 600

if (ns4up) {

doc_width = self.innerWidth

doc_height = self.innerHeight

} else if (ie4up) {

doc_width = document.body.clientWidth

doc_height = document.body.clientHeight

}

dx = new Array()

xp = new Array()

yp = new Array()

am = new Array()

stx = new Array()

sty = new Array()

for (i = 0i <no++ i) {

dx[i] = 0// set coordinate variables

xp[i] = Math.random()*(doc_width-50)// set position variables

yp[i] = Math.random()*doc_height

am[i] = Math.random()*20// set amplitude variables

stx[i] = 0.02 + Math.random()/10// set step variables

sty[i] = 0.7 + Math.random()// set step variables

if (ns4up) { // set layers

if (i == 0) {

document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\"" + snowflake + "\" border=\"0\"></layer>")

} else {

document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\"" + snowflake + "\" border=\"0\"></layer>")

}

} else if (ie4up) {

if (i == 0) {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absoluteZ-INDEX: "+ i +"VISIBILITY: visibleTOP: 15pxLEFT: 15px\"><img src=\"" + snowflake + "\" border=\"0\"></div>")

} else {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absoluteZ-INDEX: "+ i +"VISIBILITY: visibleTOP: 15pxLEFT: 15px\"><img src=\"" + snowflake + "\" border=\"0\"></div>")

}

function snowNS() { // Netscape main animation function

for (i = 0i <no++ i) { // iterate for every dot

yp[i] += sty[i]

if (yp[i] >doc_height-50) {

xp[i] = Math.random()*(doc_width-am[i]-30)

yp[i] = 0

stx[i] = 0.02 + Math.random()/10

sty[i] = 0.7 + Math.random()

doc_width = self.innerWidth

doc_height = self.innerHeight

}

dx[i] += stx[i]

document.layers["dot"+i].top = yp[i]

document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i])

}

setTimeout("snowNS()", speed)

}

function snowIE() { // IE main animation function

for (i = 0i <no++ i) { // iterate for every dot

yp[i] += sty[i]

if (yp[i] >doc_height-50) {

xp[i] = Math.random()*(doc_width-am[i]-30)

yp[i] = 0

stx[i] = 0.02 + Math.random()/10

sty[i] = 0.7 + Math.random()

doc_width = document.body.clientWidth

doc_height = document.body.clientHeight

}

dx[i] += stx[i]

document.all["dot"+i].style.pixelTop = yp[i]

document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i])

}

setTimeout("snowIE()", speed)

}

if (ns4up) {

snowNS()

} else if (ie4up) {

snowIE()

}

// End -->

</SCRIPT>

</CENTER>

</BODY>

</HTML>

自个改改吧

<html>

<head>

body {

font-family: "宋体"

font-size: 9pt

margin-top: 0px

margin-left: 0px

margin-right: 0px

}

A {

COLOR: black

FONT-SIZE: 9pt

FONT-WEIGHT: 400

TEXT-DECORATION: none

}

A:hover {

COLOR: red

FONT-SIZE: 9pt

FONT-WEIGHT: 400

TEXT-DECORATION: underline

}

</style>

</head>

<br>

<font color=red face="隶书" size=6>请耐心看完</font>

</center>

<br>

<table border=1 bordercolor=#000000 style="border-collapse: collapse"

cellpadding="0" cellspacing="0">

<tr>

var layers = document.layers, style = document.all, both = layers || style, idme = 908601

if (layers) {

layerRef = 'document.layers'

styleRef = ''

}

if (style) {

layerRef = 'document.all'

styleRef = '.style'

}

function writeOnText(obj, str) {

if (layers)

with (document[obj]) {

document.open()

document.write(str)

document.close()

}

if (style)

eval(obj + '.innerHTML=str')

}

var dispStr = new Array(" 我像条狗似的在人群里穿行，虽然阳光充沛却掩饰不了我的孤独，曾经下定决心绝食却没有，虽然我看起来像条狗，但我要是杀死自己，动物协会就会告我谋杀动物的。所以在无所事事的秋天我常去邻居家听那个家伙婆婆妈妈唧唧歪歪就好象一群苍蝇似的围绕在你身边让你无法忍受！现在——你终于明白我是在用这么一种残忍的方式折磨自己了吧！")

var overMe = 0

function txtTyper(str, idx, idObj, spObj, clr1, clr2, delay, plysnd) {

var tmp0 = tmp1 = '', skip = 100

if (both &&idx <= str.length) {

if (str.charAt(idx) == '<') {

while (str.charAt(idx) != '>')

idx++

}

if (str.charAt(idx) == '&' &&str.charAt(idx + 1) != ' ') {

while (str.charAt(idx) != '')

idx++

}

tmp0 = str.slice(0, idx)

tmp1 = str.charAt(idx++)

if (overMe == 0 &&plysnd == 1) {

if (navigator.plugins[0]) {

if (navigator.plugins["LiveAudio"][0].type == "audio/basic"

&&navigator.javaEnabled()) {

document.embeds[0].stop()

setTimeout("document.embeds[0].play(false)", 100)

}

} else if (document.all) {

ding.Stop()

setTimeout("ding.Run()", 100)

}

overMe = 1

} else

overMe = 0

writeOnText(idObj, "<span class=" + spObj + "><font color='" + clr1

+ "'>" + tmp0 + "</font><font color='" + clr2 + "'>" + tmp1

+ "</font></span>")

setTimeout("txtTyper('" + str + "', " + idx + ", '" + idObj + "', '"

+ spObj + "', '" + clr1 + "', '" + clr2 + "', " + delay + " ,"

+ plysnd + ")", delay)

}

function init() {

txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', 'red', '#99FF33', 300, 0)

}

</script>

</td>

</tr>

</table>

</center>

<br>

<!-- hide

function goHist(a)

{

history.go(a)

}

//-->

</script>

</center>

<br>

</body>

</html>

语法：writing-mode : lr-tb、tb-rl

参数：lr-tb：从左向右，从上往下　tb-rl：从上往下，从右向左

示例：div { writing-mode: tb-rl}

writing-mode:tb-rl，table标签不具有此属性，

</div>

效果如下：

请您用下面的按钮选择这段文字的layout-flow属性的值。看一看会发生什么，然后您就会明白这个属性的意义。希望您喜欢这本电子书。谢谢。

最后一点要说明的是“writing-mode”目前只有IE浏览器支持，Nestscape、ff浏览器不支持！

垂直布局是 Microsoft Internet Explorer 5.5 的一种主要的新功能。本文对垂直布局的基本概念进行了探讨，帮助您避免某些常见的错误。

注意：本文中的示例需要 Internet Explorer 5.5 或更高的版本.

什么是垂直布局？

当您浏览几乎所有的 Web 页时（如本页），段落中的文字走向都是从左向右的。文本自动换行时，新的一行位于前一行下方，从页面的左侧开始。这是非常自然的，你甚至不会注意到它。

但是对于世界上的很多地方，这却不是天经地义的。如果你曾经看到过日文或中文的书籍或杂志，那么你就知道其印刷的文字通常采取垂直布局。文字起始于每页的右上角，其走向是向下的，换行时，下一行回到页面顶部并位于前一行的左侧。例如报纸的大字标题就在每页右侧自上而下地安排；路牌、情书、以及大多数其它形式的书写文字也是按照这种方法安排的。Web 页是个例外，HTML 无法处理这种布局。但是，这并没有阻止 Web 作者进行从位图到非常窄的表单元格的各种尝试。然而到目前为止，仍然没有找到能够实现垂直布局的令人满意的方法。

支持MSN空间联盟－我是技术总监^_^

Writing-mode 的属性

在 Microsoft® Internet Explorer 5.5 中，通过名为 writing-mode（英文）的 CSS（英文）属性（是当前为 CSS 3（英文）推荐的）启用对垂直布局的支持。下面的示例对于英文和日文内容进行了水平布局和垂直布局的比较。请浏览示例，然后我们将对细节进行深入探讨。

writing-mode 属性有两个要探讨的值：

tb-rl

lr-tb

Tb-rl 表示自上而下、从右向左，说明了应用这种样式的元素的内容走向。Lr-tb 表示从左向右、自上而下，它是所有文字的默认走向，也是英文读者所熟悉的典型的水平走向。与其它任何 CSS 属性一样，可通过外部 CSS 文件，或通过对象模型（style.writingMode（英文）），在一列上指定这些值。

请注意，虽然是东亚语言引发了对垂直布局的支持这一思路，但是任何语言文字都可以采用垂直文字走向。在这种走向中，单独字符的方向取决于它们所属的语言或文稿。为了保持垂直排版的传统，东亚文字的字符均采取竖直方向显示，而其它所有字符，包括拉丁文字符，在采用垂直布局时则顺时针旋转 90° 显示。

可用的元素

在 MSDN 联机 Web 工作室文档（英文）中可找到 writing-mode 所应用的元素的列表，但却无法在列表中找到 BODY 元素（英文）。这说明 BODY 元素总采取水平布局，但它所包含的元素却可以采用垂直布局。有时很难预料这种布局规则的组合结果是什么样的，这在下面的示例中会加以说明。

<HTML>

<BODY>

This is a sentence in a DIV element with vertical layout.

</DIV>

</BODY>

<HTML>

当您在 Internet Explorer 5.5 中查看此标记时，一开始看不到文字，但却会看到水平滚动条。如果您将该页一直滚动到右端，则可以看到文字。为什么会这样呢？

BODY 元素总采用水平布局，而浏览器总是将可视区定位于起始于标记中最顶端元素的原点。在前面的示例中，原点位于页面的左上角，若要显示加载了文字的页面，必须使主体滚动到右端。其实现方法为：在全局 DIV 元素（英文）中，将主体上的方向属性设置为 RTL（从右向左），然后再将方向属性设置回 LTR（从左向右）。这样，就将原点放置在右上角了。

<HTML>

This is a vertical sentence.

</DIV>

</BODY>

</HTML>

与其它 CSS 属性交互

很多 CSS 属性可能拥有与方向或位置相关的值，如顶部、底部、左边和右边等。在垂直布局的环境中应如何转换这些值呢？通常，影响方向或位置的 CSS 属性是被绝对转换的。这是从实际而言的，表明这种样式的隐含的或明确的方向性并不随垂直布局而改变。例如，请考虑 border-left 属性（英文）。举例而言，在垂直布局中，border-left 表示在元素的左边界上绘制一个边框。因为这种放置是绝对的，所以在垂直布局中，border-left 并不会变为 border-top（英文）。

但是，有些 CSS 属性的转换是相对的。这是从逻辑角度而言的，表明若按照上面那样对它们进行绝对转换是没有意义的。line-height 属性（英文）就是一个示例。如果行是水平布局的，则该属性控制行的高度；如果行是垂直布局的，则该属性控制行的宽度。换句话讲，line-height 属性在与基线垂直的维度上控制行的大小。因此，对属性进行绝对转换是没有意义的。World Wide Web Consortium (W3C) 提供了按照逻辑转换的 CSS 属性列表（英文）。

容器关系和继承

writing-mode 属性决定了元素内容的布局方式，而不是元素自身的位置，记住这一点十分重要。当元素 writing-mode 的值为 tb-rl 时，整个元素的内容采用垂直布局（此时，忽略对继承的限制或设置水平布局的子元素的情况）。这说明文字和子元素的走向为自上而下、从右向左。

对 writing-mode 属性的继承并不是统一的。某些元素根本不继承它。其它元素将 writing-mode 属性传递给它们的子元素，但自己却不采用这些属性。这将在 writing-mode 参考页（英文）中加以介绍。将鼠标指针移到“Applies To”列表中的任何元素上，可以查看该元素上是否应用了继承限制。关于有限制的继承的示例，请参见对 BUTTON 元素（英文）的 Web Workshop 参考。

元素高度

在水平布局中，如果没有指定特殊的尺寸调整，则块元素通常与其父元素、负页边距、边框和边距有相同的宽度。元素的高度将根据其内容多少进行调整（文字换行次数越多，则元素高度越高）。对于其父元素拥有垂直布局的垂直元素而言，其工作方式是类似的。块元素与其父元素、负页边距、边框和边距有相同的高度。

将垂直元素与水平父元素的行为一同考虑时，元素高度将变得错综复杂（请记住，因为 BODY 元素总是水平的，所以这种情况是常见的）。水平父元素的高度是可变的，— 根据父元素的内容，这个高度有时很小，有时很大。根据父元素的高度来决定子元素的高度并不是一个好的解决方案，应当通过计算来决定最合适的高度。这种计算建立在变量数目的基础之上，包括字符大小（以第一个为基准）和文章中最长的单词。通常，垂直子元素的最小高度是 10 个字符高度。

当然，通过在标记中指定高度、宽度和位置，你可以降低绝大部分的复杂程度，并更好地控制布局。

平台限制

操作系统的限制导致在某些配置中不能正确地按竖直方向显示东亚字符。Microsoft Windows® 2000 中消除了这一限制，但对于 Microsoft Windows NT® 4.0 和 Windows 9x 系统，对东亚语言仍需要已经本地化的操作系统版本，以确保可以正确显示这些字符。

下面是一些关于垂直布局的js特效：

div{

font-weight: bold

font-family: "华文新魏"

color: #6666CC

font-size: 18px

writing-mode:tb-rl

}

</style>