---
# System prepended metadata

title: html

---

## Html
```
<!DOCTYPE html>
<html>
<head>
    <script src="./ /.js"></script>

    <link 
      href="http://fonts.googleapis.com/css?family=Noto+Sans+TC" 
      rel="stylesheet" 
      type="text/css" 
     />
    <meta charset="utf-8" />
    <title>My page</title>
    <link href="./styles/styles.css" rel="stylesheet" type="text/css" />
    
</head>

<body>
    <h2>呂彥青 58</h2>
    
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTpxKNHqG0LOrumcqIIkErFGuYyDOSammiOc5PkTx5872_jHXaW" alt="My test image" />
    <p>中信兄弟  投手</p>
    <UL>
        <li>1996/03/10</li>
        <li>投打習慣︰左投左打</li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        

    </UL>
    <a href="https://www.cpbl.com.tw/team/person?Acnt=0000003639">
    ～中職呂彥青網頁～
        
    </a>
</body>

</html>
```
## CSS
```
p,li,a,h2
{
    color:yellow;
}
html {
    font-family: 'Noto Sans TC', sans-serif;
}
h2 {
    font-size: 60px;
    text-align: center;
  }
  
  p,
  li {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 1px;
  }
body{/* The image used */
    background-image: url("../images/中信兄弟.png");
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;}
img {
        height: 900px;
        display: block;
        margin: 0 auto;
    }
```
## html


---
https://codepen.io/tzuyou/pen/zYMRpPz

福來喜4
捕手
右投右打
1989/10/12
圖片
https://cdn4.phootime.com/1/i7mcps/bzjvkm/640/2022_04-%E7%A6%8F%E4%BE%86%E5%96%9C-%284%29.jpg?1655719652
網址
https://www.cpbl.com.tw/team/person?acnt=0000006430


江坤宇90
游擊手
右投右打
2000/07/04
中信兄弟2018年第三輪
圖片
https://images.chinatimes.com/newsphoto/2022-11-06/656/20221106003295.jpg
網址
https://www.cpbl.com.tw/team/person?acnt=0000004636


陳子豪1
右外野手
左投左打
1995/07/29
兄弟象2013年第二輪
圖片
https://imgs.tsna.com/article/1635146091_R4Uau.jpg
網址https://www.cpbl.com.tw/team/person?acnt=0000000743

張志豪7
中外野手
右投左打
1987/05/15
兄弟象2009年第二輪
圖片
https://media.nownews.com/nn_media/thumbnail/2023/06/1686324321432-cc9d48e648b64b94bff266de68c007be-800x540.jpg?unShow=false
網址
https://www.cpbl.com.tw/team/person?acnt=0000003183



詹子賢39
左外野手
右投右打
1994/02/24
中信兄弟2016年第二輪
圖片
https://img.ltn.com.tw/Upload/sports/page/800/2023/06/18/220.jpg
網址
https://www.cpbl.com.tw/team/person?acnt=0000002297

許基宏74
一壘手
右投左打
1992/07/22
中信兄弟2014年第二輪
圖片
https://images.chinatimes.com/newsphoto/2022-04-04/656/BS1A00_P_01_02.jpg
網址
https://www.cpbl.com.tw/team/person?acnt=0000001119

王威晨9隊長
三壘手
右投左打
1991/07/03
中信兄弟2015年第十三輪
圖片
https://images.chinatimes.com/newsphoto/2022-10-31/656/20221031003793.jpg
網址
https://www.cpbl.com.tw/team/person?acnt=0000000929

岳東華98
二壘手
右投左打
1995/10/19
中信兄弟2017年第一輪
圖片
https://media.zenfs.com/zh-tw/ltsports.com.tw/bcbc7c144baded6e8153a7de2cc6d52a
網址
https://www.cpbl.com.tw/team/person?acnt=0000002291

曾頌恩32
指定打擊
右投右打
2000/01/08
中信兄弟2019年第三輪
圖片
https://s.yimg.com/ny/api/res/1.2/776k8xP7p.nd_tYzsfVzJg--/YXBwaWQ9aGlnaGxhbmRlcjt3PTY0MDtoPTU1Mw--/https://media.zenfs.com/ko/nownews.com/4da351fc1c2f0c7000951a857fefff36
網址
https://www.cpbl.com.tw/team/person?acnt=0000005569


