HTML + CSS 静态网页

效果图：

 <ul class="first w">
        <li class="iconfont icon-bofang"><span>Listen Now</span></li>
        <li class="iconfont icon-social-buffer"><span>Browse</span></li>
        <li class="iconfont icon-shengyin"><span>Radio</span></li>
        <li class="iconfont icon-yinle"><span>Playlists</span></li>
      </ul>
      <!--  -->
      <div class="content w">
          <ul class="second w">
            <!--  -->
            <li class="search"><a href="#" class="iconfont icon-sousuo"></a><p>Search by title,artist or album...</p></li>
            <li class="avatar">SML</li>
          </ul>
          <!--  -->
          <div class="box">
            <ul class="login">
              <li class="imgs"><a href="#"><img src="imgs/th1.jfif" alt=""></a></li>
              <li class="imgs"><a href="#"><img src="imgs/th2.jfif" alt=""></a></li>
              <li class="imgs"><a href="#"><img src="imgs/th3.jfif" alt=""></a></li>
              <li class="imgs"><a href="#"><img src="imgs/th4.jfif" alt=""></a></li>
              <li class="imgs"><a href="#"><img src="imgs/th5.jfif" alt=""></a></li>
              <li class="imgs"><a href="#"><img src="imgs/th6.jfif" alt=""></a></li>
              <li class="imgs"><a href="#"><img src="imgs/th7.webp" alt=""></a></li>
              <li class="imgs"><a href="#"><img src="imgs/th8.webp" alt=""></a></li>
              </ul>
          </div>
          <!--  -->
          <ul class="footer w">
            <div>
              <ul class="Nextup">
                <li><a href="#" class="iconfont icon-yduixiayiqu"></a><span>Next up</span></li>
                <li class="up up1">
                  <a href="#"><img src="imgs/th8.webp" alt=""></a>
                  <div class="title">
                    <p>Shut Down</p>
                    <p>BORN PINK · 2022</p>
                  </div>
                  <div class="time">
                    <p>2:56
                      <a href="#" class="iconfont icon-jushoucanggift"></a>
                      <a href="#" class="iconfont icon-shenglvehao"></a>
                    </p>
                  </div>
                </li>
                <!--  -->
                <li class="up up2">
                  <a href="#"><img src="imgs/th7.webp" alt=""></a>
                  <div class="title">
                    <p>Don't Know What to Do</p>
                    <p>BLACKPINK</p>
                  </div>
                  <div class="time">
                    <p>3:22
                      <a href="#" class="iconfont icon-jushoucanggift"></a>
                      <a href="#" class="iconfont icon-shenglvehao"></a>
                    </p>
                  </div>
                </li>
                <!--  -->
                <li class="up up3">
                  <a href="#"><img src="imgs/th3.jfif""></a>
                  <div class="title">
                    <p>Lovesick Girls</p>
                    <p>BLACKPINK</p>
                  </div>
                  <div class="time">
                    <p>3:13
                      <a href="#" class="iconfont icon-jushoucang"></a>
                      <a href="#" class="iconfont icon-shenglvehao"></a>
                    </p>
                  </div>
                </li>
                <!--  -->
                <li class="up up4">
                  <a href="#"><img src="imgs/th8.webp" alt=""></a>
                  <div class="title">
                    <p>Tally</p>
                    <p>BORN PINK · 2022</p>
                  </div>
                  <div class="time">
                    <p>3:05
                      <a href="#" class="iconfont icon-jushoucang"></a>
                      <a href="#" class="iconfont icon-shenglvehao"></a>
                    </p>
                  </div>
                </li>
                <!--  -->
                <li class="up up5">
                  <a href="#"><img src="imgs/th6.jfif" alt=""></a>
                  <div class="title">
                    <p>WHISTLE</p>
                    <p>BORN PINK · 2022</p>
                  </div>
                  <div class="time">
                    <p>3:31
                      <a href="#" class="iconfont icon-jushoucang"></a>
                      <a href="#" class="iconfont icon-shenglvehao"></a>
                    </p>
                  </div>
                </li>
              </ul>
            </div>
            <!--  -->
            <div>
              <ul class="Popular">
                <li><a href="#" class="iconfont icon-yuanquanfenxiang"></a><span>Popular Playlists</span></li>
                <li class="up up6">
                  <a href="#"><img src="imgs/th14.jpg" alt=""></a>
                  <div class="title">
                    <p>THE GIRLS</p>
                  </div>
                  <a href="#"><img src="imgs/th15.jpg" alt=""></a>
                  <div class="title">
                    <p>How You Like That</p>
                  </div>
                </li>
                <!--  -->
                <li class="up up6">
                  <a href="#"><img src="imgs/th16.jpg" alt=""></a>
                  <div class="title">
                    <p>DDU_DU DDU_DU</p>
                  </div>
                  <a href="#"><img src="imgs/th17.jpg" alt=""></a>
                  <div class="title">
                    <p>As If It's Your Last</p>
                  </div>
                </li>
                <!--  -->
                <li class="up up6">
                  <a href="#"><img src="imgs/th13.jfif" alt=""></a>
                  <div class="title">
                    <p>FLOWER</p>
                  </div>
                  <a href="#"><img src="imgs/th3.jfif" alt=""></a>
                  <div class="title">
                    <p>Love to Hate Me</p>
                  </div>
                </li>
                <!--  -->
                <li class="up up6">
                  <a href="#"><img src="imgs/th4.jfif" alt=""></a>
                  <div class="title">
                    <p>Yeah Yeah Yeah</p>
                  </div>
                  <a href="#"><img src="imgs/th6.jfif" alt=""></a>
                  <div class="title">
                    <p>BOOMBAYAH</p>
                  </div>
                </li>
              </ul>
            </div>
        
          </ul>
            <!--  -->
            <div class="nav">
              <div class="navnav fl">
                  <ul>
                    <li class="six iconfont icon-ai-rew-left"></li>
                    <li class="six iconfont icon-zanting"></li>
                    <li class="six iconfont icon-ai-rew-right"></li>
                  </ul>
                </div>
              <div class="navnavs fl">
                <ul>
                  <li class="xiaonav">
                    <a href="#" class="fl"><img src="imgs/Rosé_-_R.png" alt=""></a>
                      <div class="titles fl">
                        <p>Gone</p>
                        <p>ROSÉ</p>
                      </div>
                      <div class="titless fr">
                        <p>3:28</p>
                        <a href="#" class="iconfont icon-shoucang"></a>
                        <a href="#" class="iconfont icon-shenglvehao"></a>
                      </div>
                  </li>
                </ul>
              </div>
              <div class="foo fl"> 
                <ul>
                  <li class="six iconfont icon-duihuakuang"></li>
                  <li class="six iconfont icon-category"></li>
                  <li class="six iconfont icon-shengyin1"></li>
                </ul>
              </div>
            <!--  -->
      </div>

 

 body {
      background-color: #15100c;
    }
    .first {
      margin-top: 100px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      width: 436px;
      height: 45px;
      background-color: #f5a6b9;
      border-radius: 30px;
    }
    .first li {
      width: 95px;
      height: 30px;
      line-height: 30px;
      color: #fff;
      border-radius: 30px;
      text-align: center;
    }
    .first li:nth-child(2) {
      background-color: #3b3630
    }
    .first li:hover {
      background-color:#3b3630;
    }
    .first span {
      margin-left: 5px;
      font-size: 10px;
    }
    /*  */
    .content {
      position: relative;
      height: 485px;
      background-color: pink;
      margin-top: 10px;
    }
    .second {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 800px;
      height: 220px;
      background-color: #e8e8e8;
      border-radius: 30px 30px 0 0 ;
    }
    /*  */
    .second .search ,.second .avatar {
      margin: 20px 18px 15px 18px;
    }
    .search {
      position: relative;
      width: 185px;
      height: 30px;
      line-height: 30px;
      border-radius: 30px;
      background-color: #15100c;
      color: #fff;
    }
    .search p{
      display: inline-block;
      transform: scale(0.8);
      font-weight: 100;
      font-size: 4px;
      margin-left: 15px;
    }
    .search a {
      position: absolute;
      top: 0;
      left: 10px;
      color: #fff;
      
    }
    .avatar {
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 50px;
      background-color: pink;
    }
    /*  */
    .box {
      position: absolute;
      width: 100%;
      top: 65px;
      left: 0;
    }
    .login {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    .login .imgs {
      width: 135px;
      height: 135px;
    }
    img {
      width: 100%;
      border-radius: 10px;
    }
    .imgs img:hover {
      width: 110%;
    }
    /*  */
    .footer {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 800px;
      height: 242px;
      background-color: #ebb7c1;
      border-radius: 0 0 30px 30px;
    }
    .Nextup {
      display: flex;
      flex-direction: column;
      width: 360px;
      height: 242px;
      overflow: hidden;
    }
    .Nextup li,
    .Popular li{
      height: 37px;
      margin-bottom: 7px;
    }
    .Nextup li:first-child,
    .Popular li:first-child{
      line-height: 37px;
      color: #fff;
      font-size: 16px;
    }
    .Nextup li a ,
    .Popular li a{
      font-size: 20px;
    }
    .Nextup li span,
    .Popular li span {
      margin-left: 5px;
    }
    a , p{
      color: #fff;
    }
    .up {
      display: flex;
      justify-content: space-between;
    }
    .up a {
      display: inline-block;
      width: 37px;
      height: 37px;
    }
    .title {
      flex-basis: 190px;
    }
    .title p:last-child {
      font-size: 10px;
    }
    .time{
      line-height: 37px;
    }
    /*  */
    .Popular {
      display: flex;
      flex-direction: column;
      width: 380px;
      height: 242px;
      overflow: hidden;
    }
    .up6 p {
      line-height: 37px;
      margin-left: 10px;
    }
    /*  */
    .nav {
      position: absolute;
      bottom: 0;
      left: 300px;
      width: 567px;
      height: 54px;
      background-color: gray;
      border-radius: 30px;
      color: #fff;
    }
    .navnav li {
      display: inline-block;
      margin-left: 20px;
      line-height: 54px;
    }
    .navnavs {
      width: 300px;
      height: 40px;
      border-radius: 8px;
      background-color: #464641;
      margin: 6px 20px;
    }
    .xiaonav a {
      display: inline-block;
      width: 40px;
      height: 40px;
    }
    .xiaonav img {
      width: 100%;
    }
    .titles {
      margin-left: 10px;
    }
    .titles p:first-child {
      font-size: 15px;
    }
    .titles p:last-child {
      font-size: 10px;
      color: #e8e8e8;
    }
    .titless{
      display: flex;
      line-height: 37px;
    }
    .titless p {
      margin-right: 20px;
    }
    .foo li {
      display: inline-block;
      line-height: 54px;
      margin: 0 5px;
    }
    /*  */

 

body,
button,
dd,
dl,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
li,
ol,
p,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
}
body {
    line-height: 1.5;
    font-size: 14px;
    color: #333;
}
a {
    text-decoration: none;
    color: #333;
}
li {
    list-style: none;
}
/* 解决图片间隙问题 */
img {
    vertical-align: middle;
}
/* 万能的清浮动样式 */
.clearfix::before,
.clearfix::after {
    content: "";
}
.clearfix::after{
    clear: both;
}
/* 左浮动 */
.fl {
    float: left;
}
/* 右浮动 */
.fr {
    float: right;
}
.w {
    width: 1200px;
    margin: 0 auto;
}