Web 第二次作业

于 2025-01-18 23:56:06 发布
阅读量229 收藏
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_74984440/article/details/145234997
版权

任务一 飙升榜

<!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>
  <link rel="stylesheet" href="css/reset.css">
  <style>
    .bang {
      width: 280px;
      height: 620px;
      background-color: #EEE;
      border-radius: 3px;
      box-shadow: 2px 2px 5px #999;
    }

    .bang li {
      width: 280px;
      height: 41px;
      /* border: 1px solid red; */
      line-height: 41px;
    }

    .bang li>span {
      margin-left: 30px;
    }

    .bang li.active {
      width: 280px;
      height: 170px;
    }

    .bang>li>img {
      width: 110px;
      /* margin: 30px; */
      margin-left: 25px;
      padding-top: 25px;
      float: left;
    }

    .img-left {
      width: 120px;
      height: 120px;
      float: right;
      margin-top: 25px;
    }

    .img-left>p {
      width: 120px;
      height: 50px;
      margin-top: 20px;
    }

    .img-left>p>img {
      float: left;
    }

    .even {
      background-color: #EEE;
    }

    .odd {
      background-color: #DDD;
    }

    .all {
      text-align: right;
      /* margin-right: 10px; */
    }

    .all>a {
      color: #222;
    }
  </style>
</head>

<body>
  <ul class="bang">
    <li class="active even">
      <img src="/image/1.jpg" alt="">
      <div class="img-left">
        <h3>飙升榜</h3>
        <p>
          <img src="/image/2.png" alt="">
          <img src="/image/3.png" alt="">
        </p>
      </div>

    </li>
    <li class="odd">
      <span>1 不重逢</span>
    </li>
    <li class="even">
      <span>2 温暖的房子</span>
    </li>
    <li class="odd">
      <span>3 永不熄灭的火焰</span>
    </li>
    <li class="even">
      <span>4 怪诞心理学</span>
    </li>
    <li class="odd">
      <span>5 忒修斯的船</span>
    </li>
    <li class="even">
      <span>6 晨光里有你</span>
    </li>
    <li class="odd">
      <span>7 No Cap (Phonk囗水)</span>
    </li>
    <li class="even">
      <span>8 Fire! (feat. YUQl((G)I-DLE)</span>
    </li>
    <li class="odd">
      <span>9 Teeth</span>
    </li>
    <li class="even">
      <span>10 你是旷野 是山间的风</span>
    </li>
    <li class="odd all">
      <a href="#">查看全部></a>
    </li>
  </ul>
</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>
  <link rel="stylesheet" href="css/reset.css">
  <style>
    .box {
      width: 300px;
      height: 400px;
      background-color: #F7F8FC;
      border-radius: 10px;
      text-align: center;
    }

    .row {
      width: 300px;
      height: 100px;
      /* border: 1px solid red; */
    }

    .row .col {
      /* border: 1px solid red; */
      width: 80px;
      height: 80px;
      float: left;
      margin: 10px;
    }

    .col>img {
      width: 55px;
      margin-left: 12px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="row">
      <div class="col">
        <img src="/image/j1.png" alt="">
        <p>京豆</p>
      </div>
      <div class="col">
        <img src="/image/j2.png" alt="">
        <p>充值中心</p>
      </div>
      <div class="col">
        <img src="/image/j3.png" alt="">
        <p>问医生</p>
      </div>
    </div>

    <div class="row">
      <div class="col">
        <img src="/image/j4.png" alt="">
        <p>企采返E卡</p>
      </div>
      <div class="col">
        <img src="/image/j5.png" alt="">
        <p>企业计划购</p>
      </div>
      <div class="col">
        <img src="/image/j6.png" alt="">
        <p>国家补贴</p>
      </div>
    </div>

    <div class="row">
      <div class="col">
        <img src="/image/j7.png" alt="">
        <p>礼品卡</p>
      </div>
      <div class="col">
        <img src="/image/j8.png" alt="">
        <p>云建站</p>
      </div>
      <div class="col">
        <img src="/image/j9.png" alt="">
        <p>游戏</p>
      </div>
    </div>

    <div class="row">
      <div class="col">
        <img src="/image/j10.png" alt="">
        <p>加油卡</p>
      </div>
      <div class="col">
        <img src="/image/j11.png" alt="">
        <p>金条借款</p>
      </div>
      <div class="col">
        <img src="/image/j12.png" alt="">
        <p>买贵双倍赔</p>
      </div>
    </div>
  </div>
</body>

</html>

任务三 搜索框

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>搜索页面</title>

</head>
<style>
  .search-container {
    display: flex;
    align-items: center;
    border: 2px solid red;
    border-radius: 5px;
    padding: 5px;
    width: 80%;
    margin: 50px auto;
  }

  .search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 16px;
  }

  .search-icon-container {
    display: flex;
    align-items: center;
  }

  .camera-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }

  .search-button {
    background-color: red;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
  }

  .search-container {
    display: flex;
    align-items: center;
    border: 2px solid red;
    border-radius: 10px;
    padding: 5px;
    width: 80%;
    margin: 50px auto;
  }

  .search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 16px;
  }

  .search-icon-container {
    display: flex;
    align-items: center;
  }

  .camera-icon {
    width: 40px;
    height: 30px;
    margin-right: 10px;
  }

  .search-button {
    background-color: red;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

<body>
  <div class="search-container">
    <input type="text" placeholder="小白熊恒温调奶器" class="search-input">
    <div class="search-icon-container">
      <img src="/image/相机.png" alt="相机图标" class="camera-icon">
      <button class="search-button">搜索</button>
    </div>
  </div>
</body>

</html>

任务四 图标

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>功能页面</title>

</head>
<style>
  .container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
  }

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
  }

  .item img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid pink;
    padding: 5px;
    transition: background-color 0.3s ease;
  }

  .item:hover img {
    background-color: red;
  }

  .item span {
    margin-top: 8px;
    font-size: 14px;
  }
