解說影片:https://youtu.be/U4MNoR7xahI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<style>
body{
width: 100%;
height: 100%;
margin: 0px;
background-image: url(images/封底/p0500_l.png);
overflow-x: hidden;
}
#Ab{
width:100%;
height: 100%;
margin: 0;
position: relative;
}
#Tbb{
position: relative;
height: 40px;
width: 100%;
margin: 0px;
text-align: center;
background-color: bisque;
opacity: 0.6;
}
#Tbb img{
position: relative;
width: 2%;
float: right;
margin-top: 5px;
margin-right: 20px;
}
#Tbb img:hover{
opacity: 0.5;
}
#Tb{
width: 100%;
height:480px;
opacity: 0.9;
}
@keyframes move{
form{
transform:rotate(-45deg);
}
to{
transform:rotate(45deg);
}
form{
transform:rotate(-90deg);
}
to{
transform:rotate(90deg);
}
}
#cd{
width:150px;
position: absolute;
top:50%;
left: 70%;
opacity: 0.8;
animation: move 10s 8 ease alternate;
}
#cd:hover{
opacity: 0.6;
}
.Bb{
position: relative;
}
.Lt{
width: 100%;
height:30px;
margin: 30px;
position: relative;
}
#img1{
width: 15%;
position: absolute;
top:-120px;
left: 40.5%;
margin: auto;
opacity: 0.8;
}
.Lt h4{
position: absolute;
width: 100%;
height: auto;
top:-50px;
left: 45%;
font-size: xx-large;
color: #e35d0f;
}
.Bb ul{
list-style-type:none;
display: flex;
margin:30px 200px;
}
.Bb ul li img{
width:300px;
margin:28px;
align-items: center;
border:1px solid #e35d0f;
border-radius:20px;
}
.Bb ul li img:hover{
opacity: 0.5;
}
#Mb-L{
position:relative;
float: left;
width:400px;
margin-top: 50px;
margin-left: 100px;
padding: 10px;
background-color:antiquewhite;
border-radius: 15px;
transform: rotate(-15deg);
}
#Mb-L1{
position:absolute;
left: 200px;
top:150px;
width:350px;
margin-top: 30px;
margin-left: 80px;
transform: rotate(30deg);
}
#game-icon{
position:absolute;
left:5px;
top:135px;
width:300px;
margin-top: 30px;
margin-left:-150px;
transform: rotate(20deg);
}
#movie{
position:absolute;
left:10px;
top:320px;
width:200px;
margin-top: 30px;
margin-left:-100px;
transform: rotate(20deg);
}
#cake{
position:absolute;
left: 200px;
top:425px;
width:225px;
margin-top: 30px;
margin-left: 100px;
transform: rotate(30deg);
}
#Mb-R{
float: right;
position:relative;
width: 450px;
height: auto;
margin-right : 150px;
margin-top: 15px;
text-align: center;
}
#Mb-R img{
width:400px;
padding:10px;
background-color: antiquewhite;
border-radius: 15px;
}
#Mb-R h1{
text-align: center;
color:antiquewhite;
font-size:xx-large;
}
#MbT{
width: 425px;
background-color: antiquewhite;
opacity: 0.8;
border-radius: 10px;
margin: 10px;
padding: 1px;
}
#MbT p{
font-size:larger;
color: #e35d0f;
text-align: center;
}
#F{
width: 100%;
height: 150px;
text-align: center;
margin-top: 300px;
background-color:antiquewhite;
opacity: 0.6;
margin-bottom: 0px;
padding: 10px;
}
</style>
</head>
<body>
<div id="Ab">
<div id="Tbb">
<a href="https://discord.gg/W6kSQ8dj"><img src="images/頁籤按鈕/discord.png" alt=""></a>
<a href="https://www.youtube.com/@%E6%BE%90-s4z"><img src="images/頁籤按鈕/youtube.png" alt=""></a>
<a href="https://www.instagram.com/p/DQVkZzyD9Sr/"><img src="images/頁籤按鈕/instagram.png" alt=""></a>
</div>
<!--主頁封頂-->
<div >
<img id="Tb" src="images/封底/封頂.png" alt="">
<a href="play list.html"><img id="cd" src="images/主頁按鈕/下載-removebg-preview.png" alt=""></a>
</div>
<!--按鈕-->
<div class="Bb">
<!--按鈕引導-->
<div class="Lt">
<img id="img1" src="images/主頁按鈕/文字底圖.png" alt="">
<h4>點擊下方</h4>
</div>
<!--按鈕清單-->
<ul>
<li><a href="portfolio.html"><img src="images/頁籤按鈕/作品集.png" alt=""></a></li>
<li><a href="my love.html"><img src="images/頁籤按鈕/我的最愛.png" alt=""></a></li>
<li><a href="pikmin.html"><img src="images/頁籤按鈕/皮克敏.png" alt=""></a></li>
<li><a href="cp.html"><img src="images/頁籤按鈕/Cp圖.png" alt=""></a></li>
</ul>
</div>
<!--照片左--><!--貼紙-->
<div id="Mb-L" >
<a href="yilan photo.html"><img src="images/宜蘭照片/宜蘭/宜蘭6.png"width="100%" height="100%" style="border-radius: 10px;"></a>
<img id="Mb-L1" src="images/主頁按鈕/我.png" alt="">
<a href="game.html"><img id="game-icon" src="images/主頁按鈕/1.1.png" alt=""></a>
<a href="movie list.html"><img id="movie" src="images/主頁按鈕/電影清單.png"></a>
<img id="cake" src="images/主頁按鈕/甜點.png" alt="">
</div>
<!--照片右-->
<div id="Mb-R">
<div>
<h1>about me ~</h1>
<a href="japan photo.html"><img src="images/宜蘭照片/我.png" width="100%" height="100%"></a>
</div>
<!--自我介紹文字-->
<div id="MbT">
<p>我是宜蘭人，我喜歡看海~<br>
和蒐集好聞的木頭或花香味，愛吃甜食<br>可以叫我小雲or阿雲<br>
我很愛看電影跟玩遊戲，可以找我一起玩~</p>
</div>
</div>
</div>
<div style="clear:both;"></div>
<!--footer-->
<div id="F">
<p>我的yt頻道是歐趴小精靈，上面會放網頁設計課的作業教學幫助同學二次消化|</p>
<p>|我也有做筆記在方格子https://vocus.cc/user/@GoodLuck，可以贊助我換電腦|</p>
<p>|頻道上也有我的聯繫方式~ 素材感謝:小梅提供部份好看的貼紙~https://www.instagram.com/rabbit1315/|</p>
</div>
</body>
</html>
