<!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <style>

         .container {position:relative;width:600px;height:400px;overflow-y:hidden;}

         .container img{ display:block;}

         .container .silder {width:100%;}

         .container .silder img{display:none;}

         .container .silder img:first-child{display:block;}

         .container .title{position:absolute;bottom:0px;margin:0;width:100%;background-color:#000;opacity:0.5;line-height:45px;}

         .container .title span{ margin-left:20px;color:#fff;text-decoration:none;}

         .container .controls{ position:absolute;bottom:18px;right:10px;line-height:10px;z-index:99;}

         .container .controls ul li {list-style:none outside none; float: left; height: 20px; line-height: 20px; width: 20px;border-radius: 10px; text-align: center; margin-right: 5px; }

         .container .controls label{ display:inline-block;width:22px;margin:auto 1px;height:22px;border-radius:12px;background-color:gray;text-align:center;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}

         .container .controls label:hover {cursor:pointer;background-color:green;}

         .container input[type="radio"] { display: none;}

         .controls ul li #lbl1 { /* background-color:#6666ff;*/    }

         .container span:before {

                 content: "我的前端之路1";

             }

             input[type="radio"][id="index1"]:checked ~.controls ul li #lbl1 {

                 background-color:#6666ff;

             }

             input[type="radio"][id="index1"]:checked ~.silder >.index1 {

                 display:block;

             }

             input[type="radio"][id="index1"]:checked  ~.silder >.index2,.index3 {

                 display:none;

             }

             input[type="radio"][id="index1"]:checked ~.title span:before {

                 content:"我的前端之路1";

             }

             input[type="radio"][id="index2"]:checked  ~.controls ul li #lbl2 {

                 background-color:#6666ff;

             }

             input[type="radio"][id="index2"]:checked ~.silder >.index2 {

                 display:block;

             }

             input[type="radio"][id="index2"]:checked  ~.silder >.index1,.index3 {

                 display:none;

             }

              input[type="radio"][id="index2"]:checked ~.title span:before {

                 content:"我的前端之路2";

             }

             input[type="radio"][id="index3"]:checked ~.controls ul li #lbl3 {

                 background-color:#6666ff;

             }

             input[type="radio"][id="index3"]:checked  ~.silder >.index3 {

                 display:block;

             }

             input[type="radio"][id="index3"]:checked  ~.silder >.index1,.index3 {

                 display:none;

             }

              input[type="radio"][id="index3"]:checked ~.title span:before {

                 content:"我的前端之路3";

             }

     </style>

 </head>

 <body>

     <div class="container">

          <input type="radio" name="silder" id="index1" checked />

          <input type="radio" name="silder" id="index2" />

          <input type="radio" name="silder" id="index3" />

         <div class="controls">

             <ul>

                 <li>

                     <label for="index1" id="lbl1">1</label>

                 </li>

                 <li>

                     <label for="index2" id="lbl2">2</label>

                 </li>

                 <li>

                     <label for="index3" id="lbl3">3</label>

                 </li>

             </ul>

         </div>

         <div class="silder">

             <img src="img1.png" alt="我的前端之路1" class="index1" id="img1" />

             <img src="img2.jpg" alt="我的前端之路2" class="index2" id="img2" />

             <img src="img3.jpg" alt="我的前端之路3" class="index3" id="img3" />

         </div>

         <p class="title">

             <span>

             </span>

         </p>

     </div>

 </body>

 </html>

纯CSS做的一个Silder的更多相关文章

  1. 纯css做幻灯片效果

    css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...

  2. 纯css做的安卓开机动画

    随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了.用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小.其中css ...

  3. 纯CSS做3D旋转魔方

    昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方  效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试  做成自己特有的魔方 <!DOCTYPE h ...

  4. 纯css做三角形图标

    以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...

  5. 纯CSS 3D翻转一个面（翻转导航菜单 立方体）

    在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程. 这里推荐大家研究这个3D翻转动画的代码. 我的github:swarz,欢迎给老弟我++星星 ...

  6. 用html/css做的一个登入小界面（图片瀑布流）

    一个登入效果简易图:(色彩搭配有点乱,嘻嘻,可以在代码处改成自己喜欢的颜色) css样式的代码: style.css: @charset "utf-8";/* CSS Docume ...

  7. 今天用css做了一个QQ登录页面

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 纯css做三角形形状

    /* create an arrow that points up */ div.arrow-up { width:0px; height:0px; border-left:5px solid tra ...

  9. 纯CSS 箭头流程，网上找的，留着备用

    无意之中看到一个纯CSS做的箭头导航(流程式),收藏一下,以备不时之需 实际效果 步骤一 步骤二 步骤三 步骤四 源代码: HTML: <div class="wrapper" ...

随机推荐

  1. nagios监控mysql主从状态

    看了网上很多mysql主从监控的,大部分都是shell的,就算是python的,也是在python下跑shell语句.我写了一个python的监控脚本,用到了mysqldb这个包.脚本如下: [roo ...

  2. @InitBinde的作用

    @InitBinder用于在@Controller中标注于方法,表示为当前控制器注册一个属性编辑器或者其他,只对当前的Controller有效

  3. PAT 团体程序设计天梯赛-练习集 L1-003. 个位数统计

    给定一个k位整数N = dk-1*10k-1 + ... + d1*101 + d0 (0<=di<=9, i=0,...,k-1, dk-1>0),请编写程序统计每种不同的个位数字 ...

  4. 大D实例化model-->调用自定义类方法,大M调用原声model方法

    class ContactsModel extends Model{ public function addxxx(){ } } $conmodel = D('contacts','Model'); ...

  5. Hihocoder 2月29日

      时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 给定两个日期,计算这两个日期之间有多少个2月29日(包括起始日期). 只有闰年有2月29日,满足以下一个条件的年份为闰年 ...

  6. CodeForces 577C Vasya and Petya's Game 数学

    题意就是给你一个1到n的范围 你每次可以问这个数是否可以被某一个数整除 问你要猜多少数才能确定这个数…… 一开始一点思路也没有 后来查了一下才知道 每个数都可以分为几个质数的整数次幂相乘得到…… #i ...

  7. C - 娜娜梦游仙境系列——吃不完的糖果

    C - 娜娜梦游仙境系列——吃不完的糖果 Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Oth ...

  8. html5+css3学习笔记-prefixfree前缀补全插件

    虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的.一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的插 ...

  9. 9．创建一个三角形类，成员变量三边，方法求周长，创建类主类A来测试它。

    package com.hanqi.test; public class Triangle { private double a,b,c; public Triangle(double d,doubl ...

  10. hdu5573 二叉树找规律，二进制相关

    input T 1<=T<=100 n k 1<=n<=1e9  n<=2^k<=2^60 output 从1走到第k层,下一层的数是上一层的数×2或者×2+1,每 ...