影片:https://youtu.be/n7ZMyb2xzLI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0%;
margin:0px;
z-index: -999;
background-image: url(images/封底/p0478_l.png);
background-position: center;
background-size: cover;
background-attachment: fixed;
}
#Bg{
text-align: center;
position: relative;
display: flex;
flex-wrap: wrap;
}
#Bg-f{
width: 60%;
height: auto;
position: absolute;
left:20%;
top: 2.5px;
}
#Bg ul{
list-style-type:none;
display: flex;
margin: auto;
display: flex;
}
#img1{
width:25px;
position: absolute;
left: 500px;
top: 30px;
}
#p1{
position: absolute;
left: 550px;
top: 10px;
font-size: large;
color:brown;
}
#img2{
width:25px;
position: absolute;
left: 1400px;
top: 30px;
}
#p2{
position: absolute;
left: 1230px;
top: 10px;
font-size: large;
color:brown;
}
#Bg ul li img:hover{
opacity: 0.5;
}
.PB{
width: 50%;
height:1480px;
left: -23%;
top: 80px;
text-align: center;
position: relative;
display: flex;
flex-wrap: wrap;
text-align: center;
border-radius: 10px;
}
#Ub{
width:100%;
background-color: aliceblue;
border-radius: 30px;
height:5%;
}
#Ub ul{
display: flex;
}
#Ub ul li {
width:auto;
margin: auto;
display: flex;
}
#Ub ul li p{
font-size:x-large;
color: blue;
}
#Ub ul li img{
width:25%;
}
#imginf{
width:30%;
position: absolute;
left:10px;
top:100px;
flex-direction: column;
padding: 10px;
background-color:rgb(22, 22, 22);
border-radius: 10px;
}
#imginf1{
width:20%;
position: absolute;
left:250px;
top:300px;
flex-direction: column;
border-radius: 10px;
}
#imginf2{
width:43%;
position: absolute;
left: 20px;
top: 550px;
flex-direction: column;
padding: 10px;
border-radius: 10px;
}
#imginf2 p{
font-size:large;
color: midnightblue;
background-color: azure;
padding: 10px;
border-radius: 30px;
border: 3px dashed rgb(101, 169, 201);
}
#imginf3{
width:35%;
position: absolute;
left: 100px;
top: 1000px;
flex-direction: column;
padding: 10px;
border-radius: 10px;
}
#imginf4{
width:30%;
position: absolute;
left: 580px;
top: 1000px;
flex-direction: column;
padding: 10px;
border-radius: 10px;
background-color: rgb(0, 0, 0);
padding: 5px;
border-radius: 10px;
}
#imginf5{
width:30%;
position: absolute;
left: 330px;
top: 1250px;
flex-direction: column;
padding: 10px;
border-radius: 10px;
background-color: aliceblue;
padding: 5px;
border-radius: 10px;
}
#St1{
width:150px;
position: absolute;
left: 30px;
top: 1300px;
}
#St2{
width:550px;
position: absolute;
left: 550px;
top: 0px;
}
#St2-1{
width:400px;
position: absolute;
left:450px;
top: 100px;
}
#St2-2{
width:200px;
position: absolute;
left:380px;
top: 300px;
}
#St3{
width:300px;
position: absolute;
left:600px;
top: 500px;
}
#St4{
width:200px;
position: absolute;
left:500px;
top: 800px;
border-radius:150px;
}
#St5{
width:200px;
position: absolute;
left:380px;
top: 850px;
}
</style>
</head>
<body>
<div id="Bg">
<img id="Bg-f" src="images/封底/IMG_1905-removebg-preview.png">
<ul>
<a href="cp.html"><li><img id="img1" src="images/主頁按鈕/maple-leaf.png"><p id="p1">回上一頁</p></li></a>
<a href="portfolio.html"><li><img id="img2" src="images/主頁按鈕/maple-leaf.png"><p id="p2">回到第一篇-portfolio </p></li></a>
</ul>
<div class="PB">
<div id="Ub">
<ul>
<li><img class="img-s" src="images/貼紙/8410e2de1c6a9e556b46a50c233dbc48-removebg-preview.png"><a href="cp.html"><p>蓮理枝</p></a></li>
<li><img class="img-s" src="images/貼紙/8410e2de1c6a9e556b46a50c233dbc48-removebg-preview.png"><a href="#"><p>skam</p></a></li>
<li><img class="img-s" src="images/貼紙/8410e2de1c6a9e556b46a50c233dbc48-removebg-preview.png"><a href="cpSupernatural.html"><p>supernatural</p></a></li>
</ul>
</div>
<div id="imginf">
<img src="images/Cp頁/skam手繪.JPG" width="80%">
</div>
<div id="imginf1">
<img src="images/Cp頁/IMG_9171.JPG" width="80%">
</div>
<div id="imginf2">
<img src="images/Cp頁/2.1.jpg" width="100%">
<p>挪威青春劇《SKAM》<br>Isak Valtersen&Even Bech Næsheim<br>兩人在相遇後互相吸引，從曖昧、困惑到坦誠相愛，彼此成為對方成長與自我接納的力量。</p>
</div>
<div id="imginf3">
<img src="images/Cp頁/2.2.jpg" width="80%">
</div>
<div id="imginf4">
<img src="images/Cp頁/2.3.jpg" width="80%">
</div>
<div id="imginf5">
<img src="images/Cp頁/2.4.jpg" width="100%">
</div>
<img id="St1" src="images/貼紙/8410e2de1c6a9e556b46a50c233dbc48-removebg-preview.png">
<img id="St2" src="images/貼紙/8410e2de1c6a9e556b46a50c233dbc48-removebg-preview.png">
<img id="St2-2" src="images/貼紙/8410e2de1c6a9e556b46a50c233dbc48-removebg-preview.png">
<img id="St2-1" src="images/Cp頁/Skam.png">
<img id="St3" src="images/貼紙/2.png">
<img id="St4" src="images/Cp頁/yeah.JPG">
<img id="St5" src="images/貼紙/a55a64de2b6321d0cdba9317079d6260-removebg-preview.png">
</div>
</div>
</div>
</body>
</html>
