label,labelled,labeled这三个词有啥关系和分别呢?

发布网友发布时间：2022-05-01 14:26

共2个回答

懂视网时间：2022-05-19 12:40

代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .ipt {
 display: none;
 }
 .box {
 width: 74px;
 height: 30px;
 line-height: 30px;
 overflow: hidden;
 border: 1px solid #eee;
 border-radius: 4px;
 position: relative;
 cursor: pointer;
 }
 label {display:inline-block;}
 .ipt:checked + .box .switch-btn {
 left: 0;
 }
 .switch-btn {
 position: absolute;
 left: -37px;
 top: 0;
 width: 111px;
 height: 30px;
 transition: all 0.5s;
 }
 .switch-btn span{
 width: 37px;
 height: 30px;
 display: block;
 text-align: center; 
 float: left;
 font-size: 14px;
 }
 .on {
 background: #52B13C;
 color: white;
 }
 .white {
 background: white;
 }
 .off {
 background: #EEEEEE;
 }
 </style>
</head>
<body>
 <p>主要使用label+input来实现改变left的值,下面是核心代码，意思就是<code>选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px);</code></p>
 <pre>
 .ipt:checked + .box .switch-btn {
 left: 0;
 }
 </pre>
 <p>当然要配合transition来实现</p>
 <p>下面是效果</p>
 <div class="wrap">
 <label>
 <input class="ipt" type="checkbox" name="" value="">
 <div class="box">
 <div class="switch-btn">
  <span class="on">ON</span>
  <span class="white"></span>
  <span class="off">OFF</span>
 </div>
 </div>
 </label>
 </div>
 <p>全部css代码</p>
 <pre>
 .ipt {
 display: none;
 }
 .box {
 width: 74px;
 height: 30px;
 line-height: 30px;
 overflow: hidden;
 border: 1px solid #eee;
 border-radius: 4px;
 position: relative;
 cursor: pointer;
 }
 .ipt:checked + .box .switch-btn {
 left: 0;
 }
 .switch-btn {
 position: absolute;
 left: -37px;
 top: 0;
 width: 111px;
 height: 30px;
 transition: all 0.5s;
 }
 .switch-btn span{
 width: 37px;
 height: 30px;
 display: block;
 text-align: center; 
 float: left;
 font-size: 14px;
 }
 .on {
 background: #52B13C;
 color: white;
 }
 .white {
 background: white;
 }
 .off {
 background: #EEEEEE;
 }
 </pre>
</body>
</html>

以上这篇label+input实现按钮开关切换效果的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

热心网友时间：2022-05-19 09:48

1、label 本身是名词,意思是“标签”.也可以转化为动词,意思变成（贴标签于.../给...作出标注）,还可以引申为“把...归类”、“称为/列为”.如：
The bottle is labelled "Poison".瓶上标明“有毒”.
We label them Yuppies.我们把他们称为雅皮士.
注：英语有三种构词法,即转化、缀法和合成.所谓的转化就是由一种词性转化为另种一词性.名词转化为动词是转化中的重要一项.另如：water（给...浇水）,book（把...登入册子）
2、labelled 和 labeled 都是 label 转化后的动词过去式和过去分词,labelled 是英式拼写,labeled 是美式拼写.
注：以字母 l 结尾的动词,英国英语要求双写 l 后再加后缀 ed,美国英语则简化了这种拼写而直接在 l 后加 ed.另如：travelled/traveled.
3、既然 labelled 和 labeled 是过去分词,因此又可以转化为表示状态的形容词,意思是“带有记号的/标记的/贴有标签的”,用来修饰名词或充当表语,如：
a label(l)ed bottle 贴有标签的瓶子
The bottle is labeled.瓶子贴上了标签.