纯css完成选定切换实际效果的示例

日期:2021-01-20 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

近期不太忙,多写几篇文章内容。许多情况下大家用js来完成视觉效果实际效果,实际上无需那末不便,把握1些常见的css专业知识能让你事倍功半,这篇文章内容讲的是应用纯css来完成1个目录项的选定实际效果,期待对你有一定的协助

先上连接,点一下预览https://codepen.io/Ritr/pen/Bgqemr

完成这个实际效果只必须简易3步走:

0:写1个简易的目录,而且原始化css

html编码

<p>你喜爱哪样新鲜水果</p>
<ul>
  <li>
    <label for="banana">      
      <input type="radio" id="banana" name="fruit">     
      <span>香蕉</span>
    </label>    
  </li>
  <li>
    <label for="apple">      
      <input type="radio" id="apple" name="fruit">    
      <span>iPhone</span>
    </label>    
  </li>
  <li>    
    <label for="orange">      
      <input type="radio" id="orange" name="fruit">      
      <span>橘子</span>
    </label>    
  </li>
</ul>

css编码

ul,li{
  list-style-type:none;
}
ul{
  border:1px solid #000;
  padding:5px;
  width:200px;
}
li{
  margin:2px;
  background:#ccc;
}

1:应用css挑选器,挑选总体目标。假如你想对一些元素加上一些视觉效果实际效果的情况下,最先选定它,再写1些特殊的css以差别于别的元素

input:checked + span{
  color:#F66;
  font-weight:bold;
  background:#ff0;
}

2:掩藏radio,radio默认设置是个小圈圈,大家先把它掩藏起来,具体上会根据label标识的for特性来完成对radio的选定

input[type="radio"]{
  display:none;
}

3:提升款式,这样会骚微漂亮1点点

li label,
li label span{
  display:inline-block;
  width:100%;
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:CSS高級技能:网页页面合理布局 返回下一篇:没有了