CSS练习记录：一个简单的responsive页面
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jason Becker | Not Dead Yet</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 5px;
border-style: double;
border-radius: 1.5%;
}
.container {
width: 70vw;
margin: 0 auto;
}
.hr-1 {
border: 2px solid black;
}
ul.nav-ul {
display: flex;
justify-content: space-between;
width: 80%;
margin: 10px auto;
padding: 10px 0px;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
.img-list {
margin: 15px 0;
display: flex;
justify-content: space-around;
}
.img-list img {
width: 28%;
object-fit: cover;
object-position: right;
}
@keyframes zoominoutsinglefeatured {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1.2);
}
100% {
transform: scale(1, 1);
}
}
.logo img {
display: block;
margin: 0 auto;
}
#not-dead-logo {
animation: zoominoutsinglefeatured 1.3s infinite;
}
@media screen and (max-width: 569px) {
.logo img {
width: 200px;
}
ul.nav-ul {
font-size: 0.1rem;
}
}
.content {
text-align: center;
font-family: "Courier New", Courier, monospace;
}
.content p {
font-size: 1.5rem;
margin: 5px 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">
<img src="logo-1.png" alt="" />
<img id="not-dead-logo" src="logo-2.png" alt="" />
</div>
<hr class="hr-1" />
<div class="nav">
<ul class="nav-ul">
<li><a href="#">HOME</a></li>
<li><a href="#">DISCOGRAPHY</a></li>
<li><a href="#">MOVIE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<hr class="hr-2" />
<div class="img-list">
<img src="1.jpg" alt="" />
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
</div>
<div class="content">
<h1>About Jason</h1>
<p>
Jason Becker’s story is one of brilliance, talent, determination,
adversity, and, ultimately, triumph. A child prodigy on guitar, Jason
rose to prominence as a teenager when he was one half of the legendary
rock guitar duo Cacophony (with his great friend Marty Friedman).
After wowing audiences all over the world with his amazing guitar
chops and deep compositions, Jason auditioned for—and got—the gig with
David Lee Roth, following in the huge footsteps of Eddie Van Halen and
Steve Vai. He wrote and recorded the DLR album A Little Ain’t Enough
and was poised to take over the rock guitar world when a nagging pain
in his leg was diagnosed as ALS, or Lou Gehrig’s Disease, a
debilitating and fatal condition with a life expectancy of maybe five
years. Maybe.
</p>
</div>
</div>
</body>
</html>
标签：guitar,Jason,img,content,width,responsive,margin,CSS,页面 来源： https://www.cnblogs.com/importsober/p/16140870.html