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& ...
随机推荐
- uva10341 - solve it (二分查找）
题目:uva10341-solve it 题目大意:求解给定的方程式解题思路:由于这个方程式在给定的x的范围内是单调递减的.所以能够用二分查找来尝试x的值.这里的 x是要求保留4小数,所以当区间缩小到 ...
- c# 操作 MongoDB 的 第三方类库 MongoRepository
https://github.com/RobThree/MongoRepository 文档 https://github.com/RobThree/MongoRepository/wiki/Docu ...
- poj 1061 扩展欧几里德同余方程求解
摘要写在一瞪眼. #include<iostream> using namespace std; long long exgcd(long long a,long long b,long ...
- VB高清图标制作方法
我隆重介绍一个软件:ResHacker !!! 这个软件可以修改软件的很多东西包括图标和标题,下面看**作. 运行ResHacker打开要更改图标的exe文件, 图标组--1--右键0--替换资源-- ...
- Python调用微博API
上头叫通过微博ID获取用户公布过的历史微博内容,于是研究了下新浪微博提供的API 1 首先在微博开放中心下"创建应用"创建一个应用,应用信息那些随便填,填写完成后,不须要提交审核, ...
- Notification和Activity交互
概述 通知(Notification)就是程序在不影响用户操作的情况下,通过手机顶部弹出消息告诉用户的一种信息通知方式,而且能够通过下拉通知操作抽屉通知,实现Notification与活动.通知和服务 ...
- 面向服务的架构（SOA）
SOA架构基础概念 面向服务的架构(SOA) 在深入探讨什么是面向服务的架构(SOA)之前,先建立一些基本的概念和术语的基本描述而非严格定义,所以也许有些定义在业内还存留争议,此处暂且忽略. 架构基础 ...
- ignore,neglect,omit,overlook
一:简介——ignore :通常指有意不顾,或不理显而易见的事物.neglect :侧重指有意的忽略或忽视,也可指粗心与疏忽.omit :指有意或无意地忘记做某事,也指删去被视作不重要.不合意的东西. ...
- 跨容器Hybrid离线组件方案
关键词:跨容器.Hybrid.离线 摘要:今天主要讨论的是离线组件跨容器方案,想了解在线页面如何跨webview容器,可以看 http://www.cnblogs.com/yexiaochai/p/5 ...
- ruby 删除文件夹（包括文件夹中的文件夹和文件）
def deleteDirectory(dirPath) if File.directory?(dirPath) puts "是文件夹"; Dir.foreach(dirPath) ...