01-HTML+CSS/13-仿网易云页面

仿网易云页面

块级元素嵌套img元素

<!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>Document</title>
    <style>
      .box {
        background-color: orange;
      }

      img {
        /* display: block; */
        /* vertical-align: bottom; */
        /* vertical-align: top; */
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="../images/109951167296432458.jpg" alt="" />
    </div>
  </body>
</html>

网易轮播图banner

轮播图banner.png
<!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>Document</title>
    <style>
      body,
      h1,
      h2,
      h3,
      ul,
      li,
      p {
        margin: 0;
        padding: 0;
      }

      body {
        font: 12px Arial, Helvetica, sans-serif;
      }

      a {
        text-decoration: none;
        color: #000;
        outline: none;
      }

      ul {
        list-style-type: none;
      }

      input {
        outline: none;
        border: none;
      }

      img {
        vertical-align: top;
      }

      .wrapper_01 {
        width: 1100px;
        margin: 0 auto;
      }

      .wrapper_02 {
        width: 980px;
        margin: 0 auto;
      }

      .wrapper_03 {
        width: 982px;
        margin: 0 auto;
      }

      .banner {
        height: 285px;
        background-color: orange;
      }

      .banner .area .area-left {
        position: relative;
        width: 730px;
      }

      .banner {
        background: url("./images/1099511672964324580.jpg") center center/6000px
          no-repeat;
      }

      .banner .area {
        position: relative;
        height: 285px;
        background-color: orange;
      }

      .banner .area-left .img-list {
        display: flex;
        overflow: hidden;
      }

      .banner .area-left .img-list li {
        flex-shrink: 0;
        width: 100%;
      }

      .banner .area-left .img-list .item {
        display: block;
      }

      .banner .area-left .img-list .item img {
        width: 100%;
        height: 285px;
      }

      .banner .area-left .dots-list {
        position: absolute;
        left: 0;
        bottom: 5px;
        right: 0;
        display: flex;
        justify-content: center;
      }

      .banner .area-left .dots-list li {
        margin: 0 2px;
      }

      .banner .area-left .dots-list .item {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url("./images/banner.png") 3px -343px;
      }

      .banner .area-left .dots-list .item.active,
      .banner .area-left .dots-list .item:hover {
        background-position: -16px -343px;
      }

      .banner .area-right {
        position: absolute;
        right: -1px;
        top: 0;
        bottom: 0;
        width: 254px;
        background: url("./images/download.png");
      }

      .banner .area-right .download {
        display: block;
        width: 215px;
        height: 56px;
        margin: 186px 0 0 19px;
        text-indent: -9999px;
      }

      .banner .area-right .download:hover {
        background: url("./images/download.png") 0 -290px;
      }

      .banner .area-right .desc {
        margin-top: 10px;
        font-size: 12px;
        color: #8d8d8d;
        text-align: center;
      }

      .banner .area .control {
        position: absolute;
        width: 37px;
        height: 63px;
        top: 0;
        bottom: 0;
        margin: auto 0;
        background: url("./images/banner.png");
      }

      .banner .area .control.left {
        left: -70px;
        background-position: 0 -360px;
      }

      .banner .area .control.left:hover {
        background-position: 0 -430px;
      }

      .banner .area .control.right {
        right: -70px;
        background-position: 0 -508px;
      }

      .banner .area .control.right:hover {
        background-position: 0 -578px;
      }
    </style>
  </head>
  <body>
    <div class="banner">
      <div class="area wrapper_03">
        <div class="area-left">
          <ul class="img-list">
            <li class="item">
              <a href="">
                <img src="./images/109951167296432458.jpg" alt="" />
              </a>
            </li>
            <li class="item">
              <a href="">
                <img src="./images/109951167296432458.jpg" alt="" />
              </a>
            </li>
            <li class="item">
              <a href="">
                <img src="./images/109951167296432458.jpg" alt="" />
              </a>
            </li>
          </ul>
          <ul class="dots-list">
            <li><a class="item active" href="#"></a></li>
            <li><a class="item" href="#"></a></li>
            <li><a class="item" href="#"></a></li>
            <li><a class="item" href="#"></a></li>
            <li><a class="item" href="#"></a></li>
            <li><a class="item" href="#"></a></li>
            <li><a class="item" href="#"></a></li>
            <li><a class="item" href="#"></a></li>
            <li><a class="item" href="#"></a></li>
            <li><a class="item" href="#"></a></li>
          </ul>
        </div>
        <div class="area-right">
          <a class="download" href="#">下载客户端</a>
          <p class="desc">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
        </div>
        <a href="#" class="control left"></a>
        <a href="#" class="control right"></a>
      </div>
    </div>
  </body>
</html>
main.png
<!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>Document</title>
    <style>
      body,
      h1,
      h2,
      h3,
      ul,
      li,
      p {
        margin: 0;
        padding: 0;
      }

      body {
        font: 12px Arial, Helvetica, sans-serif;
      }

      a {
        text-decoration: none;
        color: #000;
        outline: none;
      }

      ul {
        list-style-type: none;
      }

      input {
        outline: none;
        border: none;
      }

      img {
        vertical-align: top;
      }

      .wrapper_01 {
        width: 1100px;
        margin: 0 auto;
      }

      .wrapper_02 {
        width: 980px;
        margin: 0 auto;
      }

      .wrapper_03 {
        width: 982px;
        margin: 0 auto;
      }

      .main .area {
        display: flex;
        height: 500px;
        border: 1px solid #d3d3d3;
        border-width: 0 1px;
        background-image: url("./images/wrap1.png");
      }

      .main .area-left {
        width: 729px;
      }

      .main .area-right {
        width: 250px;
      }

      .main .area-right .user-login {
        width: 250px;
        height: 126px;
        background: url("./images/index.png") 0 0;
      }

      .main .area-right .user-login .desc {
        width: 205px;
        margin: 0 auto;
        padding-top: 16px;
        color: #666;
        font-size: 12px;
        line-height: 22px;
      }

      .main .area-right .user-login .btn {
        display: block;
        margin: 15px auto 0;
        width: 100px;
        height: 31px;
        line-height: 31px;
        color: #fff;
        text-align: center;
        font-size: 12px;
        background: url("./images/index.png") 0 -195px;
        text-shadow: 0 1px 0 #8a060b;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="area wrapper_02">
        <div class="area-left"></div>
        <div class="area-right">
          <div class="user-login">
            <p class="desc">
              登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
            </p>
            <a href="#" class="btn">用户登录</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

块级元素中的居中对齐

<!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>Document</title>
    <style>
      .box {
        height: 200px;
        background-color: orange;
        line-height: 200px;
      }

      span {
        background-color: #0f0;
        display: inline-block;
        height: 60px;
        line-height: 60px;
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      dffdfdf
      <span>aaaa</span>
    </div>
  </body>
</html>

<!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>Document</title>
    <style>
      .box {
        height: 200px;
        background-color: orange;
        line-height: 200px;
      }

      span {
        background-color: #0f0;
        display: inline-block;
        height: 60px;
        /* line-height: 60px; */
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      dffdfdf
      <span>aaaa</span>
    </div>
  </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容