【前端开发】HTML+CSS网页，可以拿来当作业（免费开源）

violet_evergarden.2024-12-14 20:04

HTML代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content_lizhongyu="width=device-width, initial-scale=1.0">
  <title>小兔鲜儿-新鲜、惠民、快捷</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 黑色导航栏 -->
  <nav class="one_black-bar_zhengboming">
    <div class="content_zhengboming">
      <p class="text_zhengboming">请先登录</p>
      <p class="line_zhengboming">|</p>
      <p class="text_zhengboming">免费注册</p>
      <p class="line_zhengboming">|</p>
      <p class="text_zhengboming">我的订单</p>
      <p class="line_zhengboming">|</p>
      <p class="text_zhengboming">会员中心</p>
      <p class="line_zhengboming">|</p>
      <p class="text_zhengboming">购物中心</p>
      <p class="line_zhengboming">|</p>
      <p class="text_zhengboming">在线客服</p>
      <p class="line_zhengboming">|</p>
      <p class="text_zhengboming">手机版</p>
    </div>
  </nav>
  <!-- 白色导航栏 -->
  <div class="two_white-bar_zhengboming">
    <div class="logo_zhengboming"></div>
    <div class="center_zhengboming">
      <a class="item_zhengboming">首页</a>
      <a class="item_zhengboming">生鲜</a>
      <a class="item_zhengboming">美食</a>
      <a class="item_zhengboming">餐厨</a>
      <a class="item_zhengboming">电器</a>
      <a class="item_zhengboming">居家</a>
      <a class="item_zhengboming">洗护</a>
      <a class="item_zhengboming">孕婴</a>
      <a class="item_zhengboming">服装</a>
    </div>
    <!-- 搜索框 -->
    <div class="search_zhengboming">
      <div class="icon_zhengboming"></div>
      <input type="text" placeholder="搜一搜">
    </div>
    <!-- 购物车图标 -->
    <div class="card_zhengboming">
      <!-- 右上角提示信息 -->
      <div class="tip_zhengboming">2</div>
    </div>
  </div>
  <!-- banner布局 -->
  <div class="three_banner_zhengboming">
    <div class="left_zhengboming">
      <div class="item_zhengboming">
        <span class="category_zhengboming">生鲜</span>
        <span class="description_zhengboming">水果 蔬菜</span>
        <div class="arrow_zhengboming">></div>
      </div>
      <div class="item_zhengboming">
        <span class="category_zhengboming">美食</span>
        <span class="description_zhengboming">面点 干果</span>
        <div class="arrow_zhengboming">></div>
      </div>
      <div class="item_zhengboming">
        <span class="category_zhengboming">餐厨</span>
        <span class="description_zhengboming">数码产品</span>
        <div class="arrow_zhengboming">></div>
      </div>
      <div class="item_zhengboming">
        <span class="category_zhengboming">电器</span>
        <span class="description_zhengboming">床品 四件套 被枕</span>
        <div class="arrow_zhengboming">></div>
      </div>
      <div class="item_zhengboming">
        <span class="category_zhengboming">居家</span>
        <span class="description_zhengboming">奶粉 杬貝 補食</span>
        <div class="arrow_zhengboming">></div>
      </div>
      <div class="item_zhengboming">
        <span class="category_zhengboming">洗护</span>
        <span class="description_zhengboming">滉茇 況馿 美牧</span>
        <div class="arrow_zhengboming">></div>
      </div>
      <div class="item_zhengboming">
        <span class="category_zhengboming">孕婴</span>
        <span class="description_zhengboming">奶粉 玩貝</span>
        <div class="arrow_zhengboming">></div>
      </div>
      <div class="item_zhengboming">
        <span class="category_zhengboming">服饰</span>
        <span class="description_zhengboming"> 女装 男装</span>
        <div class="arrow_zhengboming">></div>
      </div>
      <div class="item_zhengboming">
        <span class="category_zhengboming">杂贷</span>
        <span class="description_zhengboming">户外 图书</span>
        <div class="arrow_zhengboming">></div>
      </div>
      <div class="item_zhengboming">
        <span class="category_zhengboming">品牌</span>
        <span class="description_zhengboming">品牌制造</span>
        <div class="arrow_zhengboming">></div>
      </div>
    </div>
    <!-- 右侧小箭头 -->
    <div class="right_zhengboming">
      <div class="prev_btn_zhengboming">
        < </div>
          <div class="next_btn_zhengboming">
            >
          </div>
      </div>
    </div>
  </div>
  <!-- 新鲜好物 -->
  <div class="four_xinxianhaowu_zhengboming">
    <div class="top_zhengboming">
      <div class="left_zhengboming">
        <div class="title_zhengboming">
          新鲜好物
        </div>
        <div class="tip_zhengboming">
          新鲜出炉 品牌靠谱
        </div>
      </div>
      <div class="right_zhengboming">
        查看更多>
      </div>
    </div>
    <!-- 新鲜好物内容 -->
    <div class="content_zhengboming">
      <div class="item_zhengboming">
        <img src="/images/new_goods_1.jpg">
        <p class="name">睿米无线吸尘器 F8</p>
        <p class="price">￥<span class="num">899</span></p>
      </div>
      <div class="item_zhengboming">
        <img src="/images/new_goods_2.jpg">
        <p class="name">智能环绕 3D 空调</p>
        <p class="price">￥<span class="num">1299</span></p>
      </div>
      <div class="item_zhengboming">
        <img src="/images/new_goods_3.jpg">
        <p class="name">广东软软襦米煲仔饭</p>
        <p class="price">￥<span class="num">129</span></p>
      </div>
      <div class="item_zhengboming">
        <img src="/images/new_goods_4.jpg">
        <p class="name">罗西机械智能手表</p>
        <p class="price">￥<span class="num">3399</span></p>
      </div>
    </div>
  </div>
  <!-- 生鲜 -->
  <div class="five_shengxian_zhengboming">
    <!-- 生鲜顶部 -->
    <div class="top_zhengboming">
      <div class="title_zhengboming">
        生鲜
      </div>
      <div class="right_zhengboming">
        <div class="left_zhengboming">
          <div class="item_zhengboming active_zhengboming">水果</div>
          <div class="item_zhengboming">蔬菜</div>
          <div class="item_zhengboming">肉食蛋</div>
          <div class="item_zhengboming">裤装</div>
          <div class="item_zhengboming">衬衫</div>
          <div class="item_zhengboming">T恤</div>
          <div class="item_zhengboming">内衣</div>
        </div>
        <div class="right_zhengboming">
          查看更多
        </div>
      </div>
    </div>
    <!-- 生鲜内容 -->
    <div class="content_zhengboming">
      <div class="left_zhengboming"></div>
      <div class="right_zhengboming">
        <div class="item_zhengboming">
          <img src="/images/fresh_goods_1.jpg" alt="">
          <p>美膛 智利原味三文鱼排 240g卷4片婆海鲜年皮</p>
          <p>￥59</p>
          <!-- 隐藏提示框 -->
          <div class="hidden_zhengboming">
            <span>找相似</span><br>
            <span>------------------</span><br>
            <span>发现更多宝贝></span>
          </div>
        </div>
        <div class="item_zhengboming">
          <img src="/images/fresh_goods_2.jpg" alt="">
          <p>红功尖 麻辣小龙虾
            1.5kg 4.6楼J25.32只
            火铜食材</p>
          <p>￥79</p>
          <div class="hidden_zhengboming">
            <span>找相似</span><br>
            <span>------------------</span><br>
            <span>发现更多宝贝></span>
          </div>
        </div>
        <div class="item_zhengboming">
          <img src="/images/fresh_goods_3.jpg" alt="">
          <p>三都港 冷冻无公害黄
            花鱼 700g 2条 美
            淘鲜水产</p>
          <p>￥49</p>
          <div class="hidden_zhengboming">
            <span>找相似</span><br>
            <span>------------------</span><br>
            <span>发现更多宝贝></span>
          </div>
        </div>
        <div class="item_zhengboming">
          <img src="/images/fresh_goods_4.jpg" alt="">
          <p>渔公码头 大连鲜食入
            味 即龠湃卷 辽整刺曲
            调味海</p>
          <p>￥899</p>
          <div class="hidden_zhengboming">
            <span>找相似</span><br>
            <span>------------------</span><br>
            <span>发现更多宝贝></span>
          </div>
        </div>
        <div class="item_zhengboming">
          <img src="/images/fresh_goods_5.jpg" alt="">
          <p>陆南白心火龙果4个装
            标重里400-5509
            期鲜水果</p>
          <p>￥20</p>
          <div class="hidden_zhengboming">
            <span>找相似</span><br>
            <span>------------------</span><br>
            <span>发现更多宝贝></span>
          </div>
        </div>
        <div class="item_zhengboming">
          <img src="/images/fresh_goods_6.jpg" alt="">
          <p>广西沃柑 新鲜水果 相
            播1.54g
            新鲜水栗</p>
          <p>￥10</p>
          <div class="hidden_zhengboming">
            <span>找相似</span><br>
            <span>------------------</span><br>
            <span>发现更多宝贝></span>
          </div>
        </div>
        <div class="item_zhengboming">
          <img src="/images/fresh_goods_7.jpg" alt="">
          <p>进口 牛油果 6个英 单
            果重约130-180g
            新鮮水用</p>
          <p>￥50</p>
          <div class="hidden_zhengboming">
            <span>找相似</span><br>
            <span>------------------</span><br>
            <span>发现更多宝贝></span>
          </div>
        </div>
        <div class="item_zhengboming">
          <img src="/images/fresh_goods_8.jpg" alt="">
          <p>泰国进口山竹5A股
            5000
            新鲜水果</p>
          <p>￥60</p>
          <div class="hidden_zhengboming">
            <span>找相似</span><br>
            <span>------------------</span><br>
            <span>发现更多宝贝></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 最新专题 -->
  <div class="fix_zhuanti_zhengboming">
    <div class="top_zhengboming">
      <div class="left_zhengboming">
        最新专题
      </div>
      <div class="right_zhengboming">
        查看全部
      </div>
    </div>
    <!-- 最新专题内容 -->
    <div class="content_zhengboming">
      <div class="item_zhengboming">
        <div class="img_zhengboming">
          <div class="info_zhengboming">
            <div class="left_zhengboming">
              <p>吃这些美食才不会辜负自己</p>
              <p>餐厨起居洗护好物</p>
            </div>
            <div class="right_zhengboming">
              ￥29.9起
            </div>
          </div>
        </div>
        <!-- 最新专题底部 -->
        <div class="bottom_zhengboming">
          <div class="left_zhengboming">
            <img src="/images/xin.png" width="20"></img>
            <div>1220</div>
            <img src="/images/show.png" width="20"></img>
            <div>1800</div>
          </div>
          <div class="right_zhengboming">
            <img src="/images/liulan.png" width="20"></img>
            <div>246</div>
          </div>
        </div>
      </div>
      <div class="item_zhengboming">
        <div class="img_zhengboming" style="background-image: url('/images/topic_goods_2.jpg');">
          <div class="info_zhengboming">
            <div class="left_zhengboming">
              <p>吃这些美食才不会辜负自己</p>
              <p>餐厨起居洗护好物</p>
            </div>
            <div class="right_zhengboming">
              ￥29.9起
            </div>
          </div>
        </div>
        <div class="bottom_zhengboming">
          <div class="left_zhengboming">
            <img src="/images/xin.png" width="20"></img>
            <div>1220</div>
            <img src="/images/show.png" width="20"></img>
            <div>1800</div>
          </div>
          <div class="right_zhengboming">
            <img src="/images/liulan.png" width="20"></img>
            <div>246</div>
          </div>
        </div>
      </div>
      <div class="item_zhengboming">
        <div class="img_zhengboming" style="background-image: url('/images/topic_goods_3.jpg');">
          <div class="info_zhengboming">
            <div class="left_zhengboming">
              <p>吃这些美食才不会辜负自己</p>
              <p>餐厨起居洗护好物</p>
            </div>
            <div class="right_zhengboming">
              ￥29.9起
            </div>
          </div>
        </div>
        <div class="bottom_zhengboming">
          <div class="left_zhengboming">
            <img src="/images/xin.png" width="20"></img>
            <div>1220</div>
            <img src="/images/show.png" width="20"></img>
            <div>1800</div>
          </div>
          <div class="right_zhengboming">
            <img src="/images/liulan.png" width="20"></img>
            <div>246</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部内容 -->
  <div class="seven_bottom_zhengboming">
    <div class="top_zhengboming">
      <div class="item_zhengboming">
        <p class="title_zhengboming">贴心客服</p>
        <div class="icon_zhengboming">
          <div class="left_zhengboming">
            <img src="/images/wx.png" alt="" width="30">
            <p>在线咨询</p>
          </div>
          <div class="right_zhengboming">
            <img src="/images/wenhao.png" alt="" width="30">
            <p>问题处理</p>
          </div>
        </div>
      </div>
      <div class="item_zhengboming">
        <p class="title_zhengboming">公司详情</p>
        <div class="icon_zhengboming">
          <div class="left_zhengboming">
            <img src="/images/wx2.png" alt="" width="30">
            <p>官方账号</p>
          </div>
          <div class="right_zhengboming">
            <img src="/images/wb.png" alt="" width="30">
            <p>公司微博</p>
          </div>
        </div>
      </div>
      <div class="item_zhengboming">
        <p class="title_zhengboming">获取 APP</p>
        <div class="icon_zhengboming">
          <div class="left_zhengboming">
            <img src="/images/qrcode.png" alt="" width="100%">
          </div>
          <div class="tip_zhengboming">
            <p>扫码下载</p>
            <p>轻松获取 APP</p>
            <div class="btn_zhengboming">
              下载入口
            </div>
          </div>
        </div>
      </div>
      <div class="item_zhengboming">
        <p class="title_zhengboming">服务电话</p>
        <div class="info_zhengboming">
          <p>500-1111-2222</p>
          <p>周一至周六 9:00-17:00</p>
        </div>
      </div>
    </div>
    <!-- 底部中间部分 -->
    <div class="center_zhengboming">
      <div class="item_zhengboming">
        <img src="/images/bottom1.png" alt="">
        <span>价格实惠</span>
      </div>
      <div class="item_zhengboming">
        <img src="/images/bottom2.png" alt="">
        <span>配送迅速</span>
      </div>
      <div class="item_zhengboming">
        <img src="/images/bottom3.png" alt="">
        <span>品质优良</span>
      </div>
    </div>
    <!-- 底部下方部分 -->
    <div class="footer_zhengboming">
      <p>公司介绍|帮助指南|售后保障|物流运输|商务合作|搜索指南|友好链接</p>
      <p>CopyRight @小兔鲜儿</p>
    </div>
  </div>