---
# html
```
<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <head>
        <script src="script.js"></script>
    </head>
    <body>
        <button id="showButton">球員</button>
        <link href="/style.css" rel="stylesheet" type="text/css" />
        <div class="card-container" id="cardContainer">
            <div class="box">
                <div class="top">
                <h2 class="name">呂彥青 58<span class="smallText">中信兄弟－投手</span></h2>
                <div class="tag"></div><!-- <div class="cirButton"></div>-->
            </div>
            <div class="bottom">
                <ul>
                    <li>
                        <h3>生日：</h3>1996/03/10
                    </li>
                    <li>
                        <h3>投打習慣︰</h3>左投左打
                    </li>
                    <li>
                        <h3>選秀順位：</h3>中信兄弟2021年第一輪<br />
                    </li>
                </ul>
            <div class="button"><a class="btn btnWebsite" href="https://www.cpbl.com.tw/" target="_blank">前往網站</a><a class="btn btnNews" href="https://www.cpbl.com.tw/team/person?Acnt=0000003639" target="_blank">更多訊息</a></div>
                </div>
            </div>
            <div class="box">
                <div class="top2">
                    <h2 class="name">福來喜4<span class="smallText">捕手</span></h2>
                    <div class="tag"></div><!-- <div class="cirButton"></div>-->
                </div>
                <div class="bottom">
                    <ul>
                        <li>
                            <h3>生日：</h3>1989/10/12
                        </li>
                        <li>
                            <h3>投打習慣︰</h3>右投右打
                        </li>
                        <li>
                            <h3>選秀順位：</h3>X<br />
                        </li>
                    </ul>
                    <div class="button"><a class="btn btnWebsite" href="https://www.cpbl.com.tw/" target="_blank">前往網站</a><a class="btn btnNews" href="https://www.cpbl.com.tw/team/person?acnt=0000006430" target="_blank">更多訊息</a></div>
                    </div>
            </div>
            <div class="box">
                <div class="top3">
                    <h2 class="name">江坤宇90<span class="smallText">游擊手</span></h2>
                    <div class="tag"></div><!-- <div class="cirButton"></div>-->
                </div>
                <div class="bottom">
                    <ul>
                        <li>
                            <h3>生日：</h3>2000/07/04
                        </li>
                        <li>
                            <h3>投打習慣︰</h3>右投右打
                        </li>
                        <li>
                            <h3>選秀順位：</h3>中信兄弟2018年第三輪<br />
                        </li>
                    </ul>
                <div class="button"><a class="btn btnWebsite" href="https://www.cpbl.com.tw/" target="_blank">前往網站</a><a class="btn btnNews" href="https://www.cpbl.com.tw/team/person?acnt=0000004636" target="_blank">更多訊息</a></div>
                    </div>
                    </div>
                    <div class="box">
                        <div class="top4">
                            <h2 class="name">陳子豪1<span class="smallText">右外野手</span></h2>
                            <div class="tag"></div><!-- <div class="cirButton"></div>-->
                        </div>
                        <div class="bottom">
                            <ul>
                                <li>
                                    <h3>生日：</h3>1995/07/29
                                </li>
                                <li>
                                    <h3>投打習慣︰</h3>左投左打
                                </li>
                                <li>
                                    <h3>選秀順位：</h3>兄弟象2013年第二輪<br />
                                </li>
                            </ul>
                        <div class="button"><a class="btn btnWebsite" href="https://www.cpbl.com.tw/" target="_blank">前往網站</a><a class="btn btnNews" href="https://www.cpbl.com.tw/team/person?acnt=0000000743" target="_blank">更多訊息</a></div>
                            </div>
                        </div>
                        <div class="box">
                            <div class="top5">
                                <h2 class="name">張志豪7<span class="smallText">中外野手</span></h2>
                                <div class="tag"></div><!-- <div class="cirButton"></div>-->
                            </div>
                            <div class="bottom">
                                <ul>
                                    <li>
                                        <h3>生日：</h3>1987/05/15
                                    </li>
                                    <li>
                                        <h3>投打習慣︰</h3>右投左打
                                    </li>
                                    <li>
                                        <h3>選秀順位：</h3>兄弟象2009年第二輪<br />
                                    </li>
                                </ul>
                            <div class="button"><a class="btn btnWebsite" href="https://www.cpbl.com.tw/" target="_blank">前往網站</a><a class="btn btnNews" href="https://www.cpbl.com.tw/team/person?acnt=0000003183" target="_blank">更多訊息</a></div>
                                </div>
                            </div>
                            <div class="box">
                                <div class="top6">
                                    <h2 class="name">詹子賢39<span class="smallText">左外野手</span></h2>
                                    <div class="tag"></div><!-- <div class="cirButton"></div>-->
                                </div>
                                <div class="bottom">
                                    <ul>
                                        <li>
                                            <h3>生日：</h3>1994/02/24
                                        </li>
                                        <li>
                                            <h3>投打習慣︰</h3>右投右打
                                        </li>
                                        <li>
                                            <h3>選秀順位：</h3>中信兄弟2016年第二輪<br />
                                        </li>
                                    </ul>
                                <div class="button"><a class="btn btnWebsite" href="https://www.cpbl.com.tw/" target="_blank">前往網站</a><a class="btn btnNews" href="https://www.cpbl.com.tw/team/person?acnt=0000002297" target="_blank">更多訊息</a></div>
                                    </div>
                                </div>
                                <div class="box">
                                    <div class="top7">
                                        <h2 class="name">王威晨9隊長<span class="smallText">三壘手</span></h2>
                                        <div class="tag"></div><!-- <div class="cirButton"></div>-->
                                    </div>
                                    <div class="bottom">
                                        <ul>
                                            <li>
                                                <h3>生日：</h3>1991/07/03
                                            </li>
                                            <li>
                                                <h3>投打習慣︰</h3>右投左打
                                            </li>
                                            <li>
                                                <h3>選秀順位：</h3>中信兄弟2015年第十三輪<br />
                                            </li>
                                        </ul>
                                    <div class="button"><a class="btn btnWebsite" href="https://www.cpbl.com.tw/" target="_blank">前往網站</a><a class="btn btnNews" href="https://www.cpbl.com.tw/team/person?acnt=0000000929" target="_blank">更多訊息</a></div>
                                        </div>
                                    </div>
                                    <div class="box">
                                        <div class="top8">
                                            <h2 class="name">岳東華98<span class="smallText">二壘手</span></h2>
                                            <div class="tag"></div><!-- <div class="cirButton"></div>-->
                                        </div>
                                        <div class="bottom">
                                            <ul>
                                                <li>
                                                    <h3>生日：</h3>1995/10/19
                                                </li>
                                                <li>
                                                    <h3>投打習慣︰</h3>右投左打
                                                </li>
                                                <li>
                                                    <h3>選秀順位：</h3>中信兄弟2017年第一輪<br />
                                                </li>
                                            </ul>
                                        <div class="button"><a class="btn btnWebsite" href="https://www.cpbl.com.tw/" target="_blank">前往網站</a><a class="btn btnNews" href="https://www.cpbl.com.tw/team/person?acnt=0000000929" target="_blank">更多訊息</a></div>
                                            </div>
                                        </div>
        </div>
    </body>
</hTml>
```


