<div class="wrap">
  <div class="header">
    <ul class="menu">
      <li>
        <a href="#" class="big">大</a>
      </li>
      <li><a href="#" class="medium">中</a></li>
      <li><a href="#" class="small">小</a></li>
    </ul>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p>
    v
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo tempora corporis animi, dolorum at est nihil officia fugiat nisi, quos beatae velit rem ea error? Delectus sequi repellendus illum in.</p>
  </div>
  <div class="hint">
    <a href="#"class="close">關閉</a>
    <p>謝謝你喜歡我們的內容</p>
  </div>
</div>

.wrap{
  max-width:900px;
  margin:0 auto;
}
.header{
  background:pink;
}
.menu{
  display:flex;
  justify-content:flex-end;
}
.menu>li{
  width:25%;
  text-align:center;
  border:1px solid black;
  padding-top:10px;
  padding-bottom:10px;
  font-size:30px;
  font-weight:600;
}
.menu>li>a{
  display:block;
  text-decoration: none;
}
.content{
  font-size: 30px;
}
.hint{
  width: 300px;
  height: 200px;
  background:black;
  position:fixed;
  bottom:0;
  left:0;
  color: white;
}
.hint p{
  text-align:center;
  margin-top:60px;
}
.close{
  text-decoration:none;
  color:white;
  background:red;
  padding:5px;
  display:block;
  width:15%;
  position:absolute;
  right:0;
  text-align:center;
}
$(document).ready(function(){
 $('a').click(function(e){
   e.preventDefault();
   let word = e.target.textContent;
   switch(word){
     case '小':
       $('.content').css('font-size', '12px');
      break;
       case '中':
       $('.content').css('font-size', '14px');
      break;
       case '大':
       $('.content').css('font-size', '20px');
      break;
   }
   
 })
 $('.close').click(function(){
   $('.hint').hide();
 }) 
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js