</style>


<body>
  <div class="container">
    <div class="item" onclick="window.location.href='#'">
      <img src="/image/w1.png" alt="音乐开放平台图标">
      <span>音乐开放平台</span>
    </div>
    <div class="item" onclick="window.location.href='#'">
      <img src="/image/w2.png" alt="云村交易所图标">
      <span>云村交易所</span>
    </div>
    <div class="item" onclick="window.location.href='#'">
      <img src="/image/w3.png" alt="X StudioAI歌手图标">
      <span>X StudioAI歌手</span>
    </div>
    <div class="item" onclick="window.location.href='#'">
      <img src="/image/w4.png" alt="用户认证图标">
      <span>用户认证</span>
    </div>
    <div class="item" onclick="window.location.href='#'">
      <img src="/image/w5.png" alt="AI免费写歌图标">
      <span>AI免费写歌</span>
    </div>
    <div class="item" onclick="window.location.href='#'">
      <img src="/image/w6.png" alt="云推歌图标">
      <span>云推歌</span>
    </div>
    <div class="item" onclick="window.location.href='#'">
      <img src="/image/w7.png" alt="赞赏图标">
      <span>赞赏</span>
    </div>
  </div>
</body>

</html>

任务五 京东用户页面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale = 1.0">
  <title>用户信息页面</title>
  <style>
    .user-info-container {
      width: 300px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .user-profile {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      width: 100%;
    }

    .profile-section {
      display: flex;
      align-items: center;
    }

    .profile-picture {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-right: 10px;
    }

    .user-actions-section {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .user-name {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .user-actions a {
      text-decoration: none;
      color: #333;
      margin-left: 10px;
    }

    .user-stats {
      width: 100%;
      margin-bottom: 20px;
    }

    .stat-row {
      display: flex;
      justify-content: space-around;
    }

    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .stat-icon {
      margin-bottom: 5px;
    }

    .stat-icon img {
      width: 30px;
      height: 30px;
    }

    .stat-text {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .stat-title {
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
    }

    .stat-value {
      font-weight: bold;
    }

    .user-orders {
      width: 100%;
      margin-bottom: 20px;
    }

    .order-row {
      display: flex;
      justify-content: space-around;
      margin-bottom: 10px;
    }

    .order-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #eee;
    }

    .order-title {
      color: #666;
    }

    .no-order-message {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
    }

    .no-order-message img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }

    .message-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .membership-buttons {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }

    .plus-membership,
    .enterprise-membership {
      width: 48%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      cursor: pointer;
      padding: 10px;
    }

    .plus-membership {
      background-color: #ffd700;
    }

    .enterprise-membership {
      background-color: #007bff;
      color: #fff;
    }

    .button-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 10px;
    }

    .button-title {
      font-size: 16px;
      font-weight: bold;
    }

    .button-subtitle {
      font-size: 12px;
    }

    .button-link {
      background-color: #333;
      color: #fff;
      padding: 5px 10px;
      border-radius: 3px;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <div class="user-info-container">
    <div class="user-profile">
      <div class="profile-section">
        <img src="/image/头像.jpeg" alt="用户头像" class="profile-picture">
      </div>
      <div class="user-actions-section">
        <div class="user-name">北_巷_</div>
        <div class="user-actions">
          <a href="#">切换账号</a> | <a href="#">退出</a>
        </div>
      </div>
    </div>
    <div class="user-stats">
      <div class="stat-row">
        <div class="stat-item">
          <div class="stat-icon"><img src="/image/z1.png" alt="浏览记录图标" class="icon"></div>
          <div class="stat-text">
            <a class="stat-title" href="#">浏览记录</a>
            <span class="stat-value">0</span>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-icon"><img src="/image/z2.png" alt="商品收藏图标" class="icon"></div>
          <div class="stat-text">
            <span class="stat-title">商品收藏</span>
            <span class="stat-value">0</span>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-icon"><img src="/image/z3.png" alt="店铺关注图标" class="icon"></div>
          <div class="stat-text">
            <span class="stat-title">店铺关注</span>
            <span class="stat-value">2</span>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-icon"><img src="/image/z4.png" alt="我的京东图标" class="icon"></div>
          <div class="stat-text">
            <span class="stat-title">我的京东</span>
            <span class="stat-value">0</span>
          </div>
        </div>
      </div>
      <div class="user-orders">
        <div class="order-row">
          <div class="order-item">
            <span class="order-title">待付款</span>
            <span class="order-value">0</span>
          </div>
          <div class="order-item">
            <span class="order-title">待收货</span>
            <span class="order-value">0</span>
          </div>
          <div class="order-item">
            <span class="order-title">待评价</span>
            <span class="order-value">0</span>
          </div>
          <div class="order-item">
            <span class="order-title">退换售后</span>
            <span class="order-value">0</span>
          </div>
        </div>
        <div class="no-order-message">
          <img src="/image/z5.png" alt="暂无订单图标">
          <div class="message-text">
            <span>暂无订单信息</span>
            <span>下单后查看更多订单信息</span>
          </div>
        </div>
      </div>
      <div class="membership-buttons">
        <div class="plus-membership">
          <div class="button-text">
            <span class="button-title">PLUS会员</span>
            <span class="button-subtitle">权益升级</span>
          </div>
          <a href="#" class="button-link">立即开通></a>
        </div>
        <div class="enterprise-membership">
          <div class="button-text">
            <span class="button-title">企业会员</span>
            <span class="button-subtitle">采购补贴3200元</span>
          </div>
          <a href="#" class="button-link">立即开通></a>
        </div>
      </div>
    </div>
  </div>
</body>

</html><!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale = 1.0">
  <title>用户信息页面</title>
  <style>
    .user-info-container {
      width: 300px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .user-profile {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      width: 100%;
    }

    .profile-section {
      display: flex;
      align-items: center;
    }

    .profile-picture {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-right: 10px;
    }

    .user-actions-section {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .user-name {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .user-actions a {
      text-decoration: none;
      color: #333;
      margin-left: 10px;
    }

    .user-stats {
      width: 100%;
      margin-bottom: 20px;
    }

    .stat-row {
      display: flex;
      justify-content: space-around;
    }

    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .stat-icon {
      margin-bottom: 5px;
    }

    .stat-icon img {
      width: 30px;
      height: 30px;
    }

    .stat-text {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .stat-title {
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
    }

    .stat-value {
      font-weight: bold;
    }

    .user-orders {
      width: 100%;
      margin-bottom: 20px;
    }

    .order-row {
      display: flex;
      justify-content: space-around;
      margin-bottom: 10px;
    }

    .order-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #eee;
    }

    .order-title {
      color: #666;
    }

    .no-order-message {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
    }

    .no-order-message img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }

    .message-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .membership-buttons {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }

    .plus-membership,
    .enterprise-membership {
      width: 48%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      cursor: pointer;
      padding: 10px;
    }

    .plus-membership {
      background-color: #ffd700;
    }

    .enterprise-membership {
      background-color: #007bff;
      color: #fff;
    }

    .button-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 10px;
    }

    .button-title {
      font-size: 16px;
      font-weight: bold;
    }

    .button-subtitle {
      font-size: 12px;
    }

    .button-link {
      background-color: #333;
      color: #fff;
      padding: 5px 10px;
      border-radius: 3px;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <div class="user-info-container">
    <div class="user-profile">
      <div class="profile-section">
        <img src="/image/头像.jpeg" alt="用户头像" class="profile-picture">
      </div>
      <div class="user-actions-section">
        <div class="user-name">北_巷_</div>
        <div class="user-actions">
          <a href="#">切换账号</a> | <a href="#">退出</a>
        </div>
      </div>
    </div>
    <div class="user-stats">
      <div class="stat-row">
        <div class="stat-item">
          <div class="stat-icon"><img src="/image/z1.png" alt="浏览记录图标" class="icon"></div>
          <div class="stat-text">
            <a class="stat-title" href="#">浏览记录</a>
            <span class="stat-value">0</span>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-icon"><img src="/image/z2.png" alt="商品收藏图标" class="icon"></div>
          <div class="stat-text">
            <span class="stat-title">商品收藏</span>
            <span class="stat-value">0</span>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-icon"><img src="/image/z3.png" alt="店铺关注图标" class="icon"></div>
          <div class="stat-text">
            <span class="stat-title">店铺关注</span>
            <span class="stat-value">2</span>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-icon"><img src="/image/z4.png" alt="我的京东图标" class="icon"></div>
          <div class="stat-text">
            <span class="stat-title">我的京东</span>
            <span class="stat-value">0</span>
          </div>
        </div>
      </div>
      <div class="user-orders">
        <div class="order-row">
          <div class="order-item">
            <span class="order-title">待付款</span>
            <span class="order-value">0</span>
          </div>
          <div class="order-item">
            <span class="order-title">待收货</span>
            <span class="order-value">0</span>
          </div>
          <div class="order-item">
            <span class="order-title">待评价</span>
            <span class="order-value">0</span>
          </div>
          <div class="order-item">
            <span class="order-title">退换售后</span>
            <span class="order-value">0</span>
          </div>
        </div>
        <div class="no-order-message">
          <img src="/image/z5.png" alt="暂无订单图标">
          <div class="message-text">
            <span>暂无订单信息</span>
            <span>下单后查看更多订单信息</span>
          </div>
        </div>
      </div>
      <div class="membership-buttons">
        <div class="plus-membership">
          <div class="button-text">
            <span class="button-title">PLUS会员</span>
            <span class="button-subtitle">权益升级</span>
          </div>
          <a href="#" class="button-link">立即开通></a>
        </div>
        <div class="enterprise-membership">
          <div class="button-text">
            <span class="button-title">企业会员</span>
            <span class="button-subtitle">采购补贴3200元</span>
          </div>
          <a href="#" class="button-link">立即开通></a>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

酒酿祺子
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值