</body>

</html>

CSS代码

css 复制代码 
/* 黑色导航栏样式 */
.one_black-bar_zhengboming{
  width: 1240px;
  height: 52px;
  background-color: #333;
  position: relative;
  margin: 5px auto;
}
/* 黑色导航栏内容样式 */
.one_black-bar_zhengboming .content_zhengboming {
  position: absolute;
  right: 10%;
  line-height: 52px;
  display: flex;
  align-items: center;
  height: 52px;
}
/* 黑色导航栏文本样式 */
.one_black-bar_zhengboming .content_zhengboming .text_zhengboming {
  color: #dcdcdc;
  margin: 0 10px;
  cursor: pointer;
}
/* 黑色导航栏字体移入样式 */
.one_black-bar_zhengboming .content_zhengboming .text_zhengboming:hover {
  color: #27BA9B;
}
/* 黑色导航栏线条颜色 */
.one_black-bar_zhengboming .content_zhengboming .line_zhengboming {
  color: #666;
}
/* 白色导航栏样式 */
.two_white-bar_zhengboming {
  width: 1240px;
  height: 100px;
  display: flex;
  margin: 5px auto;
  align-items: center;
}
/* 白色导航栏logo样式 */
.two_white-bar_zhengboming .logo_zhengboming {
  width: 207px;
  height: 70px;
  background-image: url('/images/logo.png');
  background-size: 100% 100%;
}
/* 白色导航栏中间布局 */
.two_white-bar_zhengboming .center_zhengboming {
  width: 756px;
  height: 70px;
  display: flex;
  justify-content: space-around;
}
.two_white-bar_zhengboming .center_zhengboming .item_zhengboming {
  line-height: 70px;
  font-size: 18px;
}
/* 搜索部分样式 */
.two_white-bar_zhengboming .search_zhengboming {
  width: 172px;
  height: 70px;
  display: flex;
  align-items: center;
  position: relative;
}
.two_white-bar_zhengboming .search_zhengboming .icon_zhengboming {
  background-image: url('/images/search.png');
  width: 30px;
  height: 30px;
  position: absolute;
}
.two_white-bar_zhengboming .search_zhengboming input {
  padding-left: 30px;
  width: 80%;
  height: 31px;
  border: none;
  outline: none;
  border-bottom: 3px solid #eee;
}
.two_white-bar_zhengboming .card_zhengboming {
  background-image: url('/images/car.png');
  width: 23px;
  height: 23px;
  position: relative;
}
/* 购物车样式 */
.two_white-bar_zhengboming .card_zhengboming .tip_zhengboming {
  width: 15px;
  height: 12px;
  background-color: #e2643a;
  font-size: 10px;
  color: white;
  border-radius: 3px;
  text-align: center;
  line-height: 10px;
  position: absolute;
  right: -8px;
}
/* banner布局 */
.three_banner_zhengboming {
  width: 1240px;
  height: 500px;
  margin: 5px auto;
  background-image: url('/images/banner_1.png');
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
}
/* banner左侧样式 */
.three_banner_zhengboming .left_zhengboming {
  width: 252px;
  height: 500px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}
