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

html-css07

网页中这样的可关闭提示框如何实现?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">

<style type="text/css">

.box {

position: relative

display: inline-block

}

.box .clear {

position: absolute

top: 0

right: 0

width: 16px

height: 16px

border: 1px solid #999

}

</style>

<div class="box">

<img src="images/testing.jpg" width="300" height="300" alt="" />

<div class="clear" onclick="this.parentNode.style.display='none'">X</div>

</div>

首先,得有个DIV,然后把轮播代码丢到DIV里,然后写个id为a的A标签,标签根据DIV定位到右上角,如果这时候你看到a标签不在广告上面,那你就给a标签设置z-index属性,还不行就给DIV也设上。我不大熟悉这玩意,不过大概是这样的。