overflow之锚点技术实现选项卡
我们知道通过锚点技术可以实现页面内容的定位,如果我们把这些内容放置在一个容器中,看看我们能做什么。
艾玛,选项卡、轮播,有木有,瞬间有种蛋碎的赶脚,以前写个选项卡,破轮播,费了多大的劲儿呀,现在,你只需几行代码甚至是不写js就能实现该功能,sorry,有点自我陶醉了,表废话啦,请上车,现在就带你飞.
html
<div class="box">
<div class="list" id="one">1</div>
<div class="list" id="two">2</div>
<div class="list" id="three">3</div>
<div class="list" id="four">4</div>
</div>
<div class="link" style="margin-bottom:150px;">
<a href="#one" class="click">1</a>
<a href="#two" class="click">2</a>
<a href="#three" class="click">3</a>
<a href="#four" class="click">4</a>
</div>
css
.box{
width:300px;
height:200px;
overflow:hidden;
/*other style*/
}
.box .list{
width:100%;
height:100%;
/*other style*/
}
#one{background:#ccc;}
#two{background:red;}
#three{background:blue;}
#four{background:green;}
注意:适用场景,页面为单屏页面,否会影响html的滚动条
overflow之锚点技术实现选项卡的更多相关文章
- CSS深入理解学习笔记之overflow
1.Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见. hidden:超出部分隐藏. scrol ...
- URL锚点HTML定位技术机制
一.锚点是什么 锚点就等同于火影中的“飞雷神之术”,我们先看百科中锚点的解释: 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部.然后可以创建到这些命名锚记的链接,这些链接可快 ...
- URL锚点HTML定位技术机制、应用与问题
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3591 一.锚点是什么 ...
- 深入了解overflow
1.如果overflow-x与overflow-y值不同 其中一个赋值为visiable,另一个赋值scroll/auto/hidden,那么visiable会重置为auto 2.overflow ...
- CSS实现导航条Tab的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- CSS实现导航条Tab切换的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- 学习android推荐网站
1. Android Developers 作为一个Android开发者,官网的资料当然不可错过,从设计,培训,指南,文档,都不应该错过,在以后的学习过程中慢慢理解体会. 2. Android Gui ...
- 10个学习Android开发的网站推荐
1. Android Developers 作为一个Android开发者,官网的资料当然不可错过,从设计,培训,指南,文档,都不应该错过,在以后的学习过程中慢慢理解体会. 2. Android Gui ...
- 10个很棒的学习Android 开发的网站(转)
看到江湖旅人 写的<10个很棒的学习iOS开发的网站 - 简书>,所以就忍不住写Android 啦,也希望对大家有帮助.我推荐的网站,都是我在学习Android 开发过程中发现的好网站,给 ...
随机推荐
- iOS不勾选设置,实现某个界面强制横屏
1.在不勾选横屏的前提下,实现某一个界面横屏显示,比如播放视频.图表显示等. 2.只能Present跳转,Push会无效. 3.实现代码 在需要横屏的VC里,添加如下代码 #pragma mark 强 ...
- 动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数
动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...
- Android网络传输中必用的两个加密算法:MD5 和 RSA (附java完毕測试代码)
MD5和RSA是网络传输中最经常使用的两个算法,了解这两个算法原理后就能大致知道加密是怎么一回事了.但这两种算法使用环境有差异,刚好互补. 一.MD5算法 首先MD5是不可逆的,仅仅能加密而不能解密. ...
- 总结swift语言常见的20个问题和回答
1.假设我是个刚入门的iOS开发人员,选swift学习呢,还是选objective-c学习,还是两个都学? 这个能够依据两种情况来决定:1.我想进入公司担任iOS开发的职位 2.我仅仅想做个独立 ...
- .net core 1.1.0 MVC 控制器接收Json字串 (JObject对象) (一)
.net core 1.1.0 MVC 控制器接收Json字串 (JObject对象) (二) Json是WEB交互常见的数据,.net core 处理方式是转为强类型,没有对应的强类型会被抛弃,有时 ...
- Nginx/LVS/HAProxy负载均衡软件的优缺点详解(转)
PS:Nginx/LVS/HAProxy是目前使用最广泛的三种负载均衡软件,本人都在多个项目中实施过,参考了一些资料,结合自己的一些使用经验,总结一下. 一般对负载均衡的使用是随着网站规模的提升根据不 ...
- 过滤所有的HTML标签
<script type="text/javascript"> var str = "<p style=color:#FF0000>恩恩,就是就是 ...
- pcap支持Python2.7.8解决办法
pcap库只支持到python2.5. pip install pcap在python2.7.8找不到. 只需要将网盘的2个文件放到python安装目录下lib/site-package文件夹即可 链 ...
- Vs2010中rdlc报表绑定DataTable数据源
首先,新建一个网站,接着添加数据集,并且命名为student,如下图所示: 在该数据集对象上面添加datatable,并且设置列名,如下图所示: 添加一张报表,命名为student,如下图所示: 向报 ...
- Unity3D 之UGUI 面板
UGUI中使用面板,可以对一组控件分为一个组. 一个面板里面可以添加一些控件,就如同Html中的<div>一样.