/* banner左侧每一项 */
.three_banner_zhengboming .left_zhengboming .item_zhengboming {
  height: 50px;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  line-height: 50px;
}
.three_banner_zhengboming .left_zhengboming .item_zhengboming .category_zhengboming {
  font-size: 15px;
  margin-right: 10px;
}
.three_banner_zhengboming .left_zhengboming .item_zhengboming .description_zhengboming {
  font-size: 13px;
}
.three_banner_zhengboming .left_zhengboming .item_zhengboming .arrow_zhengboming {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
}
/* banner左侧每项鼠标移入样式 */
.three_banner_zhengboming .left_zhengboming .item_zhengboming:hover {
  background-color: #27ba9b;
}
/* banner右侧样式 */
.three_banner_zhengboming .right_zhengboming {
  display: flex;
  width: 988px;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
/* banner右侧箭头按钮样式 */
.three_banner_zhengboming .right_zhengboming .prev_btn_zhengboming,.next_btn_zhengboming {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  line-height: 45px;
  color: white;
}
/* 新鲜好物布局 */
.four_xinxianhaowu_zhengboming {
  width: 1240px;
  height: 520px;
  margin: 5px auto;
}
/* 新鲜好物上方布局 */
.four_xinxianhaowu_zhengboming .top_zhengboming {
  height: 114px;
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
  align-items: center;
}
.four_xinxianhaowu_zhengboming .top_zhengboming .left_zhengboming {
  display: flex;
  align-items: center;
}
.four_xinxianhaowu_zhengboming .top_zhengboming .left_zhengboming .title_zhengboming {
  font-size: 30px;
  margin-right: 30px;
}
.four_xinxianhaowu_zhengboming .top_zhengboming .left_zhengboming .tip_zhengboming {
  color: darkgray;
}
/* 新鲜好物内容样式 */
.four_xinxianhaowu_zhengboming .content_zhengboming {
  display: flex;
}
.four_xinxianhaowu_zhengboming .content_zhengboming .item_zhengboming {
  height: 405px;
  text-align: center;
  margin-right: 10px;
}
.four_xinxianhaowu_zhengboming .content_zhengboming .item_zhengboming img {
  width: 304px;
  height: 304px;
}
.four_xinxianhaowu_zhengboming .content_zhengboming .item_zhengboming .price {
  color: red;
}
.four_xinxianhaowu_zhengboming .content_zhengboming .item_zhengboming .price .num {
  font-size: 20px;
}
/* 生鲜布局 */
.five_shengxian_zhengboming {
  width: 1240px;
  height: 706px;
  margin: 5px auto 40px;
}
/* 生鲜顶部样式 */
.five_shengxian_zhengboming .top_zhengboming {
  height: 96px;
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
  align-items: center;
}
.five_shengxian_zhengboming .top_zhengboming .title_zhengboming {
  font-size: 25px;
}
.five_shengxian_zhengboming .top_zhengboming .right_zhengboming {
  display: flex;
}
.five_shengxian_zhengboming .top_zhengboming .right_zhengboming .left_zhengboming {
  display: flex;
  margin-right: 40px;
}
.five_shengxian_zhengboming .top_zhengboming .right_zhengboming .left_zhengboming .item_zhengboming {
  margin: 0 10px;
  padding: 0 8px;
  height: 30px;
}
/* 生鲜顶部选中样式 */
.five_shengxian_zhengboming .top_zhengboming .right_zhengboming .left_zhengboming .active_zhengboming {
  background-color: #27ba9b;
  color: white;
  border-radius: 5px;
}
.five_shengxian_zhengboming .top_zhengboming .right_zhengboming .right_zhengboming {
  color: darkgray;
}
/* 生鲜内容样式 */
.five_shengxian_zhengboming .content_zhengboming {
  display: flex;
}
.five_shengxian_zhengboming .content_zhengboming .left_zhengboming {
  width: 240px;
  height: 610px;
  background-image: url('/images/fresh_goods_cover.png');
  background-size: 100% 100%;
}
.five_shengxian_zhengboming .content_zhengboming .right_zhengboming {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
}
/* 生鲜内容中每一项样式 */
.five_shengxian_zhengboming .content_zhengboming .right_zhengboming .item_zhengboming {
  width: 225px;
  height: 304px;
  margin: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/* 生鲜内容中每一项鼠标移入样式 */
.five_shengxian_zhengboming .content_zhengboming .right_zhengboming .item_zhengboming:hover {
  border: 1px solid #27ba9b;
}
.five_shengxian_zhengboming .content_zhengboming .right_zhengboming .item_zhengboming:hover .hidden_zhengboming {
  bottom: 0;
}
.five_shengxian_zhengboming .content_zhengboming .right_zhengboming .item_zhengboming img {
  width: 184px;
  height: 184px;
}
.five_shengxian_zhengboming .content_zhengboming .right_zhengboming .item_zhengboming p:nth-child(3) {
  color: red;
}
/* 生鲜内容中隐藏部分 */
.five_shengxian_zhengboming .content_zhengboming .right_zhengboming .item_zhengboming .hidden_zhengboming {
  position: absolute;
  bottom: -80px;
  width: 225px;
  height: 80px;
  background-color: #27ba9b;
  color: white;
  text-align: center;
}
.five_shengxian_zhengboming .content_zhengboming .right_zhengboming .item_zhengboming .hidden_zhengboming p {
  margin: 0;
}
/* 专题部分样式 */
.fix_zhuanti_zhengboming {
  width: 1240px;
  height: 512px;
  margin: 20px auto;
  background-color: #f5f5f5;
}
/* 专题顶部样式 */
.fix_zhuanti_zhengboming .top_zhengboming {
  height: 115px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 50px;
}
.fix_zhuanti_zhengboming .top_zhengboming .left_zhengboming {
  font-size: 30px;
}
.fix_zhuanti_zhengboming .top_zhengboming .right_zhengboming {
  color: darkgray;
}
/* 专题内容样式 */
.fix_zhuanti_zhengboming .content_zhengboming {
  display: flex;
  justify-content: center;
}
/* 专题内容每项样式 */
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming {
  width: 350px;
  height: 356px;
  margin-right: 10px;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .img_zhengboming {
  height: 288px;
  background-size: 100% 100%;
  background-image: url('/images/topic_goods_1.jpg');
  display: flex;
  align-items: flex-end;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .img_zhengboming .info_zhengboming {
  width: 404px;
  height: 67px;
  display: flex;
  justify-content: space-around;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .img_zhengboming .info_zhengboming .left_zhengboming p {
  margin: 0;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .img_zhengboming .info_zhengboming .left_zhengboming p:nth-child(1) {
  color: white;
  margin-bottom: 10px;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .img_zhengboming .info_zhengboming .left_zhengboming p:nth-child(2) {
  color: darkgray;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .img_zhengboming .info_zhengboming .right_zhengboming {
  background-color: white;
  color: red;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 5px;
}
/* 专题内容底部样式 */
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .bottom_zhengboming {
  height: 67px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  align-items: center;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .bottom_zhengboming .left_zhengboming {
  display: flex;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .bottom_zhengboming .left_zhengboming div {
  margin-right: 20px;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .bottom_zhengboming .right_zhengboming {
  display: flex;
}
/* 底部样式 */
.seven_bottom_zhengboming {
  height: 643px;
}
/* 底部上方布局 */
.seven_bottom_zhengboming .top_zhengboming {
  height: 302px;
  display: flex;
  justify-content: center;  
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming {
  text-align: center;
  margin: 0 10px;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming p {
  color: darkgray;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .icon_zhengboming {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}
/* 左右两侧样式 */
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .icon_zhengboming .left_zhengboming,
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .icon_zhengboming .right_zhengboming {
  width: 70px;
  height: 70px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-right: 10px;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .icon_zhengboming .tip_zhengboming {
  font-size: 15px;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .icon_zhengboming .tip_zhengboming p {
  margin: 0;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .icon_zhengboming .tip_zhengboming .btn_zhengboming {
  margin-top: 10px;
  border-radius: 5px;
  padding: 5px 10px;
  color: white;
  background-color: #26b99a;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .info_zhengboming {
  margin-top: 30px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .info_zhengboming p {
  margin: 0;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .info_zhengboming p:nth-child(1) {
  font-size: 20px;
  color: #8d8c86;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .info_zhengboming p:nth-child(2) {
  font-size: 13px;
}
/* 底部中间部分样式 */
.seven_bottom_zhengboming .center_zhengboming {
  height: 172px;
  background-color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid white;
}
.seven_bottom_zhengboming .center_zhengboming .item_zhengboming {
  display: flex;
  align-items: center;
  margin: 0 10px;
}
.seven_bottom_zhengboming .center_zhengboming .item_zhengboming span {
  color: white;
  font-size: 20px;
}
/* 底部下方样式 */
.seven_bottom_zhengboming .footer_zhengboming {
  color: white;
  height: 169px;
  background-color: #333333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

效果图

相关推荐
mldong4 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器：npm 装包，10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排5 小时前
什么是 RAG？如何用 RAG 实现一个用户记忆？
前端·后端·ai编程
passerby60615 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角6 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼！7 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰7 小时前
迷茫焦虑期，我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi8 小时前
Vue2 组件通讯（三）：全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen9 小时前
面试官问我：AI 都能写代码了，前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马10 小时前
AI源码分析：拆解模型底层实现逻辑
前端
BillKu10 小时前
全局样式变量：CSS 自定义属性（--border-color）和SCSS 变量（$border-color）的说明
javascript·css·scss
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03如何新建文件夹？ 电脑新建文件夹的4种方法04历年考研数学一、数学二、数学三真题试卷及答案PDF05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08ZCode 周末送额度活动开启：3 亿 Token 免费领取09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费10AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路