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 开发过程中发现的好网站,给 ...
随机推荐
- Go语言简介
Go语言简介 - Go语言是由Google开发的一个开源项目,目的之一为了提高开发人员的编程效率. Go语言简介 Go语言是由Google开发的一个开源项目,目的之一为了提高开发人员的编程效率. Go ...
- Activity 的启动模式
好久没用过那几种activity的启动模式了,如今看到singletop竟然傻了眼,完全忘记了这几种启动模式的区别!隧将两年前的总结翻出来,通读一遍那晦涩难懂的记录,又理解了一遍,在以前记录的基础上, ...
- C# 算速表达式
public object ComputeExpression(string expression) { var result = new ...
- 我的Android开发相关文章
Pro Android学习笔记: Pro Android学习笔记(一零七):2D动画(2):layout渐变动画 2014.7.25 Pro Android学习笔记(一零六):2D动画(1):fram ...
- Oracle基础学习1--Oracle安装
安装过程较简单.按着步骤走就可以.这里须要提醒假设要使用PL/SQL来操作Oracle.那么最好安装32位Oracle程序.原因是网上说PL/SQL仅仅对32位Oracle进行支持,假设用64为Ora ...
- NoSQL 数据库产品学习总结(一)
NoSQL 数据库产品学习总结(一) 本篇文章共分为四个章节,会陆续整理下 Memcached.Redis.tair.mongodb.hbase.SequoiaDB. Cassandra的相关知识. ...
- iOS 中UI控件的各种对齐方式总结
1.textAligment : 文字的水平方向的对齐方式 取值 NSTextAlignmentLeft = 0, // 左对齐 NSTextAlignmentCenter = ...
- linux 修改文件时间
1.ls -l *.sh 2.touch -d "10/13/2013" *.sh [我想把所以的.sh文件修改到三个月前(2013年10月13)的时间.]3.ls -l *.sh ...
- jQuery动态实现title的修改 失效问题
最近做了一个网站,一切都很顺利,在上线的时候,突然发现一个严重的问题,开始面对这个问题,完全不知所措(在goole.火狐.IE9及其以上都没得问题:IE8及其低版本都失效)只是浏览器弹出一个bug,但 ...
- android自定义View之NotePad出鞘记
现在我们的手机上基本都会有一个记事本,用起来倒也还算方便,记事本这种东东,如果我想要自己实现,该怎么做呢?今天我们就通过自定义View的方式来自定义一个记事本.OK,废话不多说,先来看看效果图. 整个 ...