今日闲来无事，自己用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版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....
标签上下层滑动替换特效代码,超酷图片特效(适合做成flash),漂亮的导航条,选项卡,div+css制作房子,表格背景色动态控制,JS对表格增删查改,跟随上下以及左右滚动条滚动的层,可以折叠的表格, 选择日期控件,导航条,...
div.css 名为div的样式文件。 style.css 名为style的样式文件。 第15章（源代码\第15章） 示例描述：本章演示CSS基础部分知识。 CSS基础.html 演示CSS基础链接知识用法。 style1.css ...
11.1.1 新的CSS支持面板 234 11.1.2 CSS可视化助理 238 11.1.3 代码校验 241 11.1.4 样式呈现 243 11.2 创建CSS布局 246 11.2.1 新建布局页面 246 11.2.2 插入div进行布局 247 11.2.3 创建CSS规则 250 11.3 CSS调试...
城市智慧路灯综合管理平台后台模板，DIV+CSS布局设计，全套模板，包括地图监控、灯箱实时监控、策略管理、故障报警、历史数据、灯具管理、数据统计、故障分析、开关灯记录分析、区域管理、分组管理等HTML后台模板...
2. 连接页面的 CSS 文件：创建名为 styie.css 的文件，然后打开 CSS 样式面板，单击附加样式表，连接超链接。 3. 设计网页的通用规则：通用规则对所有的标记都起作用，绝大部分标记都会涉及属性。 4. 设计 #header ...
在《CSS设计彻底研究》中对设计中常用的网页元素和布局方式都给出详细的分类和归纳，并讲解了完整的解决方法，主要包括各种导航菜单（水平的、竖直的、固定宽度的、自适应宽度的、下拉的等），Tab面板、伸缩面板和...
2 、连接页面的CSS文件，先建一个名为styie.css的文件，然后打开CSS样式面板， 单击附加样式表，连接超链接。 3 、设计网页的通用规则。通用规则对所有的标记都起作用，绝大部分标记都会涉及 属性。打开CSS样式面板...
网站页面div+css兼容目前所有主流浏览器，ie6+，Chrome，火狐，Opera，Safari等，HTML代码简洁规范通过W3C，更加有利于SEO推广。系统功能完善，覆盖面广、扩展性强、负载能力好、模板调用非常灵活、管理方便，因此...
、购物车、登陆验证、div+css、js等技术，功能比较完整，支付模块新增手机支付、微信公众号支付、微信扫描支付接口，非常适合学习或二次开发使用 前台功能： 1、首页2、商城3、购物车4、会员中心5、帮助中心6、搜索...
网站页面div+css兼容目前所有主流浏览器，ie6+，Chrome，火狐，Opera，Safari等，HTML代码简洁规范通过W3C，更加有利于SEO推广。系统功能完善，覆盖面广、扩展性强、负载能力好、模板调用非常灵活、管理方便，因此...
操作简单的蓝色设计后台模板 城建管理系统平台后台模板 淡蓝色网站后台管理模板 仿126邮件系统管理后台模板 管理信息系统后台模板 ...蓝黑色立体动感宽屏DIV模板 等。。。。。 。。。。。。 。。。。。。 。。。。。。
、购物车、登陆验证、div+css、js等技术 二、功能介绍 1、本源码是一个超市在线购物商城源码,该网上商城是给超市便利店等零售批发实体店 定制的网上商城，主要针对周边配送，后台可定义配送范围，可在线支付和...
html+css+js做的HTML画图面板，代码很简单，不过设计思想原创，实现中遇到一个BUG还未能解决，当鼠标移动快时，生成的SPAN像素点断断续续，DIV也一样...望高手看到时能提供解决方案~ 小弟邮箱：naraku0302@163.com
内容索引:脚本资源,CSS特效,层折叠,层展开 一个基于CSS+JS实现DIV层展开收缩代码，实现类似打开与关闭的功能，可以应用到网页的任何部分，直接拷贝代码就能使用，具体效果大家可看截图。
vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画。 循环列表，html: <div class=newslist> (item,index) key=index> <p class=p ref=liCon>{{item.content}} <div class=open ...
<div class="box2" panerTitle="控制面板" panelHeight="" panelWidth="300" showStatus="收缩" panelUrl=""> panerTitle：box2添加左上角标题，可为随意文本 showStatus：若为“收缩”，即可为可改变显示或者隐藏...
2,重新设计了程序界面，Q风格，更漂亮，采用DIV+CSS设计 3,复制文字，粘贴后，输入自己的ID号，即可保存到自己的账号里 4,支持直接往邮箱中储存信息（需配置），支持找回密码功能 使用技巧： 如果标题为邮箱地址，...