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& ...
随机推荐
- .net Quartz 服务 作业调度
.net项目中使用Quartz (1)在web.config中进行相关配置 <configSections> <section name="quartz" t ...
- 在线API大全
之前整理过几个经常使用api地址,在经常使用在线API集合博文中. 近期浏览网页的时候,又发现一个很完整的api的大全,分享出来,建议大家收藏起来,用的时候方便查询. 经常使用API文档索引http: ...
- EL与JSTL注意事项汇总
EL使用表达式(5一个 问题) JSTL使用标签(5问题) 什么是EL.它可以用做? EL全名Expression Language在JSP使用页面 格公式${表达式} 样例${requestScop ...
- HDU 3829 Cat VS Dog
题意: p个人 每一个人有喜欢和讨厌的动物 假设选出的动物中包括这个人喜欢的动物同一时候不包括他讨厌的动物那么这个人会开心 问 最多几个人开心 思路: 二分图最大独立集 利用人与人之间的冲突 ...
- Win7 补丁装不上怎么办？
检查系统盘文件系统是否出错: 打开管理员命令行程序(Win+R,输入 cmd 确认) 如果系统盘是 C 盘,命令行窗口输入 chkdsk C: /f 对提示输入’y’ 重启等待 系统文件检查: 打开管 ...
- HDU 5002 Tree
题意: 一棵树 支持删边加边.路径权值加值.路径权值改值.路径求第二大的数字和其个数 思路: LCT的第二题 题意已经把功能都告诉了 比較裸 要注意的是权值加值和改值两个操作的标记下放问题 要 ...
- Mysql 5.6 新特性
随笔,真的随笔,以后理解得更深了再修改. Index Condition Pushdown 更多的让存储引擎去处理Where语句中的条款,避免返回无关字段数据等: Multi-Range Re ...
- WCF分布式事务（EF）
才说分布式事务,首先,了解一下什么是交易. 事务有四个特性:ACID A是Atomicity,原子性.一个事务往往涉及到很多的子操作,原子性则保证这些子操作要么都做,要么都不做,而不至于出现事务的部分 ...
- AndroidUI的组成部分RoomButton
<!-- 知识点汇总: 1.Button与ImageButton的差别在于,Button生成的button上显示文字 而ImageButton上则显示图片.须要指出的是:为ImageButton ...
- ORACLE 创建表空间、用户、授权
1.创建表空间 create tablespace TEST logging datafile 'e:\app\administrator\oradata\orcl\TEST.dbf' size 1 ...