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

news2024/12/16 13:59:15

 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;
}

效果图

 

 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Unity3D】无限循环列表（扩展版）

【Unity3D】无限循环列表（扩展版）

基础版&#xff1a;【Unity技术分享】UGUI之ScrollRect优化_ugui scrollrect 优化-CSDN博客 using UnityEngine; using UnityEngine.UI; using System.Collections.Generic;public delegate void OnBaseLoopListItemCallback(GameObject cell, int index); public class BaseLo…
阅读更多...
Git-基础操作命令

Git-基础操作命令

目录 Git基础操作命令 case *查看提交日志 log 版本回退 get add . Git基础操作命令 我们创建并且初始化这个仓库以后&#xff0c;我们就要在里面进行操作。 Git 对于文件的增删改查存在几个状态&#xff0c;这些修改状态会随着我们执行Git的命令而发生变化。 untracked、…
阅读更多...
Flutter Navigator2.0的原理和Web端实践

Flutter Navigator2.0的原理和Web端实践

01 背景与动机 在Navigator 2.0推出之前&#xff0c;Flutter主要通过Navigator 1.0和其提供的 API&#xff08;如push(), pop(), pushNamed()等&#xff09;来管理页面路由。然而&#xff0c;Navigator 1.0存在一些局限性&#xff0c;如难以实现复杂的页面操作&#xff08;如移…
阅读更多...
【容器】k8s学习笔记基础部分（三万字超详细）

【容器】k8s学习笔记基础部分（三万字超详细）

概念 应用部署方式演变 在部署应用程序的方式上&#xff0c;主要经历了三个时代&#xff1a; 传统部署&#xff1a;互联网早期&#xff0c;会直接将应用程序部署在物理机上 优点&#xff1a;简单&#xff0c;不需要其它技术的参与 缺点&#xff1a;不能为应用程序定义资源使…
阅读更多...
PostgreSQL 常用运维SQL整理

PostgreSQL 常用运维SQL整理

一、查询并杀会话 -- 查询会话 select pid,usename,client_addr,client_port,query_start,query,wait_event from pg_stat_activity; -- 杀会话 select pg_terminate_backend(pid号); -- 使用如下命令自动生成杀会话语句 select datid,datname,pid,usesysid,usename,applicat…
阅读更多...
前端0基础用Cursor完成管理系统页面 - 1

前端0基础用Cursor完成管理系统页面 - 1

Cursor下载 下载链接: https://www.cursor.com/ Hello World! 作为完全不会前端的人&#xff0c;首先需要让AI帮我们搭建一个HelloWorld界面 确定语言框架 首先要给AI框定好前端语言和框架&#xff0c;由于AI的物料大量来自网上的开源项目&#xff0c;所以越是受欢迎的开源…
阅读更多...
系统组件优化的思考框架

系统组件优化的思考框架

我之前的文章里有分享过自己总结的做技术选型的思考框架&#xff0c;本文将会分享一下我总结的做系统组件调优/优化的思考框架。 组件优化的思考框架 常见的互联网架构基本离不开数据库、缓存、消息队列、搜索、数据处理等等各种组件&#xff0c;虽然组件的形态不一、功能不同…
阅读更多...
Linux shell的七大功能 ---自动补齐、管道机制、别名

Linux shell的七大功能 ---自动补齐、管道机制、别名

1、自动补齐---TAB 输入命令的前几个字符&#xff0c;按下tab键&#xff0c;会自动补齐完整的字符&#xff0c;若有多个命令、文件或目录的前几个字符相同&#xff0c;按下tab将会全部列举出来 2、管道机制---| 例如&#xff1a;ls -- help |more 将有关ls的帮助内容传递给“|…
阅读更多...
计算机网络-基础概念（HTTP，TPC/IP, DNS，URL）

计算机网络-基础概念（HTTP，TPC/IP, DNS，URL）

HTTP不同的版本 HTTP0.9于1990年问世&#xff0c;此时HTTP并没有作为正式的标准被建立。HTTP正式被公布是1996年的5月&#xff0c;版本命名为HTTP/1.0。HTTP1.1&#xff0c;1997年1月公布&#xff0c;目前仍然是主流版本的HTTP协议版本。 TCP/IP 通常使用的网络是在TCP/IP协…
阅读更多...
12.3【JAVA-EXP4-DEBUGSTUDY】

12.3【JAVA-EXP4-DEBUGSTUDY】

java升级版本 JDK 1.8 是 Java Development Kit 的第 8 版本&#xff0c;发布于 2014 年 3 月 18 日。这个版本是 Java SE&#xff08;Standard Edition&#xff09;的一部分&#xff0c;包含了 Java 编程语言的实现、编译器、调试工具和其他相关组件 JDK 1.8: 这里的 1.8 表…
阅读更多...
在Windows上运行mediapipe：适合新手的AI框架

