如何利用css做出弹出框的效果

html-css021

如何利用css做出弹出框的效果,第1张

CSS部分

div{

width: 400px

height: 400px

border:1px solid red

float: left

}

body:hover .box{

display: block

}

.box{

width: 200px

height: 200px

background: red

display: none

}

html部分

<div  >

<div class="box">

</div>

</div>

呵呵！很简单啊！

把里面的 width:100%去掉就可以了！

以后要注意了，总的宽度 = 实际宽度 + padding + border + margin

你给定义了100%的宽度，而且加了padding，自然就撑出去了。

你复制运行试试：

<!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>

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

<title>无标题文档</title>

<style type="text/css">

<!--

body,td,th {

font-size: 12px

color: #333333

margin:0

padding:0

}

#menu{

padding:0px

background:#dfdfdf

COLOR: #666

border:#fff solid 2px

width:900px

margin-top: 15

margin-right: 20

margin-bottom: 0

}

#menu ul{ margin:0

padding:0

border:medium none

line-height:normal

list-style-type:none}

#menu li{ border-top:#fff 1px solidmargin:0px}

#menu li a { PADDING:5px 20px 5px 30pxDISPLAY: blockFONT-WEIGHT: boldBACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8pxCOLOR: #444TEXT-DECORATION: none}

#menu li a:hover {PADDING:5px 20px 5px 30pxBACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8pxCOLOR: #fff}

-->

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a title="网站标准" href="http://www.w3cn.org/webstandards.html">什么是网站标准</a></li>

<li><a title="标准的好处" href="http://www.w3cn.org/benefits.html">使用标准的好处</a></li>

<li><a title="怎样过渡" href="http://www.w3cn.org/howto.html">怎样过渡</a></li>

<li><a title="相关教程" href="http://www.w3cn.org/tutorial.html">相关教程</a></li>

<li><a title="工具" href="http://www.w3cn.org/tools.html">工具</a></li>

<li><a title="资源及链接" href="http://www.w3cn.org/resources.html">资源及链接</a></li>

</ul>

</div>

</body>

</html>

简单写了一个 大概就是用了个相对定位 通过设置top和left的值来确定弹出框位于图片上边和左边的距离！具体的值你要以调下top和left

.bottomdiv{position:relativebackground:#FCCwidth:200pxheight:200px}

.pop{position:absolutewidth:150pxheight:100pxtop:50pxleft:100pxborder:1px solid #000background:#CCC}

</style>

<div class="bottomdiv">

<div class="pop">弹出层内容</div>

<img src="http://www.baidu.com/search/zhidao/jctuijian/1217ms.jpg" width="200" height="200" />

</div>