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& ...
随机推荐
- PHP情人：p十几天来学习hp第一天
我这里是暂时的 Apache web server 和 MY SQL 如WEB,在php-4.3.3下的环境做的程序.当然要简单的构建和訪问查看数据库 PHPMYADMIN 不可少. 以下简介一下P ...
- T-Sql（一）简单语法
原文:T-Sql(一)简单语法 Sql Server是鄙人学习的第一种数据库,对Sql Server有一种特别的情感,下面就说一下Sql Server的简单语法,适用初学者. 1,创建数据库creat ...
- [渣译文] SignalR 2.0 系列：SignalR的高频实时通讯
原文:[渣译文] SignalR 2.0 系列:SignalR的高频实时通讯 英文渣水平,大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with ASP.N ...
- 上curl java 模拟http请求
最近,我的项目要求java模拟http请求,获得dns解决 tcp处理过的信息特定的连接. java api提供urlConnection apache提供的httpClient都不能胜任该需求,二次 ...
- [webapi] 如何在查看api时 显示api的说明
首先在Controller的方法中 写上相关注释,如下图 然后 右击webapi项目点属性.按照下图选择 红色框中内容要保持一致 然后保存. 在项目中找到到这个文件Areas/HelpPage/App ...
- iOS 在下面 AOP 程序
iOS 在下面 AOP 程序 概念 在软件业.AOP对于Aspect Oriented Programming缩写,手段:面向方面的编程.它是一种函数式编程张燕生风扇类型.通过这样一个技术方案功能的预 ...
- jQuery整理笔记9----函数形式发展
在一些照片中使用演示样本.插入.样式文件下载:点我进入下载 过去在开发过程中关于table方面的jquery应用不过局限于使用jquery操作table添加一行.删除一列等等操作.今天整理的跟过去用的 ...
- 大教堂与集市(The Cathedral and the Bazaar)读书笔记
大教堂与集市The Cathedral and the Bazaar,一本不像计算机方面的计算机书籍 命令式管理,适合和奴隶共事目标共识型管理,适合和自由人共事 心性气层 只要眼多,bug好找 黑客开 ...
- 第七章——DMVs和DMFs（4）——用DMV和DMF监控磁盘IO
原文:第七章--DMVs和DMFs(4)--用DMV和DMF监控磁盘IO 前言: 本文为本系列最后一篇,作为DBA,你必须经常关注磁盘的I/O问题,一旦出现问题,要尽快分析出是什么问题.SQLServ ...
- hdu 3076 ssworld VS DDD (概率dp)
///题意: /// A,B掷骰子,对于每一次点数大者胜,平为和,A先胜了m次A赢,B先胜了n次B赢. ///p1表示a赢,p2表示b赢,p=1-p1-p2表示平局 ///a赢得概率 比一次p1 两次 ...