在Windows上运行mediapipe：适合新手的AI框架

一、mediapipe简介 mediapipe可以被视为谷歌版的onnx&#xff0c;其设计目的在于跨平台部署AI模型&#xff0c;并提供一系列工具来监测不同平台、不同设备运行人工智能模型时的性能表现。 尽管mediapipe已经陆续支持训练自定义模型&#xff0c;但博主更推荐使用Pytorch/Tenso…
阅读更多...
自然语言处理：我的学习心得与笔记

自然语言处理：我的学习心得与笔记

Pytorch 1.Pytorch基本语法 1.1 认识Pytorch 1.2 Pytorch中的autograd 2.Pytorch初步应用 2.1 使用Pytorch构建一个神经网络 2.2 使用Pytorch构建一个分类器 小节总结 学习了什么是Pytorch. 。Pytorch是一个基于Numpy的科学计算包,作为Numpy的替代者,向用户提供使用GPU强大…
阅读更多...
IAR环境下STM32静态库编译及使用

IAR环境下STM32静态库编译及使用

IAR环境下STM32静态库编译及使用 前言 最近了解到了STM32的静态库与动态库&#xff0c;在此记录一下STM32静态库的生成与使用。 静态库的作用主要是对代码进行封装及保护&#xff0c;使其他使用者只知其然而不知其所以然&#xff0c;因为封装后的静态库只有.h文件没有.c文件。…
阅读更多...
【常考前端面试题总结】---2025

【常考前端面试题总结】---2025

React fiber架构 1.为什么会出现 React fiber 架构? React 15 Stack Reconciler 是通过递归更新子组件 。由于递归执行&#xff0c;所以更新一旦开始&#xff0c;中途就无法中断。当层级很深时&#xff0c;递归更新时间超过了 16ms&#xff0c;用户交互就会卡顿。对于特别庞…
阅读更多...
Leetcode 面试150题 399.除法求值

Leetcode 面试150题 399.除法求值

系列博客目录 文章目录 系列博客目录题目思路代码 题目 链接 思路 广度优先搜索 我们可以将整个问题建模成一张图&#xff1a;给定图中的一些点&#xff08;点即变量&#xff09;&#xff0c;以及某些边的权值&#xff08;权值即两个变量的比值&#xff09;&#xff0c;试…
阅读更多...
hbase读写操作后hdfs内存占用太大的问题

hbase读写操作后hdfs内存占用太大的问题

hbase读写操作后hdfs内存占用太大的问题 查看内存信息hbase读写操作 查看内存信息 查看本地磁盘的内存信息 df -h查看hdfs上根目录下各个文件的内存大小 hdfs dfs -du -h /查看hdfs上/hbase目录下各个文件的内存大小 hdfs dfs -du -h /hbase查看hdfs上/hbase/oldWALs目录下…
阅读更多...
使用webrtc-streamer查看实时监控

使用webrtc-streamer查看实时监控

摄像头配置&#xff08;海康摄像头为例&#xff09; 摄像头视频编码应改成H264格式 webrtc-streamer下载 webrtc-streamer下载地址 下载后解压出来双击运行&#xff0c;端口默认8000 VUE2项目引入文件 在项目静态文件“public”中需引入两个js文件“webrtcstreamer.js”与“…
阅读更多...
L1-3流量分析

L1-3流量分析

1. 初步分析 数据包下载 流量分析基础篇 使用科来网络分析系统&#xff0c;打开L1-3.pcapng数据包&#xff0c;查看数据包中ssh的协议占的比例较大。 2. 通过分析数据包L1-3&#xff0c;找出黑客的IP地址&#xff0c;并将黑客的IP地址作为FLAG(形式:[IP地址)提交; 获取的fl…
阅读更多...
【经典】制造供应链四类策略（MTS、MTO、ATO、ETO）细说

【经典】制造供应链四类策略（MTS、MTO、ATO、ETO）细说

关注作者 制造供应链的牛鞭问题与复杂问题主要是从两个方面解决&#xff0c;一是同步化供应链消减从需求到供应的放大效应&#xff0c;二是供应链细分&#xff0c;针对不同的客户、不同的需求供应的匹配策略来应对复杂性&#xff0c;更好的满足客户并以最低的总成本来实现。 对…
阅读更多...
前端成长之路：CSS盒子模型

前端成长之路：CSS盒子模型

盒子模型是页面布局的核心&#xff0c;通过盒子模型才能更好的进行页面布局。 网页布局的本质 网页布局的核心本质其实是&#xff1a;HTML网页元素就是一个个的盒子box&#xff0c;通过CSS可以设置好盒子的样式&#xff0c;和盒子需要摆放的位置&#xff1b;简单说来就是通过…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023