网页中这样的可关闭提示框如何实现？css

html-css021

网页中这样的可关闭提示框如何实现？css,第1张

一个很常见的网站提示栏，一般常用于首页，会给出一行提示文字，用方框框起来，再附上一个关闭按钮，配上JS脚本，这样就实现了一个可以关闭的提示框，实际上代码是超简单的，但是功能却是很实用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>可关闭的提示框</title>

<style>

#tips

{

position:relative

margin:0 auto

border:1px solid

#FA9150

padding:5px 10px 5px

10px

width:96%

background-color:#FEF1E9

line-height:160%

font-size:12px

}

#close

{

position:absolute

top:7px

right:8px

}

</style>

<script>

function

Close() {

document.getElementById("tips").style.display =

"none"

}

window.onload = function()

{

document.getElementById("tips").onclick =

Close

}

</script>

</head>

<body>

<p

id="tips">

这个要配合JS的，单用css做不到，如果你用DW做的话，里边有默认的JS特效可以实现这个效果，如果你用其他编辑器的话可以找个JS自己添加，不过可能需要你后期对JS进行修改，不过不复杂，

<script type="text/javascript">

function show(){

var show=document.getElementById("div")

show.style.display="none"

}

</scirpt>

这是一个简单实现隐藏效果的JS，需要在连接上设置经过或者点击实现效果，就是onmouseover或者onclick。

当然这个JS不够用，需要扩展，你就看着扩展吧，只要对CSS熟悉应该很简单吧。