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

 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代码

/* 黑色导航栏样式 */
.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;
}

效果图

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/935802.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

TongWe7.0-东方通TongWeb控制台无法访问 排查

TongWe7.0-东方通TongWeb控制台无法访问 排查

**问题描述&#xff1a;**无法访问TongWeb的控制台 逐项排查&#xff1a; 1、控制台访问地址是否正确&#xff1a;http://IP:9060/console #IP是服务器的实际IP地址 2、确认TongWeb进程是否存在&#xff0c;执行命令&#xff1a;ps -ef|grep tongweb 3、确认TongWeb服务启动…
阅读更多...
【Python入门】传输与运算成分

【Python入门】传输与运算成分

文章一览 前言一、print函数&#xff08;输出&#xff09;1、字符串和数值类型&#xff0c;可以直接输出2、变量&#xff1a;无论什么类型&#xff0c;数值、字符、列表、字典... 可以直接输出3. 格式化输出3.1 str.format() 方法3.2 f-string 方法 二、input 函数1、函数 eval…
阅读更多...
Linux内核结构及源码概述

Linux内核结构及源码概述

参考&#xff1a;深入分析LINUX内核源码 深入分析Linux内核源码 (kerneltravel.net) Linux 是一个庞大、高效而复杂的操作系统&#xff0c;虽然它的开发起始于 Linus Torvalds 一个人&#xff0c;但随着时间的推移&#xff0c;越来越多的人加入了 Linux 的开发和对它的不断完善…
阅读更多...
linux - 存储管理

linux - 存储管理

1.了解硬件 -- 磁盘 硬盘有机械硬盘(HDD)和固态硬盘(SDD) 接下来&#xff0c;主要以机械磁盘为例(更具代表性&#xff0c;在linux系统层面&#xff0c;无论是机械磁盘还是固态硬盘&#xff0c;文件的读取和写入都iNode(索引节点)管理文件的元数据和实际数据块) 1.盘片&#x…
阅读更多...
某名校考研自命题C++程序设计——近10年真题汇总（上）

某名校考研自命题C++程序设计——近10年真题汇总（上）

本帖更新一些某校的编程真题&#xff0c;总体来说不难&#xff0c;考察的都是基本功&#xff0c;92高校大一期末的难度&#xff0c;不过有些细节颇为繁琐&#xff0c;各位还是需要一定程度上注意的~ 目录 一.分数求和 二.大小写字母转换 三.判断当年天序 四.交替合并字符串…
阅读更多...
滑动窗口算法专题

滑动窗口算法专题

滑动窗口简介 滑动窗口就是利用单调性&#xff0c;配合同向双指针来优化暴力枚举的一种算法。 该算法主要有四个步骤 1. 先进进窗口 2. 判断条件&#xff0c;后续根据条件来判断是出窗口还是进窗口 3. 出窗口 4.更新结果&#xff0c;更新结果这个步骤是不确定的&#xff0c…
阅读更多...
Prime2_解法二：openssl解密凭据

Prime2_解法二：openssl解密凭据

Prime2_解法二&#xff1a;openssl解密凭据 本博客提供的所有信息仅供学习和研究目的&#xff0c;旨在提高读者的网络安全意识和技术能力。请在合法合规的前提下使用本文中提供的任何技术、方法或工具。如果您选择使用本博客中的任何信息进行非法活动&#xff0c;您将独自承担全…
阅读更多...
R语言的数据结构-向量

R语言的数据结构-向量

【图书推荐】《R语言医学数据分析实践》-CSDN博客 《R语言医学数据分析实践 李丹 宋立桓 蔡伟祺 清华大学出版社9787302673484》【摘要 书评 试读】- 京东图书 (jd.com) R语言编程_夏天又到了的博客-CSDN博客 在R语言中&#xff0c;数据结构是非常关键的部分&#xff0c;它提…
阅读更多...
SpringBoot使用Nacos进行application.yml配置管理

SpringBoot使用Nacos进行application.yml配置管理

Nacos是阿里巴巴开源的一个微服务配置管理和服务发现的解决方案。它提供了动态服务发现、配置管理和 服务管理平台。Nacos的核心功能包括服务发现、配置管理和动态服务管理&#xff0c;使得微服务架构下的服务治理 变得简单高效。 Nacos的设计基于服务注册与发现、配置管理、动…
阅读更多...
【Java学习笔记】Collections 工具类

【Java学习笔记】Collections 工具类

一、基本介绍 Collections 是一个操作 Set、List 和 Map 等集合的工具类Collections 中提供了一系列静态的方法对集合元素进行排序、查询和修改等操作 二、排序操作&#xff1a;&#xff08;均为 static 方法) 三、查找、替换
阅读更多...
【含开题报告+文档+PPT+源码】基于ssm框架的购物交流圈交流及市场服务平台

【含开题报告+文档+PPT+源码】基于ssm框架的购物交流圈交流及市场服务平台