---

# Css
```
#showButton {
    padding: 10px 20px;
    background-color: #fff;
    border: 2px solid #ff0000;
    border-radius: 50%;
    color: #ff4242;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
  }
  
  #showButton:hover {
    background-color: #ff0000;
    color: #fff;
  }
  .card-container {
    display: flex;
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    justify-content: center;
  }
  
  .card-title {
    font-size: 18px;
    color: #333;
  }
  
  .card-content {
    font-size: 14px;
    color: #555;
  }
  /* * { */
    /*   border: solid 2p
  /* 卡片內容 */
  #cardContainer {
    position:relative;
    background: #fff;
    display: none;
    margin: 0;
    height: 100%;
    width: 100%;
    font-size: 14px;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
  }
  a {
    color: initial;
    text-decoration: initial;
  }
  .box {
    width: 400px;
    background-color: #fff;
    box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.3);
    transition: 0.5s;
    border: solid 2px #3f3f3f;
  }
  .box:hover {
    box-shadow: 7px 7px 75px rgba(0, 0, 0, 0.5);
    transform: translate(-7px, -7px);
  }
  .top,.top2,.top3,.top4,.top5,.top6{
    height: 330px;
    position: relative;
    background-size: cover;
  }
  .top{
    background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTpxKNHqG0LOrumcqIIkErFGuYyDOSammiOc5PkTx5872_jHXaW);
  }
  .top2{
    background-image: url(https://cdn4.phootime.com/1/i7mcps/bzjvkm/640/2022_04-%E7%A6%8F%E4%BE%86%E5%96%9C-%284%29.jpg?1655719652);
  }
  .top3{
    background-image: url(https://images.chinatimes.com/newsphoto/2022-11-06/656/20221106003295.jpg);
  }
  .top4{
    background-image: url(https://imgs.tsna.com/article/1635146091_R4Uau.jpg);
  }
  .top5{
    background-image: url(https://media.nownews.com/nn_media/thumbnail/2023/06/1686324321432-cc9d48e648b64b94bff266de68c007be-800x540.jpg?unShow=false);
  }
  .top6{
    background-image: url(https://img.ltn.com.tw/Upload/sports/page/800/2023/06/18/220.jpg);
  }
  .cirButton {
    width: 50px;
    height: 50px;
    background-color: #ffd89b;
    border-radius: 50%;
    position: absolute;
    right: 20px;
    bottom: -17px;
    border: solid 1px #3f3f3f;
    transition: 0.5s;
  }
  /* .cirButton:hover {
    background-color: (deg:123 ,#ffffaf);
  } */
  .top .tag,.top2 .tag,.top3 .tag,.top4 .tag,.top5 .tag,.top6 .tag{
    width: 20px;
    height: 75px;
    background-color: #ffffaf;
    float: right;
    margin-right: 15px;
    border: solid 1px #3f3f3f;
    transition: 0.5s;
  }
  .top .tag:hover,.top2 .tag:hover,.top3 .tag:hover,.top4 .tag:hover,.top5 .tag:hover,.top6 .tag:hover{
    background-color: #ffd89b;
  }
  .top .name ,.top2 .name,.top3 .name,.top4 .name,.top5 .name,.top6 .name{
    position: absolute;
    left: 0px;
    bottom: 0px;
    margin: 0;
    padding: 5px 10px;
    letter-spacing: 2px;
    color: white;
    font-weight: 250;
    /*   background-color: rgba(0,0,0,0.6); */
    background: linear-gradient(transparent 0%, black 100%);
    width: 100%;
    box-sizing: border-box;
    padding-top: 30px;
    padding-bottom: 15px;
  }
  .smallText{
    margin-left: 20px;
  }
  .top .name .smallText ,.top2 .name .smallText,.top3 .name .smallText,.top4 .name .smallText,.top5 .name .smallText,.top6 .name .smallText{
    font-size: 14px;
  }
  
  .bottom {
    padding: 15px 20px 20px 20px;
  }
  .bottom li {
    padding: 5px 0px;
    font-family: 標楷體;
    font-size: 15px;
  }
  .bottom h3 {
    display: inline-block;
    margin: 0;
  }
  .bottom ul {
    list-style: none;
    padding-left: 0px;
  }
  .button {
    margin-top: 30px;
  }
  .bottom ul li{
      font-size: 17px;
  }
  .button .btn {
    display: inline-block;
    padding: 7px 25px;
    letter-spacing: 3px;
  }
  .btnNews {
    float: right;
  }
  .btnWebsite {
    background-color: #fff;
    border: solid 1px #ccc;
    transition: 0.5s;
  }
  .btnWebsite:hover {
    background-color: #eee;
  }
  .btnNews {
    background-color: #fff;
    border: solid 1px #ccc;
    transition: 0.5s;
  }
  .btnNews:hover {
    background-color: #eee;
  }
```

