css布局之选择切换按钮
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<style>
.btn-change{
width: 120px;
height: 40px;
border-radius: 20px;
border: 1px solid #dedede;
font-size: 1.3em;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.btn-dot{
height: 40px;
width: 40px;
background-color: #dedede;
border-radius: 20px;
position: absolute;
z-index: 99;
} .btn-left{
background-color:#74B700;
position: absolute;
width: 100px;
height: 40px;
line-height: 40px;
left: -80px;
color: #fff;
text-align: left;
padding-left: 40px;
} .btn-move{
position: absolute;
left:0;
-webkit-transition: all .3s;-moz-transition: all .3s;transition: all .3s;
} .switch.btn-move{
left:80px;
}
.btn-right{
background-color: #ebebeb;
position: absolute;
width: 100px;
height: 40px;
line-height: 40px;
text-align: left;
padding-left: 20px;
left: 20px;
color: #333;
} </style>
<body>
<div class="btn-change">
<div class="btn-move">
<div class="btn-left">关注</div>
<div class="btn-dot"></div>
<div class="btn-right">未关注</div>
</div>
</div>
</body>
</html>
<script src="jquery-1.10.2.js"></script>
<script>
$(function(){
$(".btn-move").click(function(){
$(this).toggleClass("switch");
})
})
</script>
效果图：
css布局之选择切换按钮的更多相关文章
- 纯css实现checkbox开关切换按钮
我们都知道 checkbox 标签默认样式 实在是太low了,故对CheckBox美化很有必要. 现提供两种方式对其进行美化. 方法一 <div class="switch-wrap ...
- 不同CSS布局实现与文字鼠标选择的可用性——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2401 一.文字选择的 ...
- [Bootstrap]7天深入Bootstrap(3)CSS布局
Bootstrap三大核心内容的基础,即基础的CSS 布局语法.其包括基础排版(Typography).代码(Code).表 格(Tables).表单(Forms).按钮(Buttons).图片 (I ...
- 深入css布局篇(1) — 盒模型 & 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- 可缺省的CSS布局——张鑫旭
一.技术不难.意识很难 有些东西的东西的实现,难的不是原料.技术:而是想不到,或者说意识不到. 例如下面这个简单而又神奇的魔术: 是吧.搞通了,才发现,哦~原来这么回事,很简单的嘛,我也可以实现的!其 ...
- C# PDF Page操作——设置页面切换按钮 C# 添加、读取Word脚注尾注 C#为什么不能像C/C++一样的支持函数只读传参 web 给大家分享一个好玩的东西，也许你那块就用的到
C# PDF Page操作——设置页面切换按钮 概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者 ...
- 用CSS实现Tab页切换效果
用CSS实现Tab切换效果 最近切一个页面的时候涉及到了一个tab切换的部分,因为不想用js想着能不能用纯CSS的选择器来实现切换效果.搜了一下大致有下面三种写法. 利用:hover选择器 缺点:只有 ...
- Python之路-python(css布局、JavaScript)
CSS布局 JavaScript css布局: 后台管理界面一:(左右标签都有下来菜单) 利用position: absolute;让某个标签固定在具体位置,然后使用overflow: auto;属性 ...
- 利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
随机推荐
- web项目启动，运行方法
1.显示器(Listener) web文件加入 <listener> <listener-class>cn.ro.common.InitListener</li ...
- [渣译文] SignalR 2.0 系列：SignalR的高频实时通讯
原文:[渣译文] SignalR 2.0 系列:SignalR的高频实时通讯 英文渣水平,大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with ASP.N ...
- Post数据到 https异常:基础连接已经关闭: 连接被意外关闭 解决办法
POST数据到HTTPS站点的时候需要设置ServicePointManager类的ServerCertificateValidationCallback属性,并且在POST到https://pass ...
- 开源Math.NET基础数学类库使用(04)C#解析Matrix Marke数据格式
原文:[原创]开源Math.NET基础数学类库使用(04)C#解析Matrix Marke数据格式 开源Math.NET基础数学类库使用系列文章总目录: 1.开源.NET基础数学计算组件Math. ...
- ListView 实现多选/无线电
ListView本身与无线电.多选模式.由listview.setChoiceMode设置: listview.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE) ...
- executeBatch()相关操作汇总
环境:oracle使用PreparedStatement的executeBatch方法,如果DML操作成功,返回值[-2,-2,...]an array of update counts contai ...
- ios新开发语言swift 新手教程
http://gashero.iteye.com/blog/2075324 视频教程:http://edu.51cto.com/lesson/id-26464.html
- Team Foundation Server 2015使用教程--新增权限为读取器的团队
- atitit.无损传输二进制数据串传输网络
atitit.无损传输二进制数据串传输网络 1. gbk的网络传输问题,为什么gbk不能使用来传输二进制数据 1 2. base64 2 3. iso-8859-1 (推荐) 2 4. utf-8 ...
- linux sdio card睡眠治疗 sdio card removed解决方案
近期调试几款sdio card suspend时都会出现sdio card removed,之后 要么死机要么模块不能正常工作.根本原因也就是休眠没有处理好.昨天最终找到了 解决方法. 1:host端 ...