其他
【每日一练】75—自定义选择菜单的实现练习
写在前面
假期总是过得很快，今天就是这个国庆假期的最后一天了，明天我们的一切生活该回归正常，该上班就上班，该学习就学习，因此，我们需要收一收心了，工作学习才是生活常态，放假只是调味剂。
所以，我们今天继续来练习第75个小项目，一个自定义选择菜单，具体效果如下：
<!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>
*{ 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);}写在最后
以上就是我今天跟你分享的【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号