【前端开发】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;
}

效果图

相关推荐
一棵开花的树，枝芽无限靠近你28 分钟前
【PPTist】历史记录功能
前端·笔记·学习
licy__1 小时前
Vue 2 中 v-text 和 v-html 指令的使用详解
开发语言·前端·javascript
tester Jeffky1 小时前
深入探索 jQuery：解锁前端开发的高效工具
前端·javascript·jquery
海上彼尚3 小时前
前端自己也能开启HTTPS
前端·vue.js·https·vue
陪你去流浪_4 小时前
Vue iframe嵌套的页面实现路由缓存 实现keep-alive效果
前端·vue.js·缓存
Jing_jing_X4 小时前
心情追忆- SEO优化提升用户发现率
前端·后端·产品经理·个人开发·流量运营
ekskef_sef4 小时前
2024年前端真实面试题集合（Vue篇02）
前端·javascript·vue.js
zhaocarbon5 小时前
vue canvas 绘制选定区域 矩形框
前端·javascript·vue.js
萧鼎5 小时前
探索 Robyn 框架 —— 下一代高性能 Web 框架
前端·robyn
热门推荐
01WPS-0DAY-20230809的分析和利用复现02【halcon】halcon字符识别——OCR03玄机平台应急响应—webshell查杀04游戏内存优化05量化方法怎么选？如何评估量化后的大模型LLM？06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07文心一言最新重磅发布！08某红书旋转滑块验证码分析与协议算法实现（高通过率）09Docker 夺命连环 15 问10AI AIgents时代-(三.)AutoGPT和AgentGPT