案例 checkbox

用 css 实现 checkbox

<div class="custom-checkbox">
  <input type="checkbox" id="myCheckbox" />
  <label for="myCheckbox">我是大帅逼</label>
</div>

.custom-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 30px auto;
  width: 200px;
  font-size: 20px;
}

.custom-checkbox input[type="checkbox"] {
  display: none;
}

.custom-checkbox label {
  padding-left: 27px;
  background: url("https://imooc-164-code.vercel.app/chapter3/checkbox1.png") left center no-repeat;
  background-size: 25px 25px;
  cursor: pointer;
}

.custom-checkbox input[type="checkbox"]:checked + label {
  background-image: url("https://imooc-164-code.vercel.app/chapter3/checkbox2.png");
}

用 css 实现 tabs

<div class="tabs">
  <div class="tab" id="tab1" onmousemove="openTab('tab1')">选项卡 1</div>
  <div class="tab" id="tab2" onmousemove="openTab('tab2')">选项卡 2</div>
  <div class="tab" id="tab3" onmousemove="openTab('tab3')">选项卡 3</div>

  <div class="content">
    <div class="tab-content" id="tab-content1">我是选项卡 1 的内容</div>
    <div class="tab-content" id="tab-content2">我是选项卡 2 的内容</div>
    <div class="tab-content" id="tab-content3">我是选项卡 3 的内容</div>
  </div>
</div>

.tabs {
  display: flex;
  flex-wrap: wrap;

  margin: 20px auto;
  width: 602px;
  height: 150px;
  border: 1px solid #ccc;
  box-sizing: content-box;
}

.tab {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 200px;
  height: 36px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background-color: #f1dddd;
  cursor: pointer;
}

.tab:nth-of-type(3) {
  border-right: none;
}

.tab-content {
  display: none;
  margin-left: 20px;
}

function openTab(tabName) {
  var i, tabContent;
  tabContent = document.getElementsByClassName("tab-content");
  for (i = 0; i < tabContent.length; i++) {
    tabContent[i].style.display = "none";
    document.getElementById("tab" + (i + 1)).style.backgroundColor = "#f1dddd";
  }
  document.getElementById("tab-content" + tabName[tabName.length - 1]).style.display = "block";
  document.getElementById(tabName).style.backgroundColor = "#fff";
}

用 css 实现 tree menu

Pure CSS collapsible tree menu | The CSS Ninja

<div class="container">
  <h2>Tree Menu</h2>
  <hr />
  <div class="tree">
    <ol class="file-tree">
      <li class="folder">
        <input type="checkbox" disabled id="folder1" />
        <label for="folder1">Folder 1</label>
        <ol>
          <li class="file">
            <input type="checkbox" id="file11" />
            <label for="file11">File 1-1</label>
          </li>
          <li class="subfolder">
            <input type="checkbox" id="subfolder12" />
            <label for="subfolder12">Subfolder 1-2</label>
            <ol>
              <li class="file">
                <input type="checkbox" id="file121" />
                <label for="file121">Subfile 1-2-1</label>
              </li>
              <li class="file">
                <input type="checkbox" id="file122" />
                <label for="file122">Subfile 1-2-2</label>
              </li>
            </ol>
          </li>
          <li class="file">
            <input type="checkbox" id="file13" />
            <label for="file13">File 1-3</label>
          </li>
          <li class="file">
            <input type="checkbox" id="file14" />
            <label for="file14">File 1-4</label>
          </li>
          <li class="file">
            <input type="checkbox" id="file15" />
            <label for="file15">File 1-5</label>
          </li>
        </ol>
      </li>
      <li class="folder">
        <input type="checkbox" id="folder2" />
        <label for="folder2">Folder 2</label>
        <ol>
          <li class="file">
            <input type="checkbox" id="file21" />
            <label for="file21">File 2-1</label>
          </li>
          <li class="file">
            <input type="checkbox" id="file22" />
            <label for="file22">File 2-2</label>
          </li>
          <li class="file">
            <input type="checkbox" id="file23" />
            <label for="file23">File 2-3</label>
          </li>
        </ol>
      </li>
      <li class="folder">
        <input type="checkbox" checked id="folder3" />
        <label for="folder3">Folder 3</label>
        <ol>
          <li class="file">
            <input type="checkbox" id="file31" />
            <label for="file31">File 3-1</label>
          </li>
          <li class="file">
            <input type="checkbox" id="file32" />
            <label for="file32">File 3-2</label>
          </li>
          <li class="file">
            <input type="checkbox" id="file33" />
            <label for="file33">File 3-3</label>
          </li>
        </ol>
      </li>
      <li class="file">
        <input type="checkbox" id="file4" />
        <label for="file4">File 4</label>
      </li>
      <li class="file">
        <input type="checkbox" id="file5" />
        <label for="file5">File 5</label>
      </li>
      <li class="file">
        <input type="checkbox" id="file6" />
        <label for="file6">File 6</label>
      </li>
    </ol>
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 350px;
  margin: 20px auto;
  padding: 20px;
  background: #f2f2f2;
  border-radius: 10px;
  font-size: 18px;
}

h2 {
  margin: 0;
}

hr {
  margin: 20px 0;
  color: #ccc;
}

.file-tree {
  padding-left: 0;
}

.folder,
.subfolder,
.file {
  list-style: none;
  margin-bottom: 5px;
}

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

.folder > label,
.subfolder > label,
.file > label {
  cursor: pointer;
}

.file > label {
  padding-left: 25px;
  background: url("https://s2.loli.net/2023/09/25/nvlEMFJ91UomtGL.png") left center no-repeat;
  background-size: 20px 20px;
}

.folder > input + label,
.subfolder > input + label {
  padding-left: 25px;
  background: url("https://s2.loli.net/2023/09/25/jlvE94XqIwDoNyc.png") left center no-repeat;
  background-size: 18px 18px;
}

.folder > input:checked + label,
.subfolder > input:checked + label {
  /* background-image: url("https://s2.loli.net/2023/09/25/1xXDGhQJmgu7I9U.png"); */
  background-image: url("https://s2.loli.net/2023/09/25/BMjcyxJkwmVqzHo.png");
  background-size: 20px 20px;
}

.folder > input:checked ~ ol,
.subfolder > input:checked ~ ol {
  display: none;
}