我们知道通过锚点技术可以实现页面内容的定位,如果我们把这些内容放置在一个容器中,看看我们能做什么。

     

艾玛,选项卡、轮播,有木有,瞬间有种蛋碎的赶脚,以前写个选项卡,破轮播,费了多大的劲儿呀,现在,你只需几行代码甚至是不写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之锚点技术实现选项卡的更多相关文章

  1. CSS深入理解学习笔记之overflow

    1.Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见. hidden:超出部分隐藏. scrol ...

  2. URL锚点HTML定位技术机制

    一.锚点是什么 锚点就等同于火影中的“飞雷神之术”,我们先看百科中锚点的解释: 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部.然后可以创建到这些命名锚记的链接,这些链接可快 ...

  3. URL锚点HTML定位技术机制、应用与问题

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3591 一.锚点是什么 ...

  4. 深入了解overflow

    1.如果overflow-x与overflow-y值不同   其中一个赋值为visiable,另一个赋值scroll/auto/hidden,那么visiable会重置为auto 2.overflow ...

  5. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  6. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  7. 学习android推荐网站

    1. Android Developers 作为一个Android开发者,官网的资料当然不可错过,从设计,培训,指南,文档,都不应该错过,在以后的学习过程中慢慢理解体会. 2. Android Gui ...

  8. 10个学习Android开发的网站推荐

    1. Android Developers 作为一个Android开发者,官网的资料当然不可错过,从设计,培训,指南,文档,都不应该错过,在以后的学习过程中慢慢理解体会. 2. Android Gui ...

  9. 10个很棒的学习Android 开发的网站(转)

    看到江湖旅人 写的<10个很棒的学习iOS开发的网站 - 简书>,所以就忍不住写Android 啦,也希望对大家有帮助.我推荐的网站,都是我在学习Android 开发过程中发现的好网站,给 ...

随机推荐

  1. Go语言简介

    Go语言简介 - Go语言是由Google开发的一个开源项目,目的之一为了提高开发人员的编程效率. Go语言简介 Go语言是由Google开发的一个开源项目,目的之一为了提高开发人员的编程效率. Go ...

  2. Activity 的启动模式

    好久没用过那几种activity的启动模式了,如今看到singletop竟然傻了眼,完全忘记了这几种启动模式的区别!隧将两年前的总结翻出来,通读一遍那晦涩难懂的记录,又理解了一遍,在以前记录的基础上, ...

  3. C# 算速表达式

              public object ComputeExpression(string expression)         {             var result = new  ...

  4. 我的Android开发相关文章

    Pro Android学习笔记: Pro Android学习笔记(一零七):2D动画(2):layout渐变动画 2014.7.25 Pro Android学习笔记(一零六):2D动画(1):fram ...

  5. Oracle基础学习1--Oracle安装

    安装过程较简单.按着步骤走就可以.这里须要提醒假设要使用PL/SQL来操作Oracle.那么最好安装32位Oracle程序.原因是网上说PL/SQL仅仅对32位Oracle进行支持,假设用64为Ora ...

  6. NoSQL 数据库产品学习总结(一)

    NoSQL 数据库产品学习总结(一) 本篇文章共分为四个章节,会陆续整理下 Memcached.Redis.tair.mongodb.hbase.SequoiaDB. Cassandra的相关知识. ...

  7. iOS 中UI控件的各种对齐方式总结

    1.textAligment : 文字的水平方向的对齐方式 取值 NSTextAlignmentLeft      = 0,    // 左对齐 NSTextAlignmentCenter    = ...

  8. linux 修改文件时间

    1.ls -l *.sh 2.touch -d "10/13/2013" *.sh [我想把所以的.sh文件修改到三个月前(2013年10月13)的时间.]3.ls -l *.sh ...

  9. jQuery动态实现title的修改 失效问题

    最近做了一个网站,一切都很顺利,在上线的时候,突然发现一个严重的问题,开始面对这个问题,完全不知所措(在goole.火狐.IE9及其以上都没得问题:IE8及其低版本都失效)只是浏览器弹出一个bug,但 ...

  10. android自定义View之NotePad出鞘记

    现在我们的手机上基本都会有一个记事本,用起来倒也还算方便,记事本这种东东,如果我想要自己实现,该怎么做呢?今天我们就通过自定义View的方式来自定义一个记事本.OK,废话不多说,先来看看效果图. 整个 ...