• 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>
  • 相关阅读:
    Javascript 时间Date()的一般用法
    vue搭建
    初次见面
    css3边框
    appium移动自动化测试-one demo
    appium移动自动化测试-安装2
    appium移动自动化测试-安装1
    python数据类型
    判断软键盘是不是可见
    android 设置Dialog的宽度
  • 原文地址:https://www.cnblogs.com/importsober/p/16140870.html
Copyright © 2020-2023  润新知