---
# JS
// // 获取按钮和卡片内容的元素
// var showButton = document.getElementById("showButton");
// var cardContent = document.getElementById("cardContent");

// // 设置卡片内容初始状态为隐藏
// cardContent.style.display = "none";

// // 添加按钮点击事件处理程序
// showButton.addEventListener("click", function() {
//   // 检查卡片内容当前的显示状态
//   if (cardContent.style.display === "none") {
//     // 如果内容隐藏，则显示内容
//     cardContent.style.display = "block";
//     showButton.textContent = "隱藏卡片";
//   } else {
//     // 如果内容显示，则隐藏内容
//     cardContent.style.display = "none";
//     showButton.textContent = "呂彥青";
//   }
// });
document.addEventListener('DOMContentLoaded', function() {
    // 在这里执行你的 JavaScript 代码
    document.getElementById(showButton);
    document.getElementById(cardContainer);
    var showButton = document.getElementById('showButton');
    var cardContainer = document.getElementById('cardContainer');
    showButton.addEventListener('click', function() {
    if (cardContainer.style.display === 'none') {
        cardContainer.style.display = 'flex';
        showButton.innerText = 'X';
        } 
    else {
        cardContainer.style.display = 'none';
        showButton.innerText = '球員';
    }
        });
  });


---