开题报告 随着互联网技术的迅猛发展&#xff0c;社交网络和电子商务已成为人们日常生活中不可或缺的一部分。特别是在移动互联网的普及下&#xff0c;人们越来越倾向于通过在线平台进行交流、分享和购物。这种趋势为基于 SSM&#xff08;Spring、SpringMVC、MyBatis&#xff0…
阅读更多...
Datawhale AI 冬令营（第一期）定制你的第一个专属模型-学习笔记

Datawhale AI 冬令营（第一期）定制你的第一个专属模型-学习笔记

最近我报名参加了Datawhale组织的主题为“动手学系列&#xff0c;人人都能应用的AI”的Datawhale AI冬令营&#xff08;第一期&#xff09;。 本次学习一共12天&#xff0c;从12月10日-12月21日&#xff0c;学习会包含【跑通速通手册】&#xff0c;【学习大模型微调&数据集…
阅读更多...
GS-SLAM论文阅读--RGBDS-SLAM

GS-SLAM论文阅读--RGBDS-SLAM

前言 最近GS-SLAM领域的工作层出不穷&#xff0c;有很多不错的工作出现。接下来慢慢写一下相关博客。 文章目录 前言1.背景介绍2.关键内容2.1 3D多层次金字塔高斯喷溅2.2 紧密耦合多特征重构优化2.3总体流程 3.文章贡献4.个人思考 1.背景介绍 高保真重建是密集SLAM的关键。最…
阅读更多...
使用EventLog Analyzer进行Apache日志监控和日志分析

使用EventLog Analyzer进行Apache日志监控和日志分析

一、什么是Apache日志分析 Apache日志分析是网站管理和维护的重要部分&#xff0c;通过分析Apache服务器生成的日志文件&#xff0c;可以了解网站的访问情况、识别潜在的安全问题、优化网站性能等。 二、Apache日志类型 Apache日志主要有两种类型&#xff1a;访问日志&a…
阅读更多...
[计算机网络]IP地址推行的“书同文，车同轨”

[计算机网络]IP地址推行的“书同文，车同轨”

硬件地址无法直接转换的故事 在很久很久以前&#xff0c;网络世界就像一个庞大的帝国&#xff0c;各个村落&#xff08;网络&#xff09;都有自己的语言&#xff08;硬件地址&#xff09;。每个村落都有自己的规则和习惯&#xff0c;村里的每户人家&#xff08;设备&#xff0…
阅读更多...
鸿蒙NEXT开发案例：九宫格随机

鸿蒙NEXT开发案例：九宫格随机

【引言】 在鸿蒙NEXT开发中&#xff0c;九宫格抽奖是一个常见且有趣的应用场景。通过九宫格抽奖&#xff0c;用户可以随机获得不同奖品&#xff0c;增加互动性和趣味性。本文将介绍如何使用鸿蒙开发框架实现九宫格抽奖功能&#xff0c;并通过代码解析展示实现细节。 【环境准…
阅读更多...
idea 配置 git .gitignore文件配置

idea 配置 git .gitignore文件配置

.gitignore 内容 .idea/ *.iml target/ *.class *.log .iml在idea项目里面创建一个.gitignore名字的文件&#xff0c;然后把这个文件提交到git上。我一般是放到.idea同级目录。 我遇到了几种情况这个文件配置了但是不生效的情况 第一种 Git的缓存可能会导致配置不生效。尝试…
阅读更多...
H.323音视频协议

H.323音视频协议

概述 H.323是国际电信联盟&#xff08;ITU&#xff09;的一个标准协议栈&#xff0c;该协议栈是一个有机的整体&#xff0c;根据功能可以将其分为四类协议&#xff0c;也就是说该协议从系统的总体框架&#xff08;H.323&#xff09;、视频编解码&#xff08;H.263&#xff09;、…
阅读更多...
快速掌握Quartz.Net计划任务调度框架，轻松实现定时任务

快速掌握Quartz.Net计划任务调度框架，轻松实现定时任务

前言 Quartz.Net是一个开源的作业调度框架&#xff0c;可以用于管理计划任务和定期执行。Quartz.Net提供了丰富的作业计划选项&#xff0c;例如精确或模糊时间表达式、日期和时间限制等。Quartz.Net采用分布式架构&#xff0c;允许在多个计算机上运行任务。 Quartz.Net架构设…
阅读更多...
【开源大屏】玩转开源积木BI，从0到1设计一个大屏

【开源大屏】玩转开源积木BI，从0到1设计一个大屏

积木 BI 重磅推出免费大屏设计器&#xff01;功能超强大&#xff0c;操作超流畅&#xff0c;体验超酷炫。快来体验一下吧。 让我们一起来看一下如何从0到1设计一个大屏。 一、积木BI大屏介绍 积木BI可视化数据大屏 是一站式数据可视化展示平台&#xff0c;旨在帮助用户快速通…
阅读更多...
最新文章

Copyright @ 2022~2023