【每日一练】75—自定义选择菜单的实现练习-CSDN博客

写在前面

假期总是过得很快，今天就是这个国庆假期的最后一天了，明天我们的一切生活该回归正常，该上班就上班，该学习就学习，因此，我们需要收一收心了，工作学习才是生活常态，放假只是调味剂。

所以，我们今天继续来练习第75个小项目，一个自定义选择菜单，具体效果如下：

看完了最终效果，现在我们一起来看看实现代码。

HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>【每日一练】75—自定义选择菜单的实现练习</title>
</head>
<body>
  <div class="box">
    <div class="profile">
      <div class="imgBx">
        <img src="01.png">
      </div>
      <h4 class="text">web前端开发-公众号<br><span>网站：www.webqdkf.com</span></h4>
    </div>
    <ul class="menu">
      <li>
        <label>
          <span class="title"><ion-icon name="wifi"></ion-icon> Wi-Fi</span>
        <span class="action">
          <input type="checkbox">
          <i></i>
        </span>
        </label>
      </li>
      <li>
        <label>
          <span class="title"><ion-icon name="bluetooth"></ion-icon> 蓝牙</span>
        <span class="action">
          <input type="checkbox">
          <i></i>
        </span>
        </label>
      </li>
      <li>
        <label>
          <span class="title"><ion-icon name="airplane"></ion-icon> 飞行模式</span>
        <span class="action">
          <input type="checkbox">
          <i></i>
        </span>
        </label>
      </li>
      <li>
        <label>
          <span class="title"><ion-icon name="location"></ion-icon>位置</span>
        <span class="action">
          <input type="checkbox">
          <i></i>
        </span>
        </label>
      </li>
      <li>
        <label>
          <span class="title"><ion-icon name="moon"></ion-icon> 夜间模式</span>
        <span class="action">
          <input type="checkbox" id="dark">
          <i></i>
        </span>
        </label>
      </li>
    </ul>
  </div>
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
  <script>
    let body = document.querySelector('body');
    let dark = document.querySelector('#dark');


    dark.onclick = function(){
      if (dark.checked == true){
        body.classList.add('darkMode');
      } else {
        body.classList.remove('darkMode');
      }
    }
</script>
</body>
</html>

CSS代码：

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body 
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #fafafa;
  background: #f0f0f0;
  transition: 0.5s;
}
.darkMode 
{
  background: #222;
}
.box
{
  position: relative;
  padding: 30px;
  width: 300px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 30px 30px rgba(0,0,0,0.05);
  transition: 0.5s;
}
.darkMode .box 
{
  background: #292929;
}
.profile 
{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile .imgBx 
{
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}
.profile .imgBx img 
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile .text 
{
  font-weight: 500;
  color: #333;
  line-height: 1.2em;
} 
.darkMode .profile .text  
{
  color: #ddd;
}
.profile .text span 
{
  font-weight: 400;
  font-size: 0.85em;
  color: #555;
}
.darkMode .profile .text span
{
  color: #aaa;
}
.menu
{
  position: relative;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.darkMode .menu 
{
  border-top: 1px solid rgba(255,255,255,0.05);
}
.menu li 
{
  list-style: none;
  margin: 8px 0;
}
.menu li label 
{
  position: relative;
  display: flex;
  justify-content: space-between;
}
.menu li label span 
{
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  color: #777;
}
.darkMode .menu li label span  
{
  color: #aaa;
}
.menu li label span ion-icon 
{
  margin-right: 10px;
}
.menu li label .action 
{
  position: relative;
}
.menu li label .action input
{
  appearance: none;
}
.menu li label .action i 
{
  position: relative;
  width: 30px;
  height: 15px;
  border-radius: 15px;
  background: #ddd;
  transition: 0.5s;
}
.darkMode .menu li label .action i
{
  background: #666;
}
.menu li label .action input:checked ~ i
{
  background: #2aa0ff;
}
.menu li label .action i::before 
{
  content: '';
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: 0.5s;
}
.menu li label .action input:checked ~ i::before 
{
  left: calc(100% - 12.5px);
}

写在最后

以上就是我今天跟你分享的【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

学习更多技能

请点击下方公众号