怎样设置可移动的多条hr直线html_随笔

用input页面标签

并将下Border设为直线

style

input[type="text"]{border-bottom:solid 1px #ccc}

style

input type="text"/

或

输出一条横线用：hr如果想让它长点就改变它的样式：hr style="width:1000PX"变长和粗：hr style="width:1000PXheight:20px"其中width 是宽（长），height是高（粗细）。

需要准备的材料分别有：电脑、chrome浏览器、html编辑器。

1、首先打开html编辑器，新建一个html文件，例如：index.html。

2、其次，在index.html的body标签中，添加代码：hr/。

3、浏览器运行index.html页面，此时成功在html中画了一条线。

给图片加个class用相对定位做就可以了

例:

.imgPlace{ position:relativetop:5pxleft:5px/*right:5pxbottom:5px*/}

/*position:relative是相对定位的意思top是相对离上面的距离，left是相对离左面的距离，right是相对离右面的距离，bottom是相对离下面的距离，*/

</style>

把代码保存为html格式，上传到网页空间看看是不是你想要的！

<html>

<head>

<!--

a { color: #00488C}

a:hover { color: #FF0000}

td { font-size: 12px color: #00488C}

-->

</style>

<!--

// ------ 定义全局变量

var theNewsNum

var theAddNum

var totalNum

var CurrentPosion=0

var theCurrentNews

var theCurrentLength

var theNewsText

var theTargetLink

var theCharacterTimeout

var theNewsTimeout

var theBrowserVersion

var theWidgetOne

var theWidgetTwo

var theSpaceFiller

var theLeadString

var theNewsState

function startTicker()

{

// ------ 设置初始数值

theCharacterTimeout = 50//字符间隔时间

theNewsTimeout = 2000//新闻间隔时间

theWidgetOne= "_"//新闻前面下标符1

theWidgetTwo= "-"//新闻前面下标符

theNewsState = 1

//theNewsNum= document.body.children.incoming.children.NewsNum.innerText//新闻总条数

//add by lin

theNewsNum= document.body.children.incoming.children.AllNews.children.length//新闻总条数

theAddNum= document.body.children.incoming.children.AddNews.children.length//补充条数

totalNum =theNewsNum+theAddNum

theCurrentNews = 0

theCurrentLength= 0

theLeadString = " "

theSpaceFiller = " "

runTheTicker()

}

// --- 基础函数

function runTheTicker()

{

if(theNewsState == 1)

{

if(CurrentPosion<theNewsNum){

setupNextNews()

}

else{

setupAddNews()

}

CurrentPosion++

if(CurrentPosion>=totalNum||CurrentPosion>=5) CurrentPosion=0 //最多条数不超过5条

}

if(theCurrentLength != theNewsText.length)

{

drawNews()

}

else

{

closeOutNews()

}

// --- 跳转下一条新闻

function setupNextNews()

{

theNewsState = 0

theCurrentNews = theCurrentNews % theNewsNum

theNewsText = document.body.children.incoming.children.AllNews.children[theCurrentNews].children.Summary.innerText

theTargetLink = document.body.children.incoming.children.AllNews.children[theCurrentNews].children.NewsLink.innerText

theCurrentLength = 0

document.all.hottext.href = theTargetLink

theCurrentNews++

}

function setupAddNews()

{

theNewsState = 0

theCurrentNews = theCurrentNews % theAddNum

theNewsText = document.body.children.incoming.children.AddNews.children[theCurrentNews].children.Summary.innerText

theTargetLink = document.body.children.incoming.children.AddNews.children[theCurrentNews].children.NewsLink.innerText

theCurrentLength = 0

document.all.hottext.href = theTargetLink

theCurrentNews++

}

// --- 滚动新闻

function drawNews()

{

var myWidget

if((theCurrentLength % 2) == 1)

{

myWidget = theWidgetOne

}

else

{

myWidget = theWidgetTwo

}

document.all.hottext.innerHTML = theLeadString + theNewsText.substring(0,theCurrentLength) + myWidget + theSpaceFiller

theCurrentLength++

setTimeout("runTheTicker()", theCharacterTimeout)

}

// --- 结束新闻循环

function closeOutNews()

{

document.all.hottext.innerHTML = theLeadString + theNewsText + theSpaceFiller

theNewsState = 1

setTimeout("runTheTicker()", theNewsTimeout)

}

window.onload=startTicker

//-->

</script>

</head>

<body>

var vjAcc="860010-0120120000"

vjTrack()

</script>

</noscript>

<table>

<div id=visible>你的文字说明：<a href="" id=hottext target="_blank"></a></div>

</td></tr>

</table>

<div id=Summary>1.你想要的是不是这个样子的？（这是第一次） </div>

</div>

<div id=Summary>2.是不是这个样子的？（第二次提示了）</div>

</div>

<div id=Summary>3.如果是的话记得给分哦</div>

</div>

<div id=Summary>4.有空到我的站上看看啊，下一条就是我站的地址了 </div>

</div>

<div id=Summary>5.我站的地址是：http://aiyiya.cn </div>

</div>

</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6167945.html

怎样设置可移动的多条hr直线html

发表评论

评论列表（0条）