今日闲来无事，自己用CSS+DIV做了个面板。图片在附件中。
效果如下：
因为时间原因，面板上几个工具对应的响应函数还没写上。
<html>
<head>
<style>
.panel{
overflow:hidden;
font-size:12px;
width:300px;
margin:20px;
}
.panel-header{
padding:5px;
line-height:15px;
color:#15428b;
font-weight:bold;
font-size:12px;
background:url('images/panel_title.png') repeat-x;
position:relative;
border:1px solid #99BBE8;
}
.panel-body{
overflow:auto;
border:1px solid #99BBE8;
border-top-width:0px;
height:200px;
}
.panel-tool{
position:absolute;
right:5px;
top:4px;
}
.panel-tool div{
display:block;
float:right;
width:16px;
height:16px;
margin-left:2px;
cursor:pointer;
opacity:0.6;
filter:alpha(opacity=60);
}
.panel-tool-close{
background:url('images/panel_tools.gif') no-repeat -16px 0px;
}
.panel-tool-min{
background:url('images/panel_tools.gif') no-repeat 0px 0px;
}
.panel-tool-max{
background:url('images/panel_tools.gif') no-repeat 0px -16px;
}
.panel-tool-restore{
background:url('images/panel_tools.gif') no-repeat -16px -16px;
}
</style>
</head>
<body>
<div class="panel">
<div class="panel-header">title
<div class="panel-tool">
<div class="panel-tool-close"></div>
<div class="panel-tool-min"></div>
<div class="panel-tool-max"></div>
<div class="panel-tool-restore"></div>
</div>
</div>
<div class="panel-body"></div>
</div>
</body>
</html>
- 大小: 737 Bytes
- 大小: 5.5 KB
分享到：
相关推荐
《DIV+CSS技术在绿色音乐模板中的应用解析》 在当今的网页设计领域，DIV+CSS已经成为构建网页布局的标准方式，其灵活性和可维护性深受设计师们的喜爱。本篇文章将围绕"DIV+CSS绿色音乐模板"这一主题，深入探讨如何...
在这个"ASP.NET源码——网页选项卡(div+CSS).zip"压缩包中，我们主要关注的是如何在ASP.NET中实现基于div和CSS的网页选项卡功能。 选项卡是网页设计中常用的一种交互元素，它帮助用户在有限的空间内组织和展示多个...
在IT行业中，前端设计是构建用户界面的关键环节，而`Div+CSS`是这一领域中的核心技术之一。`Div+CSS`（Division + Cascading Style Sheets）是一种布局方式，通过使用HTML的`<div>`标签来组织网页内容，结合CSS来...
**div+css菜单生成器详解** 在网页设计中，菜单是不可或缺的一部分，它为用户提供直观的导航体验。传统的菜单制作通常需要手动编写HTML和CSS代码，对于非专业开发者来说，这个过程可能较为复杂。"div+css菜单生成器...
4. **Grid布局**：CSS Grid是二维布局系统，适用于创建复杂的网格布局，如后台管理面板的模块化界面。它允许定义行和列，并将元素放置在特定的单元格中。 5. **Bootstrap框架**：这些源码可能基于Bootstrap，这是一...
"Div+CSS网页模板"是网页设计中一种常见的布局方式，它将网页的结构（Div）与样式（CSS）分离，极大地提高了网页的可维护性和可扩展性。在这个压缩包文件中，包含了多个不同的Div+CSS网页模板，如`pvz_edit_09_08_20...
在网页设计中，选项卡效果是一种常见的用户界面设计模式，它允许用户在有限的空间内查看和切换多个内容面板。在本教程中，我们将探讨如何使用HTML的`div`元素配合CSS来实现一个跨浏览器的选项卡效果。这种方法既实用...
《50个Div+CSS模板解析与应用》 Div+CSS是网页设计中常见的布局方式，它通过HTML的Div元素和CSS（层叠样式表）进行页面结构与样式的分离，提高了网页的可维护性和易读性。"50个Div+CSS模板"集合了多种设计模式，为...
在网页设计领域，"DIV+CSS"是一种广泛采用的技术，用于构建高效、可维护和响应式的网站布局。这个资源——"DIV+CSS27款后台管理页面设计"提供了一组用HTML和CSS编写的27个不同的后台管理界面示例。这些设计可以为...
【标签】：“一款强大的后台管理模板（通用） DIV+CSS” 是对资源内容的精确概括，标签通常用于搜索和分类，这表明模板的主要技术特点在于其基于DIV和CSS的前端构建方式，以及其广泛适用的特性。 【压缩包子文件的...
《制造者管理信息系统模板——基于DIV+CSS的设计与实现》 在信息技术日益发达的今天，制造企业对于高效、精准的管理信息系统的需求日益增强。"制造者管理信息系统模板"是为解决这一需求而设计的一种工具，它结合了...
你可以直接拖放`DIV`元素，调整其大小，然后通过属性面板设置对应的`CSS`样式。此外，`Dreamweaver`还支持源代码编辑模式，方便你深入理解代码结构和编写自己的`CSS`规则。 在学习过程中，你将遇到一些常见的布局...
3. **CSS属性面板**：提供一个直观的界面，让用户可以通过图形化控件设置CSS属性，无需手动编写代码。 4. **盒模型调整**：编辑器通常会有一个专门的区域来调整元素的边距、填充和边界，这是理解网页布局的关键。 5....
3. **CSS样式面板**：通过“CSS样式”面板，可以方便地创建新的样式规则，选择目标元素，设置颜色、字体、边距、背景等样式属性，然后将其应用到对应的div或其他元素上。 4. **布局和定位**：使用div+css进行布局，...
- 在CSS样式面板中定义该ID的样式，指定宽度（例如`width: 400px`）和高度（例如`height: 300px`）。 - 可以为该`div`设置背景色以便于观察布局效果。 - **代码示例**: ```css #layout { height: 300px; width...
例如，你可以拖动Div到理想位置，然后在属性面板中设置相应的CSS属性，或者直接在代码视图中编辑CSS规则。 在实际应用中，Div+CSS定位技术可以帮助你创建复杂、灵活的网页布局。例如，你可以用相对定位来微调元素的...
在网页设计领域，`DIV+CSS`是一种广泛采用的技术，用于布局和美化页面。这个压缩包包含了一系列实用的代码示例，适合初学者和有一定经验的WEB基础技术人员学习。下面，我们将逐一解析这些文件名所代表的HTML和CSS...
通过CSS，我们可以对`div`进行样式设置，如尺寸、颜色、布局等，使得网页结构清晰，便于管理和维护。在后台管理页面设计中，`div`经常被用来创建模块化的设计，如导航栏、侧边栏、内容区等，帮助实现灵活的页面布局...
本资源"超爽的网页模板44个"包含了一系列使用div+css技术构建的网页模板，非常适合那些正在寻找网页设计灵感或者希望快速搭建网站的人。 Div（Division）和CSS（Cascading Style Sheets）是网页设计中不可或缺的...