使用DIV+CSS实现美观的弹出窗口

5星 · 超过95%的资源 | 下载需积分: 50 | TXT格式 | 7KB | 更新于2024-11-07 | 134 浏览量 | 举报

5 收藏

"这是一个关于使用DIV和CSS创建弹出窗口的示例代码，旨在实现类似QQ空间登录窗口的效果。" 在Web开发中，`DIV+CSS`是一种常见的布局和设计技术，它利用HTML的`<div>`元素作为内容容器，并通过CSS（层叠样式表）来控制元素的样式、位置和布局。在这个示例中，我们将探讨如何利用这些技术创建一个弹出式窗口。首先，我们看到代码以`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`开头，这是声明文档类型为XHTML 1.0 Transitional，允许使用一些过渡性元素和属性，以兼容旧版浏览器。接着，`<html>`和`<head>`部分设置了文档的基础信息，如字符编码`<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>`，以及页面标题`<title>ƶĵ</title>`。在`<head>`内，还包含了一个`<style type="text/css">`块，这是定义CSS样式的地方。 CSS部分开始，`*{padding:0; margin:0;}`是一个通用选择器，重置所有元素的默认内外边距为0，以确保样式的一致性。然后定义了ID为`upcontent`的列表样式，以及其子元素`li`的样式。`#bodyL`和`#tittleup`分别设置了左侧内容区域和标题的样式。`a.od`定义了一个链接样式，设置字体大小、颜色和悬停状态下的变化。弹出窗口的核心在于使用`position:absolute;`和`z-index`来定位和堆叠元素。在这个例子中，`#fd`被赋予了绝对定位，`left:0px; top:0px;`使其初始位置位于屏幕左上角，`cursor:move;`使鼠标指针变为可移动的手形，这样用户就可以拖动弹出窗口。`float:left;`和`overflow:hidden;`用于控制窗口的浮动和内容溢出。 `#fd`的背景色、边框宽度、样式和颜色都是通过CSS设定的。此外，还定义了一个链接`a.close`，用于关闭弹出窗口，其样式和行为可以通过添加更多CSS和JavaScript来扩展。总结来说，这个示例展示了如何利用HTML的`<div>`元素和CSS的定位、浮动、边框、颜色等属性来创建一个具有基本功能的弹出窗口。实际应用中，可能还需要结合JavaScript或jQuery来实现更复杂的交互，如自动隐藏、动画效果和响应式设计。

<font color=red><!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/html; charset=gb2312" />
<title>可移动的弹出框</title>
<style type="text/css">
<!--
* {
padding:0;
margin:0;
}
#upcontent {
list-style-position: outside;
list-style-image: none;
list-style-type: none;
}
#upcontent li {
font-size:12px;
color:#333;
line-height:150%;
}
#bodyL {
float:left;
width:84px;
margin-right:2px;
}
#tittleup {
font-size:14px;
font-weight:bold;
color:#000066;