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

效果图

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CV(4)--边缘提取和相机模型

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 边缘提取&#xff08;涉及语义分割&#xff09;&#xff1a; 图象的边缘是指图象局部区域亮度变化显著的部分,也有正负之分&#xff0c;暗到亮为正 求边缘的幅度&#xff1a;sobel&#xff0c;Canny算子 图像分高频分量和低…

智能技术引领未来:自动图像标注的创新应用与发展

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;传知代码 欢迎大家点赞收藏评论&#x1f60a; 目录 概述算法原理核心逻辑效果演示使用方式参考文献 参考文献&#xff1a;需要本文的详细复现过程的项目源码、数据和预训练好的模型可从该地址处获…

C语言-排序

常见的排序算法分为以下四种&#xff0c;插入排序&#xff0c;选择排序&#xff0c;交换排序&#xff0c;归并排序。 一、插入排序 (一)直接插入排序 直接插入排序&#xff0c;将一段数组看做被分成已排序序列和未排序序列&#xff0c;排序过程是从未排序序列的元素开始&…

【Java笔记】LinkedList 底层结构

一、LinkedList 的全面说明 LinkedList底层实现了双向链表和双端队列特点可以添加任意元素(元素可以重复)&#xff0c;包括null线程不安全&#xff0c;没有实现同步 二、LinkedList 的底层操作机制 三、LinkedList的增删改查案例 public class LinkedListCRUD { public stati…

网管平台(基础篇):路由器的介绍与管理

路由器简介 路由器&#xff08;Router&#xff09;是一种计算机网络设备&#xff0c;它的主要作用是将数据通过打包&#xff0c;并按照一定的路径选择算法&#xff0c;将网络传送至目的地。路由器能够连接两个或更多个网络&#xff0c;并根据信道的情况自动选择和设定路由&…

排序算法(2):选择排序

问题 排序 [30, 24, 5, 58, 18, 36, 12, 42, 39] 选择排序 选择排序每次从待排序序列中选出最小&#xff08;或最大&#xff09;的元素&#xff0c;将其放到序列的起始位置&#xff0c;然后&#xff0c;再从剩余未排序元素中继续寻找最小&#xff08;或最大&#xff09;元素…

Tongweb8命令行使用收集(by lqw)

文章目录 声明对应版本修改thanos用户密码部署应用到默认实例节点相关操作新增节点(一般一个服务器ip只能装一个节点)启动节点(需确认节点没有运行)停止节点删除节点节点新增应用节点查看应用节点启动应用节点停止应用节点卸载应用(谨慎操作,卸载后应用就没有了,建议备份后…

Artec Leo3D扫描仪在重型机械设备定制中的应用【沪敖3D】

挑战&#xff1a;一家加拿大制造商需要有效的方法&#xff0c;为富于变化且难度较高的逆向工程&#xff0c;快速、安全、准确地完成重型机械几何采集。 解决方案&#xff1a;Artec Leo, Artec Studio, Geomagic for SOLIDWORKS 效果&#xff1a;Artec Leo三维扫描代替过去的手动…

题海拾贝:力扣 141.环形链表

Hello大家好&#xff01;很高兴我们又见面啦&#xff01;给生活添点passion&#xff0c;开始今天的编程之路&#xff01; 我的博客&#xff1a;<但凡. 我的专栏&#xff1a;《编程之路》、《数据结构与算法之美》、《题海拾贝》 欢迎点赞&#xff0c;关注&#xff01; 1、题…

Vite快速构建Vue教程

步骤 1: 初始化项目目录 创建一个名为 projects 的文件夹&#xff0c;作为存放所有 Vite 项目的根目录。这个文件夹将容纳多个独立的 Vite 项目。 步骤 2: 创建 Vite 项目 右键点击 projects 文件夹并选择“在此处打开终端”或使用您偏好的代码编辑器&#xff08;如 VSCode&…

深入理解 CSS 文本换行: overflow-wrap 和 word-break

前言 正常情况下&#xff0c;在固定宽度的盒子中的中文会自动换行。但是&#xff0c;当遇到非常长的英文单词或者很长的 URL 时&#xff0c;文本可能就不会自动换行&#xff0c;而会溢出所在容器。幸运的是&#xff0c;CSS 为我们提供了一些和文本换行相关的属性&#xff1b;今…

HarmonyOS 5.0应用开发——属性动画

【高心星出品】 文章目录 属性动画animateTo属性动画animation属性动画 属性动画 属性接口&#xff08;以下简称属性&#xff09;包含尺寸属性、布局属性、位置属性等多种类型&#xff0c;用于控制组件的行为。针对当前界面上的组件&#xff0c;其部分属性&#xff08;如位置属…

《探索视频数字人:开启未来视界的钥匙》

一、引言 1.1视频数字人技术的崛起 在当今科技飞速发展的时代&#xff0c;视频数字人技术如一颗璀璨的新星&#xff0c;正逐渐成为各领域瞩目的焦点。它的出现&#xff0c;犹如一场科技风暴&#xff0c;彻底改变了传统的视频制作方式&#xff0c;为各个行业带来了前所未有的机…

免费下载 | 2024算网融合技术与产业白皮书

《2024算网融合技术与产业白皮书&#xff08;2023年&#xff09;》的核心内容概括如下&#xff1a; 算网融合发展概述&#xff1a; 各国细化算网战略&#xff0c;指引行业应用创新升级。 算网融合市场快速增长&#xff0c;算力互联成为投资新热点。 算网融合产业模式逐渐成型…

基于卷积神经网络的图像二分类检测模型训练与推理实现教程 | 幽络源

前言 对于本教程&#xff0c;说白了&#xff0c;就是期望能通过一个程序判断一张图片是否为某个物体&#xff0c;或者说判断一张图片是否为某个缺陷。因为本教程是针对二分类问题&#xff0c;因此主要处理 是 与 不是 的问题&#xff0c;比如我的模型是判断一张图片是否为苹果…

RabbitMQ个人理解与基本使用

目录 一. 作用&#xff1a; 二. RabbitMQ的5中队列模式&#xff1a; 1. 简单模式 2. Work模式 3. 发布/订阅模式 4. 路由模式 5. 主题模式 三. 消息持久化&#xff1a; 消息过期时间 ACK应答 四. 同步接收和异步接收&#xff1a; 应用场景 五. 基本使用 &#xff…

前端怎么预览pdf

1.背景 后台返回了一个在线的pdf地址&#xff0c;需要我这边去做一个pdf的预览&#xff08;需求1&#xff09;&#xff0c;并且支持配置是否可以下载&#xff08;需求2&#xff09;&#xff0c;需要在当前页就能预览&#xff08;需求3&#xff09;。之前我写过一篇预览pdf的文…

滑动窗口算法专题

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

C# 中的Task

文章目录 前言一、Task 的基本概念二、创建 Task使用异步方法使用 Task.Run 方法 三、等待 Task 完成使用 await 关键字使用 Task.Wait 方法 四、处理 Task 的异常使用 try-catch 块使用 Task.Exception 属性 五、Task 的延续使用 ContinueWith 方法使用 await 关键字和异步方法…

【AIGC】如何高效使用ChatGPT挖掘AI最大潜能?26个Prompt提问秘诀帮你提升300%效率的!

还记得第一次使用ChatGPT时&#xff0c;那种既兴奋又困惑的心情吗&#xff1f;我是从一个对AI一知半解的普通用户&#xff0c;逐步成长为现在的“ChatGPT大神”。这一过程并非一蹴而就&#xff0c;而是通过不断的探索和实践&#xff0c;掌握了一系列高效使用的技巧。今天&#…