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

怎样设置可移动的多条hr直线html,第1张

用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用相对定位做就可以了

例:

<style type="text/css">

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

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

</style>

<img src="...." alt=" " title=" " class="imgPlace" />

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset= gb2312">

<style type="text/css">

<!--

a { color: #00488C}

a:hover { color: #FF0000}

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

-->

</style>

<script language=JAVAscript>

<!--

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

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>

<script type="text/javascript">

var vjAcc="860010-0120120000"

vjTrack()

</script>

<noscript>

<img src="http://cctv.doulog.com/a.gif?vjAcc=860010-0120120000" width="1" height="1" />

</noscript>

<table>

<tr><td>

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

</td></tr>

</table>

<div id=incoming style="DISPLAY: none">

<div id=AllNews>

<div id=1>

<div id=Summary>1.你想要的是不是这个样子的?(这是第一次) </div>

<div id=NewsLink></div>

</div>

<div id=2>

<div id=Summary>2.是不是这个样子的?(第二次提示了)</div>

<div id=NewsLink></div>

</div>

<div id=3>

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

<div id=NewsLink></div>

</div>

<div id=4>

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

<div id=NewsLink></div>

</div>

<div id=5>

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

<div id=NewsLink></div>

</div>

</div>

<div id=AddNews>

</div>

</div>

</body>

</html>

<!--remain-->


欢迎分享,转载请注明来源:内存溢出

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-17
下一篇 2023-03-17

发表评论

登录后才能评论

评论列表(0条)

保存