图片：
代码：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>用户信息页面</title><style>body {font-family: Arial, sans-serif;margin: 20px;}.user-info {display: flex;align-items: center;margin-bottom: 20px;}.user-info img {width: 50px;height: 50px;border-radius: 50%;margin-right: 10px;}.user-id {font-size: 18px;}.user-options {display: flex;justify-content: space-between;margin-bottom: 20px;}.user-options a {text-decoration: none;color: black;}.stats {display: flex;justify-content: space-between;margin-bottom: 20px;}.stats-item {text-align: center;}.stats-number {font-size: 20px;font-weight: bold;}.no-order-info {display: flex;align-items: center;margin-bottom: 20px;}.no-order-info img {width: 50px;height: 50px;margin-right: 10px;}.membership {display: flex;justify-content: space-between;}.membership-item {width: 45%;padding: 10px;border-radius: 5px;text-align: center;cursor: pointer;}.plus-membership {background-color: #ffd700;}.enterprise-membership {background-color: #00bfff;color: white;}</style>
</head>
<body><div class="user-info"><img src="https://example.com/user_avatar.jpg" alt="用户头像"><div class="user-id">93296zjth852h8</div></div><div class="user-options"><a href="#">切换账号</a><a href="#">退出</a><a href="#">浏览记录</a><a href="#">商品收藏</a><a href="#">店铺关注</a><a href="#">我的京东</a></div><div class="stats"><div class="stats-item"><div class="stats-number">0</div>待付款</div><div class="stats-item"><div class="stats-number">0</div>待收货</div><div class="stats-item"><div class="stats-number">7</div>待评价</div><div class="stats-item"><div class="stats-number">1</div>退换售后</div></div><div class="no-order-info"><img src="https://example.com/no_order_icon.jpg" alt="暂无订单图标"><div>暂无订单信息<br>下单后查看更多订单信息</div></div><div class="membership"><div class="membership-item plus-membership"><div>PLUS会员</div><div>权益升级</div><div><a href="#">立即开通></a></div></div><div class="membership-item enterprise-membership"><div>企业会员</div><div>采购补贴3200元</div><div><a href="#">立即开通></a></div></div></div>
</body>
</html>图片：
代码：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>飙升榜</title><style>body {font-family: Arial, sans-serif;margin: 20px;}.ranking-container {width: 300px;}.ranking-header {display: flex;align-items: center;margin-bottom: 10px;}.ranking-header img {width: 50px;height: 50px;margin-right: 10px;}.ranking-title {font-size: 18px;font-weight: bold;}.ranking-item {display: flex;align-items: center;margin-bottom: 5px;}.ranking-number {width: 20px;margin-right: 10px;font-weight: bold;}.ranking-content {flex: 1;}.view-all {text-align: right;margin-top: 10px;}</style>
</head>
<body><div class="ranking-container"><div class="ranking-header"><img src="https://example.com/ranking_icon.png" alt="飙升榜图标"><div class="ranking-title">飙升榜</div></div><div class="ranking-item"><div class="ranking-number">1</div><div class="ranking-content">不重逢</div></div><div class="ranking-item"><div class="ranking-number">2</div><div class="ranking-content">温暖的房子</div></div><div class="ranking-item"><div class="ranking-number">3</div><div class="ranking-content">永不熄灭的火焰</div></div><div class="ranking-item"><div class="ranking-number">4</div><div class="ranking-content">怪诞心理学</div></div><div class="ranking-item"><div class="ranking-number">5</div><div class="ranking-content">忒修斯的船</div></div><div class="ranking-item"><div class="ranking-number">6</div><div class="ranking-content">晨光里有你</div></div><div class="ranking-item"><div class="ranking-number">7</div><div class="ranking-content">No Cap (Phonk口水)</div></div><div class="ranking-item"><div class="ranking-number">8</div><div class="ranking-content">Fire! (feat. YUQI ((G)I-DLE),...</div></div><div class="ranking-item"><div class="ranking-number">9</div><div class="ranking-content">Teeth</div></div><div class="ranking-item"><div class="ranking-number">10</div><div class="ranking-content">你是旷野 是山间的风</div></div><div class="view-all"><a href="#">查看全部></a></div></div>
</body>
</html>
