js进阶 11-21 纯css实现选项卡

一、总结

一句话总结：核心原理，a标签的锚点效果+父div限宽+多的部分隐藏。

1、如何实现a标签的锚点效果？

href属性找到对应的位置就好，和选择器一样，一般是id

37             <li><a href="#div1">菜单1</a></li>

38             <li><a href="#div2">菜单2</a></li>

39             <li><a href="#div3">菜单3</a></li>

44         <div id="div1">内容111111111111.......</div>

45         <div id="div2">内容222222222222.......</div>

46         <div id="div3">内容333333333333......</div>

2、如何实现父div限宽+多的部分隐藏？

28         #content{

29             height: 152px;overflow: hidden;

30         }

3、如何实现移上去标签改变透明度？

opacity属性

22         #list a:hover{opacity: 0.6}

4、clear:both一般写在哪个里面？

一般单独写在一个类里面，用的时候直接调用就好了，简单方法

23         .clear{clear: both;}

二、纯css实现选项卡

选项卡(TAB标签页)

案例描述：选项卡可以扩展页面的可用空间，应用非常广泛.

它的实现原理并不复杂，可以有许多在实现方法，这里我们将分别以CSS3，JavaScript,jQuery三种方法为大家演示

我们这里仅以实现的原理为重点，大家练习的时候可以发挥自己的想象力，进一步的去美化选项卡的效果，制作出自己喜欢的选项卡样式。

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style>

         *{margin:0;padding: 0;}

         body{padding: 50px}

         a{text-decoration:none;}

         #list{list-style-type: none}

         #list a{

             float: left;

             background: orange;

             width: 100px;

             height: 30px;

             line-height: 30px;

             text-align: center;

         }

         #list a:hover{opacity: 0.6}

         .clear{clear: both;}

         #content div{

             width: 298px;height: 150px;

             border:1px solid green;

         }

         #content{

             height: 152px;overflow: hidden;

         }

     </style>

 </style>

 </head>

 <body>

     <div id="tab">

         <ul id="list">

             <li><a href="#div1">菜单1</a></li>

             <li><a href="#div2">菜单2</a></li>

             <li><a href="#div3">菜单3</a></li>

         </ul>

     </div>

     <div class="clear"></div>

     <div id="content">

         <div id="div1">内容111111111111.......</div>

         <div id="div2">内容222222222222.......</div>

         <div id="div3">内容333333333333......</div>

     </div>

 </body>

 </html>
 

js进阶 11-21 纯css实现选项卡的更多相关文章

  1. js进阶 11-3 jquery中css属性如何操作

    js进阶 11-3  jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...

  2. 分享11个纯css完成的图片浏览器

    图片画廊用于在网站上显示系列图片,它已成为网站重要的组成部分.实现图片画廊有很多种方法,今天要与大家分享的是11个使用纯 CSS 实现的图片画廊,它们代码少,效果炫,加载速度快,希望能对大家有所帮助. ...

  3. 【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束

    引言:2048小游戏的结束界面,使用纯CSS制作模态对话框,一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用,但在制作要运行在移动端的小项目时,就不能使用BootStrap,因为 ...

  4. 进阶篇之纯css+字体实现五角星（半颗星）评分

    1.前言 之前写了一篇实现五角星打分效果的demo.这个demo用来实现打分效果绰绰有余,那么有时候我们在统计评分的时候,就会有半颗星或者1/3颗星星这样的那要如何实现呢?来来来,纯字体+css实现! ...

  5. 21纯 CSS 创作文本滑动特效的 UI 界面

    原文地址:https://segmentfault.com/a/1190000014842868 简化版地址:https://scrimba.com/c/cgaZLh6 感想:笨蛋,想不出自己的东西. ...

  6. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  7. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...

  8. 分享：纯 css 瀑布流 和 js 瀑布流

    分享一次纯 css 瀑布流  和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...

  9. js进阶 11-24 jquery如何实现选项卡的制作

    js进阶 11-24 jquery如何实现选项卡的制作 一.总结 一句话总结:ul>li做选项卡的选项卡头,多个div做选项卡的内容,点到对应的li,就切换到对应的div,用index()获取l ...

随机推荐

  1. 通过OpenSSL解析X509证书基本项

    在之前的文章"通过OpenSSL解码X509证书文件"里.讲述了怎样使用OpenSSL将证书文件解码,得到证书上下文结构体X509的方法. 以下我们接着讲述怎样通过证书上下文结构体 ...

  2. Slick教程

    Slick 编程(1): 概述 Slick 编程(2): 准备开发环境 Slick 编程(3): 基本查询 Slick 编程(4): 数据库连接和事务处理 Slick 编程(5): 数据库Schema ...

  3. battery-获取手机电量信息

    我们如果想要获得手机的电池电量信息,可以借助广播来实现.因为当手机电池电量发生变化的时候,系统会发送一个广播.具体代码如下 //注册 intentFilter.addAction(Intent.ACT ...

  4. Android学习笔记进阶15之Shader渲染

    Android提供的Shader类主要是渲染图像以及一些几何图形. Shader有几个直接子类: BitmapShader    : 主要用来渲染图像 LinearGradient  :用来进行线性渲 ...

  5. 对ng-repeat的表格内容添加不同样式：ng-style

    对ng-repeat的表格内容添加不同样式,html代码: <tr ng-repeat="x in tableData"> <td>{{x.networkN ...

  6. Linux启动过程总结

    当我们按开机键后,主机就会执行: 1.POST(Power-On Self Test 加电自检). 2.读取BIOS中定义的开机设备启动程序,并加载MBR(主引导记录(Master Boot Reco ...

  7. Rotation--控件位置旋转

    今天想要完成一个按钮的动画,也就是随着手势在屏幕上的滑动,让按钮图片跟着旋转.刚开始的思路是,先把图片旋转以后,在把这个图片设置为imagebutton的背景.不过,会发现这个图片经过处理以后一直变形 ...

  8. 【习题 6-10 UVA - 246】10-20-30

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 发牌的那个牌堆用一个deque,7个牌堆用vector来模拟. 然后按照题意模拟就好. 不难. [代码] /* 1.Shoud it ...

  9. js中#代表什么

    js中#代表什么 一.总结 1.#号:代表id选择器  2. $('#div1'). : 常用用法,前面也有$符号 二."#"在js中代表什么 js里我不曾看到用到‘#’的代码端, ...

  10. Costura.Fody

    使用Costura.Fody将源DLL合并到目标EXE 本文为原创文章,如转载,请在网页明显位置标明原文名称.作者及网址,谢谢! 一.本文主要是使用Costura.Fody工具将源DLL合并到目标EX ...