• 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- 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>
  • 相关阅读:
    java简单计算器,只能鼠标点击数字
    可以掉落和滑动的星星
    servlet生成数字验证码
    web服务器底层-http请求与相应
    Codeforces 990D Graph And Its Complement 【构造】【性质】
    2018美团CodeM编程大赛 Round A Problem 2 下棋 【贪心】
    Codeforces 988F Rain and Umbrellas 【dp】
    Codeforces 988D Points and Powers of Two 【性质】【卡常】
    Codeforces 981D Bookshelves 【dp】【性质】
    POJ 2104 K-th Number 【主席树】【不带修改】
  • 原文地址:https://www.cnblogs.com/importsober/p/16140870.html
Copyright © 2020-2023  润新知