## 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 = '球員';
}
});
});
---
Google Drive
Gist
Clipboard
Sign in with Wallet
