纯CSS做的一个Silder
<!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的更多相关文章
- 纯css做幻灯片效果
css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...
- 纯css做的安卓开机动画
随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了.用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小.其中css ...
- 纯CSS做3D旋转魔方
昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方 效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试 做成自己特有的魔方 <!DOCTYPE h ...
- 纯css做三角形图标
以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...
- 纯CSS 3D翻转一个面（翻转导航菜单 立方体）
在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程. 这里推荐大家研究这个3D翻转动画的代码. 我的github:swarz,欢迎给老弟我++星星 ...
- 用html/css做的一个登入小界面（图片瀑布流）
一个登入效果简易图:(色彩搭配有点乱,嘻嘻,可以在代码处改成自己喜欢的颜色) css样式的代码: style.css: @charset "utf-8";/* CSS Docume ...
- 今天用css做了一个QQ登录页面
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 纯css做三角形形状
/* create an arrow that points up */ div.arrow-up { width:0px; height:0px; border-left:5px solid tra ...
- 纯CSS 箭头流程，网上找的，留着备用
无意之中看到一个纯CSS做的箭头导航(流程式),收藏一下,以备不时之需 实际效果 步骤一 步骤二 步骤三 步骤四 源代码: HTML: <div class="wrapper" ...
随机推荐
- 未知的生成错误 因为没有预加载，所以无法解析程序集 GalaSoft.MvvmLight
使用wpf开发时,在ViewModel中引用了DevExpress注册的GalaSoft.MvvmLight命名空间,使用其ViewModelBase,在View界面中绑定事件时出现错误: 错误 13 ...
- hdu1020
#include <stdio.h> int main(void){ int n,i,c; char txt[10001]; scanf("%d", &n); ...
- Paint Pearls
Paint Pearls 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5009 dp+双向链表优化 看到题目,很自然地可以定义状态:dp[i]表示涂好 ...
- KMP详解之二
KMP算法详解 如果机房马上要关门了,或者你急着要和MM约会,请直接跳到第六个自然段. 我们这里说的KMP不是拿来放电影的(虽然我很喜欢这个软件),而是一种算法.KMP算法是拿来处理字符串匹配的.换句 ...
- wps使用积累
1.word加批注: 选中文字--插入--批注
- const形参与非const形参
在程序设计中我们会经常调用函数,调用函数就会涉及参数的问题,那么在形参列表中const形参与非const形参对传递过来的实参有什么要求呢? 先来看一个简单的例子: #include <iostr ...
- jquery拖拽效果
<!doctype html><html lang="en"><head> <meta charset="utf-8" ...
- bug记录_signalr执行$.connnection.testhub结果为空
最后发现配置文件<appSettings>中多了一句<add key="owin:AutomaticAppStartup" value="false&q ...
- heap和stack的区别
参考<程序员面试宝典> 1.栈区(stack) 由编译器自动分配和释放,存放函数的参数值,局部变量值等.其操作方式类似于数据中的栈. 2.堆区(heap) 一般由程序员分配和释放,若程序员 ...
- Zeppelin使用spark解释器
Zeppelin为0.5.6 Zeppelin默认自带本地spark,可以不依赖任何集群,下载bin包,解压安装就可以使用. 使用其他的spark集群在yarn模式下. 配置: vi zeppelin ...