下拉框架

<!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=utf-8" />
<title>无标题文档</title>
<link href="Untitled-下拉.css" rel="stylesheet" type="text/css" />
<style>
*
{
	margin:0px;
	padding:0px;}
</style>
</head>

<body>
<div class="a" id="a">
<div class="a1" >
<div class="a2" id="a2"><div class="a21" ><div class="a22"></div><div class="a32"></div><div class="a42"></div></div></div>
<div class="a3" id="a3"><div class="a31" ></div></div>
<div class="a4" id="a4"><div class="a41" ></div></div>
</div></div>

</body>
</html>

  

@charset "utf-8";
/* CSS Document */
/*小矿*/
.a
{
	width:80px;
	height:40px;
	background-color:#090;
	position:absolute;
	border:1px solid black;
	left:80px;
	top:100px;
	}
	#a/*超出部分隐藏*/
	{overflow:hidden;}
#a:hover/*鼠标放在上边显示*/
{
	overflow:visible}

	.a1
{
	width:80px;
	height:120px;
	border:1px solid black;
	left:0px;
	top:40px;
	position:absolute;}

.a2
{
	width:80px;
	height:40px;
	background-color:#F00;
	position:absolute;
	border:1px solid black;
	left:0px;
	top:0px;
	}
	#a2
	{overflow:hidden;}
	#a2:hover
	{
		overflow:visible}
		.a21
		{
			width:80px;
			height:120px;
			position:absolute;
			border:1px solid black;
			left:80px;
			top:0px;
			background-color:#F00;}
		     .a22
                  {
	                 width:80px;
	                height:40px;
	            background-color:#F00;
	              position:absolute;
	                 border:1px solid black;
	                 left:0px;
	                 top:0px;
	                           }
	.a32
{
	width:80px;
	height:40px;
	background-color:#F00;
	position:absolute;
	border:1px solid black;
	left:0px;
	top:40px;
	}
	.a42
{
	width:80px;
	height:40px;
	background-color:#F00;
	position:absolute;
	border:1px solid black;
	left:0px;
	top:80px;
	}
	.a3
{
	width:80px;
	height:40px;
	background-color:#F0F;
	position:absolute;
	border:1px solid black;
	left:0px;
	top:40px;
	}
	#a3
	{overflow:hidden;}
	#a3:hover
	{
		overflow:visible}
		.a31
		{
			width:80px;
			height:120px;
			position:absolute;
			border:1px solid black;
			left:80px;
			top:0px;
			background-color:#F0F;}
	.a4
{
	width:80px;
	height:40px;
	background-color:#F69;
	position:absolute;
	border:1px solid black;
	left:0px;
	top:80px;
	}
	#a4
	{overflow:hidden;}
	#a4:hover
	{
	overflow:visible}
	.a41
		{
			width:80px;
			height:120px;
			border:1px solid black;
			position:absolute;
			left:80px;
			top:0px;
            background-color:#F69;}

  

时间: 2024-11-04 14:21:22

下拉框架的相关文章

十分钟搭建主流框架_下拉/上拉刷新数据(OC)

本节主题(网络部分-下拉/上拉刷新) 源码地址在文章末尾 达成效果 下拉刷新数据 上拉加载更多数据 前言 经过十分钟搭建主流框架_简单的网络部分(OC)的介绍,相信你已经实现了基本的联网获取数据,但只是粗糙的获取了固定的数据,下面就让我们来实现下拉刷新和上拉加载更多吧.同样,我们先来做准备工作吧. 准备工作 Github寻找优秀的第三方刷新框架 1.前人种树,后人乘凉.有优秀的第三方框架可以使用,当然是极好的,可以大大提高我们的开发效率,如有特殊需求只能自己手写就除外了 Refresh 2.查阅

Android 下拉刷新框架实现

1. 关于下拉刷新 下拉刷新这种用户交互最早由twitter创始人洛伦?布里切特(Loren Brichter)发明, 有理论认为,下拉刷新是一种适用于按照从新到旧的时间顺序排列feeds的应用,在这种应用场景中看完旧的内容时,用户会很自然地下拉查找更新的内容,因此下拉刷新就显得非常合理.大家可以参考这篇文章: 有趣的下拉刷新,下面我贴出一个有趣的下拉刷新的案例. 图一.有趣的下拉刷新案例(一) 图一.有趣的下拉刷新案例(二) 2. 实现原理 上面这些例子,外观做得再好看,他的本质上都一样,那就

使用MUI框架,模拟手机端的下拉刷新,上拉加载操作。

套用mui官方文档的一句话:"开发者只需关心业务逻辑,实现加载更多数据即可".真的是不错的框架. 想更多的了解这个框架:http://dev.dcloud.net.cn/mui/ 那么如何实现上拉刷新,下拉加载的功呢? 首先需要一个容器: 1 <!--下拉刷新容器--> 2 <div id="refreshContainer" class="mui-content mui-scroll-wrapper"> 3 <di

Android智能下拉刷新加载框架—看这些就够了

一些值得学习的几个下拉刷新上拉加载开源库 Android智能下拉刷新框架-SmartRefreshLayout 支持所有的 View(AbsListView.RecyclerView.WebView....View) 和多层嵌套的视图结构 支持自定义并且已经集成了很多炫酷的 Header 和 Footer (图). 支持和ListView的同步滚动 和 RecyclerView.AppBarLayout.CoordinatorLayout 的嵌套滚动 NestedScrolling. 支持在An

解决Bui框架下拉框select配合Gird弹出模态编辑框使用,无法选取编辑行的下拉内容.

这个需求比较简单,就是下拉列表的项是异步请求过来的加载的,而点击gird的编辑一行按钮实现动态选择表单的行内容: 点击编辑效果: 图中的RulesDictID项是从后台异步获取的.那么我们在前端这样写: <div class="row-fluid"> <div class="span24"> <div class="panel"> <div class="panel-header"&g

iOS快速集成搜索界面下拉菜单框架

前言 这次推出的控件,比较常用,搜索界面下拉菜单,如果喜欢我的文章,可以关注我微博:吖了个峥,也可以来小码哥,了解下我们的iOS培训课程.后续还会更新更多内容,有任何问题,欢迎简书留言峥吖... Demo效果: 效果图.gif Demo演示: 1.创建下拉菜单 YZPullDownMenu *menu = [[YZPullDownMenu alloc] init]; menu.frame = CGRectMake(0, 20, YZScreenW, 44); [self.view addSubv

html 布局;css3+jq 下拉菜单;table分页动态添加行;html5本地存储;简单易用的html框架

简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下拉菜单美化 1 input{appearance:none;background-color:transparent;border: solid 0px #000;} /*input 无边框*/ 2 input:disabled{background-color:#d2d2d2;border:0px

Android MVP设计框架模板 之 漂亮ListView上拉刷新下拉加载更多

mvp的全称为Model-View-Presenter,Model提供数据,View负责显示,Controller/Presenter负责逻辑的处理.MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部,而在MVC中View会直接从Model中读取数据而不是通过 Controller. 项目中大部分是面对接口编程,通过P层可以预先将所有需要的接口功能

032 Android智能下拉刷新框架-SmartRefreshLayout+RecyclerView的使用

1.SmartRefreshLayout介绍 SmartRefreshLayout的目标是打造一个强大,稳定,成熟的下拉刷新框架,并集成各种的炫酷.多样.实用.美观的Header和Footer. 正如名字所说,SmartRefreshLayout是一个“聪明”或者“智能”的下拉刷新布局,由于它的“智能”,它不只是支持所有的View,还支持多层嵌套的视图结构. 它继承自ViewGroup 而不是FrameLayout或LinearLayout,提高了性能. 也吸取了现在流行的各种刷新布局的优点,包