陳柏宇程式設計
<html lang="zh-TW">
<SCRPIT>
function myFristJS()
{
alert("我學會HTML,CSS與JavaScript三種程式語言");//註解alert警報
}
</SCRIPT>
<style>
.wrapper {
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;}
.sides {
position: relative;
animation: 0.7s customBounce ease 0.4s both;
display: grid;
grid-template-columns: 50vw 50vw;}
@keyframes customBounce {
0% { grid-gap: 100vw; }
12% { grid-gap: 90vw; }
24% { grid-gap: 57vw; }
36% { grid-gap: 3vw; }
54% { grid-gap: 25vw; }
74% { grid-gap: 2.5vw; }
82% { grid-gap: 6.25vw; }
92% { grid-gap: .7vw; }
96% { grid-gap: 1.5vw; }
100% { grid-gap: 0; }}
.side {
display: flex;
flex-direction: column;
align-items: center;
font-size: 6vw;}
.robot {
background-color: #ff652f;
color: #ffffff;}
.alien { background-color: #14a76e;
color: #000000;
flex-direction: column-reverse;}
.name { margin: 0.3em;}
.emoji { font-size: 5em; }
.versus {
position: absolute;
width: 8vw;
height: 8vw;
background: #ffffff;
border-radius: 50%;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
font-size: 4vw;
color: #123456;
border-width: 10px;
border-style: solid;
border-color: #14a76e #ff652f #ff652f #14a76e; }
</style>
<head>
<meta charset="UTF-8">
<title>德明財經科技大學財金系陳柏宇程式設計button,JavaScript</title>
</head>
<body>
<div class="wrapper">
<div class="sides">
<div class="side robot">
<h2 class="name">123</h2>
<div class="emoji">🤖</div>
</div>
<div class="versus">
<span>vs.</span>
</div>
<div class="side alien">
<h2 class="name">456</h2>
<div class="emoji">👽</div>
</div>
</div>
</div>
<p>劉得意模仿自#codeSTACKr https://github.com/codeSTACKr/css-grid-tutorial</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/JVty_NUlvRI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
遷入劉任昌老師教學影片
<iframe width="560" height="315" src="https://www.youtube.com/embed/tCMrrhLEnDw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<button onclick="myFirstJS()">陳柏宇按鍵</button>
</body>
</html>
留言
張貼留言