<div class="wrap">
    <div class="header">
      <div class="btnGroup">
        <h3>背景色：</h3>
        <button class="btn btnBlack jq-black"></button>
        <button class="btn btnWhite jq-white"></button>
        <button class="btn btnYellow jq-yellow"></button>
      </div>
      <div class="fontSize">
        <button class="font jq-large">大</button>
        <button class="font jq-medium">中</button>
        <button class="font jq-small">小</button>
      </div>
    </div>

    <div class="main">
      <h2>經過刷新，立即。</h2>
      <p>
        滑鼠外掛提醒起來思想過了過去免費電影協助著名全部，下載手裡網遊不了穩定深刻回答此處感到下面姑娘都有，熱情本次工廠好了網站一級時期期間，日期基層幫助睡覺住了接到，屏東指南批准轉載使得聰明一部臺灣，資金自主春節全文只有人事專業開關朋友馬上什麼命運人才健康，效。
      </p>
      <p>
        滑鼠外掛提醒起來思想過了過去免費電影協助著名全部，下載手裡網遊不了穩定深刻回答此處感到下面姑娘都有，熱情本次工廠好了網站一級時期期間，日期基層幫助睡覺住了接到，屏東指南批准轉載使得聰明一部臺灣，資金自主春節全文只有人事專業開關朋友馬上什麼命運人才健康，效。
      </p>
      <p>
        滑鼠外掛提醒起來思想過了過去免費電影協助著名全部，下載手裡網遊不了穩定深刻回答此處感到下面姑娘都有，熱情本次工廠好了網站一級時期期間，日期基層幫助睡覺住了接到，屏東指南批准轉載使得聰明一部臺灣，資金自主春節全文只有人事專業開關朋友馬上什麼命運人才健康，效。
      </p>

    </div>
  </div>

body {
  font-family: "微軟正黑體";
}
.wrap {
  width: 600px;
  margin: 0 auto;
}

.header {
  background-color: gray;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 30px;
}
h2 {
  font-weight: bold;
  font-size: 24px;
  padding: 10px 0;
}
.btn {
  width: 50px;
  border: 1px solid #fff;
  margin-right: 5px;
  margin-left: 5px;
  outline: none;
  height: 20px;
}

.fontSize {
  margin-right: 5px;
  margin-left: 5px;
  outline: none;
  display: flex;
  align-items: center;
}
h2 {
  padding: 20px;
}
h3 {
  padding: 20px 0 20px 20px;
  color: #fff;
}

.main {
  height: 90vh;
}
p {
  padding: 10px 20px;
  line-height: 1.5;
}
.btn,
.fontSize {
  cursor: pointer;
}
.btnGroup {
  display: flex;
  align-items: center;

  p {
    color: #fff;
    margin-left: 10px;
    line-height: 1.5;
  }
  .btnBlack {
    background-color: #333333;
    &:hover {
      background: darken($color: #333333, $amount: 10%);
    }
  }
  .btnWhite {
    background-color: #eeeeee;
    &:hover {
      background: darken($color: #eeeeee, $amount: 10%);
    }
  }
  .btnYellow {
    background-color: #fff891;
    &:hover {
      background: darken($color: #fff891, $amount: 10%);
    }
  }
}

$(function () {
  //背景更改
  $(".jq-black").on("click", function (e) {
    event.preventDefault(); //取消預設行為
    $(".main").css({
      "background-color": "#333",
      color: "#fff"
    });
  });

  $(".jq-white").on("click", function (e) {
    event.preventDefault(); //取消預設行為
    $(".main").css({
      "background-color": "#eeeeee",
      color: "#333"
    });
  });

  $(".jq-yellow").on("click", function (e) {
    event.preventDefault(); //取消預設行為
    $(".main").css({
      "background-color": "#fff891",
      color: "#333"
    });
  });

  //文字大小更改
  $(".jq-large").on("click", function (e) {
    event.preventDefault(); //取消預設行為
    $("h2").css("font-size", "28px");
    $("p").css("font-size", "18px");
  });

  $(".jq-medium").on("click", function (e) {
    event.preventDefault(); //取消預設行為
    $("h2").css("font-size", "24px");
    $("p").css("font-size", "16px");
  });

  $(".jq-small").on("click", function (e) {
    event.preventDefault(); //取消預設行為
    $("h2").css("font-size", "20px");
    $("p").css("font-size", "12px");
  });
});