【前端开发】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;
}
效果图
相关文章：
【前端开发】HTML+CSS网页，可以拿来当作业（免费开源）
HTML代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content_lizhongyu"widthdevice-width, initial-scale1.0"><title>小兔鲜儿-新鲜、惠民、快捷<…...
java 导出word锁定且部分内容解锁可编辑
使用 Apache POI 创建带编辑限制的 Word 文档 在日常工作中，我们可能需要生成一些带有编辑限制的 Word 文档，例如某些段落只能被查看，而其他段落可以自由编辑。本文介绍如何使用 Apache POI 创建这样的文档，并通过代码实现相应的…...
Scala的隐式类
package hfd //隐式类 //任务：给之前的BaseUser添加新的功能，但是不要直接去改代码 //思路：把BaseUser通过隐式转换，改成一个新类型，而这个新类型中有这新的方法 //implicit class一个隐式转换函数类 //作用࿱…...
Jenkins流水线初体验（六）
DevOps之安装和配置 Jenkins (一) DevOps 之 CI/CD入门操作 (二) Sonar Qube介绍和安装（三） Harbor镜像仓库介绍&安装 （四） Jenkins容器使用宿主机Docker（五） Jenkins流水线初体验（六） 一、Jenkins流水线任务介绍 之前采用Jenkins的自由风格构建的项目，每个步骤…...
——字符设备驱动开发)
RK3568(二)——字符设备驱动开发
最基础的字符设备驱动开始，重点学习 Linux 下字符设备驱动开发框架。 驱动框架 Linux 应用程序对驱动程序的调用： 在 Linux 中一切皆为文件，驱动加载成功以后会在“/dev”目录下生成一个相应的文件，应用程序通过对这个名为“/de…...
apk反编译修改教程系列-----超简单修改apk中名称 包名 布局文本以及其中的文字选项 手机设置中apk对应修改演示【三十三】
💝💝💝在反编译apk中，每个初学者可能最感兴趣入门的就是修改包名 去更新以及其中选项文本的修改。这样循序渐进来激发学习的兴趣。了解一些apk中常见的修改方法。对于修改手机rom中的 系统类等等的apk原理都是一样的。这篇是应粉丝需要的修改apk基础教程. 通过博文了解…...
Git-分布式版本控制工具
目录 1. 概述 1. 1集中式版本控制工具 1.2分布式版本控制工具 2.Git 2.1 git 工作流程 1. 概述 在开发活动中，我们经常会遇到以下几个场景：备份、代码回滚、协同开发、追溯问题代码编写人和编写时间（追责）等。备份的话是为了…...
计算机进制的介绍
一.进制介绍 对于整数，有四种表示方式: 1）二进制:0,1，满2进1。 在golang中，不能直接使用二进制来表示一个整数，它沿用了c的特点。 参考:Go语言标准库文档中文版 | Go语言中文网 | Golang中文社区 | Golang中国 //赋值…...
【FreeMarker】实现生成Controller根据模板勾选的内容查询
需求：根据模板列表勾选的字段查询列表数据 FreeMarker代码： /*** 分页列表查询** param ${entityName?uncap_first}* param pageNo* param pageSize* param req* return*///AutoLog(value "${tableVo.ftlDescription}-分页列表查询")ApiOp…...
Redis 基础
一. redis 概述 Redis 是一个开源的、高性能的键值对（key-value）存储数据库，通常用作缓存、消息队列或持久化的数据存储。它的全称是 REmote DIctionary Server，最初由 Salvatore Sanfilippo 开发并于2009年发布。 redis 关键特点…...
【Linux】深入理解GCC/G++编译流程及库文件管理
目录 1.背景知识 2.gcc/g如何完成编译 (1) 预处理（进行宏替换） (2) 编译（生成汇编） (3) 汇编（生成机器可识别代码） (4) 链接（生成可执行文件或库文件） (5) 总结 (6) 函数库 …...
分布式 窗口算法 总结
前言 相关系列 《分布式 & 目录》《分布式 & 窗口算法 & 总结》《分布式 & 窗口算法 & 问题》 参考文献 《【算法】令牌桶算法》 固定窗口算法 简介 固定窗口算法是最简单的流量控制算法。固定窗口算法的核心原理是将系统的生命周期划分为一个个…...
多分类交叉熵与稀疏分类交叉熵
总结： 标签为 One-hot 编码的多分类问题，用分类交叉熵对于标签为整数的多分类问题，用稀疏分类交叉熵稀疏分类交叉熵内部会将整数标签转换为 One-hot 编码，而如果标签已经是 One-hot 编码的形式，再使用稀疏分类交叉熵就会多此一举。 算例 假设我们有三个类别：A、B 和 C。…...
ElasticSearch 简介
一、什么是 ElastcSearch？ ElasticSearch 是基于 Lucene 的 Restful 的分布式实时全文搜索引擎。 1.1 ElasticSearh 的基本术语概念 index 索引 索引类似与 mysql 中的数据库，ES 中的索引是存储数据的地方，包含了一堆有相似结构的文档数据…...
一些浅显易懂的IP小定义
IP归属地（也叫IP地址，IP属地） 互联网协议地址，每个设备上的唯一的网络身份证明。用于确保网络数据能够精准传送到你的设备上。 基于IP数据云全球IP归属地解析，示例Python代码 curl -X POST https://route.showapi.co…...
#渗透测试#漏洞挖掘#红蓝攻防#护网#sql注入介绍02-基于错误消息的SQL注入（Error-Based SQL Injection）
免责声明 本教程仅为合法的教学目的而准备，严禁用于任何形式的违法犯罪活动及其他商业行为，在使用本教程前，您应确保该行为符合当地的法律法规，继续阅读即表示您需自行承担所有操作的后果，如有异议，请立即停…...
C# 探险之旅：第三十六节 - 类型class之密封类Sealed Classes
嗨，探险家们！欢迎再次搭乘我们的C#魔法列车，今天我们要去一个神秘又有点“傲娇”的地方——密封类（Sealed Classes）领地。系好安全带，咱们要深入“密封”的奇妙世界啦！ 什么是密封类࿱…...
Error in v-on handler: “TypeError: handler.apply is not a function“
报错截图 原因 原来是我在.vue单文件中 data里面的属性和methods里面的方法重名了 解决 方面重新命名了一下和data里面的属性值不一样就可以了。...
)
《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(五)
《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(五) 你好，我是拉依达。 感谢所有阅读关注我的同学支持，目前博客累计阅读 27w，关注1.5w人。其中博客《最全Linux驱动开发全流程详细解析（持续更新）-CSDN博客》已经是 Linux驱动 相关内容搜索的推荐首位，感谢大家支持。 《拉…...
《B+树的原理与实践：探索高效数据存储与检索》
一、B树的基本原理 B树的定义 B树是一种自平衡的树结构，它是由B树衍生而来的。B树的特点是所有的数据记录都存储在叶子节点上，而叶子节点本身按照关键字的大小顺序相连，形成一个有序链表。 B树的结构 B树的结构包括以下几个部分࿱…...
Android无障碍服务监听实现自动点击按钮
原理： 通过监听窗口改变事件，监听目标应用，通过视图ID（或文本、或描述、或其他如坐标之类的）找到目标视图，使用无障碍动作点击方法点击它 无障碍服务实现： 1、写一个自己的无障碍服务继承Acc…...
Jenkins 启动 程序 退出后 被杀死问题
参考 Spawning Processes From Build (jenkins.io) 解决jenkins脚本启动项目后进程被杀死_jenkins杀进程-CSDN博客...
前端样式练手：阴阳图+时钟的组合
开篇 今天的小作品是突然脑子灵光一闪写出来的，代码不多，就不过多赘述了。 代码实现 <template><div class"clock-container"><!-- 八卦图 --><!-- <div class"bagua"><divv-for"(trigram, ind…...
开源分布式系统追踪-03-CNCF jaeger-02-快速开始
分布式跟踪系列 CAT cat monitor 分布式监控 CAT-是什么？ cat monitor-02-分布式监控 CAT埋点 cat monitor-03-深度剖析开源分布式监控CAT cat monitor-04-cat 服务端部署实战 cat monitor-05-cat 客户端集成实战 cat monitor-06-cat 消息存储 skywalking …...
医学图像分割数据集脑肿瘤分割数据集labelme格式715张1类别
数据集格式：labelme格式(不包含mask文件，仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数)：715 标注数量(json文件个数)：715 标注类别数：1 标注类别名称:["tumor"] 每个类别标注的框数…...
2024.12.11-13——攻防世界unserialize3
知识点：PHP中的序列化和反序列化 一、序列化和反序列化 1.序列化(serialize) 将对象的状态信息转换为可以存储或传输的形式的过程，简单来说，就是将状态信息保存为字符串。为了解决不同机器之间传输复杂数据类型的一种机制 2.反序列化(uns…...
Docker的镜像
目录 1. 镜像是什么？？2. 镜像命令详解2.1 镜像命令清单2.2 docker rmi命令2.3 docker save命令2.4 docker load命令2.5 docker history命令2.6 docker import命令2.7 docker image prune命令2.8 docker build命令 3. 镜像的操作4. 离线迁移镜像5. 镜像存…...
深度学习训练参数之学习率介绍
学习率 1. 什么是学习率 学习率是训练神经网络的重要超参数之一，它代表在每一次迭代中梯度向损失函数最优解移动的步长，通常用 η \eta η 表示。它的大小决定网络学习速度的快慢。在网络训练过程中，模型通过样本数据给出预测值࿰…...
Vue技术中参数传递：Props与事件的实践指南
在Vue.js中，组件间的参数传递是构建动态和交互式应用的核心。本文将深入探讨如何通过Props和事件（$emit）在Vue组件间进行参数传递，并提供代码示例。 Props传递数据 Props是Vue中组件间传递数据的一种方式，它允许父组…...
刷题日志【4】
目录 1、猜数字大小 1、猜数字大小 题意有点抽象，我大概讲一下，就是在1——n里面会有一个目标数，我们通过猜数字的方式逼近这个数字，直到解出这个数，之前我们是用二分法求最快达到求解的问题，这道题多了每…...
IDEA对windows下的docker里面的Weblogic 进行远程调试（漏洞环境搭建）部署Vulhub漏洞环境
参考书籍：《Java代码审计》入门篇 人民邮电出版社 话不多说，上教程！！！ 环境很重要！！！！ 其他的环境不保证对 本机环境：java jdk 8 下载 选择 下载就行 然后 …...
【深度学习】Java DL4J基于多层感知机（MLP）构建公共交通优化模型
🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/?__c=1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编程，高并发设计，Springboot和微服务，熟悉Linux，ESXI虚拟化以及云原生Docker和K8s，热衷于探…...
医学分割数据集肾结石分割数据集labelme格式359张1类别
数据集格式：labelme格式(不包含mask文件，仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数)：359 标注数量(json文件个数)：359 标注类别数：1 标注类别名称:["kidney stone"] 每个类别标注的框数&…...
 运维实战)
Ansible自动化运维(五) 运维实战
Ansible自动化运维这部分我将会分为五个部分来为大家讲解 （一）介绍、无密钥登录、安装部署、设置主机清单 （二）Ansible 中的 ad-hoc 模式 模块详解（15）个 （三）Playbook 模式详解 …...
ReactPress最佳实践—搭建导航网站实战
Github项目地址：https://github.com/fecommunity/easy-blog 欢迎Star。 近期，阮一峰在科技爱好者周刊第 325 期中推荐了一款开源工具——ReactPress，ReactPress一个基于 Next.js 的博客和 CMS 系统，可查看 demo站点。（…...
Dual-Write Problem 双写问题（微服务）
原文链接https://www.confluent.io/blog/dual-write-problem/ 双写问题发生于当两个外部系统必须以原子的方式更新时。 问题 说有人到银行存了一笔钱，触发 DepositFunds 命令，DepositFunds 命令被发送到Account microservice。 Account microservice需…...
文件转曲，限制PDF文件编辑的最佳方案！
随着数字化进程的推进，PDF文件凭借其多样化的功能和优越的兼容性已经被广泛使用，成为了现代文档交流和存储的重要工具，满足了不同用户和行业的需求。 虽然PDF格式文件的功能很多，常见的比如阅读、编辑、加密、转换、还可用于印刷…...
call，apply，bind 深入
显示绑定 我们通常会碰见丢失绑定的情况，例如系统函数setTimeOut function foo() { console.log( this.a ); } var obj { a: 2, foo: foo }; var a "oops, global"; // a是全局对象的属性 setTimeout( obj.foo, 100 ); // "oops, globalca…...
监测预警智能分析中心建设项目方案
随着科技的不断进步，地理信息与遥感技术在国家治理、环境保护、灾害预警等领域发挥着越来越重要的作用。监测预警智能分析中心的建设，旨在通过集成先进的遥感技术、地理信息系统（GIS）、大数据分析和人工智能（AI&#x…...
redis stream轻量级消息队列
redis 5.0 之后新推出了stream数据结构，可以实现一个轻量级的消息队列，下面通过自定义注解和springboot使用一下redis stream 1.自定义注解 Target(ElementType.METHOD) Retention(value RetentionPolicy.RUNTIME) public interface MsgStreamListener …...
ORACLE SQL思路： 多行数据有相同字段就合并成一条数据 分页展示
数据 分数表： 学号，科目名（A,B,C），分数 需求 分页列表展示， 如果一个学号的科目有相同的分数， 合并成一条数据，用 拼接 科目名 ORACLE SQL 实现 SELECT Z.*, SUBSTR(DECODE(f…...
UE5制作倒计时功能
设置画布和文本 文本绑定 格式化时间 转到事件图表，计算时间，时间结束后面的事件可以按自己需求写 进入关卡蓝图，添加倒计时UI...
若依-帝可得app后端
视频地址 https://www.bilibili.com/video/BV1pf421B71v?t=510.1 APP后端技术栈 架构解析 验证码功能 开发环境使用改的是固定的验证码 12345正式环境使用的是 阿里云的短信方案@Override public void sendSms(String mobile) {// String code = RandomUtil.randomNumbers(5);…...
Vulnstack红日安全内网域渗透靶场2实战攻略
一：环境搭建 新增的网卡VMnet2，ip调成10段。 PC配置如下： DC在该环境中充当是域控。DC配置如下 ： WEB配置：需要两块网卡，相当于网关服务器。 作者把外网网段都写成了192.168.111.1/24，我们可以…...
苹果电脑可以安装windows操作系统吗?Mac OS X/OS X/macOS傻傻分不清?macOS系统的Java支持?什么是macOS的五大API法王?
苹果电脑可以安装windows操作系统吗? 先抛开虚拟机安装，苹果电脑可以安装Windows操作系统。苹果公司提供了一个名为Boot Camp的软件，它允许用户在Mac电脑上安装Windows操作系统。通过Boot Camp，用户可以在启动电脑时选择是要进入macOS还是Wi…...
 榜单数据解读)
benchANT (Time Series: Devops) 榜单数据解读
近日，国际权威数据库性能测试榜单 benchANT 更新了 Time Series: Devops（时序数据库）场景排名，KaiwuDB 数据库在 xsmall 和 small 两类规格下的时序数据写入吞吐、查询吞吐、查询延迟、成本效益等多项指标刷新榜单原有数据纪录 &a…...
React useEffect使用
useEffect依赖 是reac hook的函数 useEffect作用：不是由事件引起，而是由渲染本身引起的操作，比如发起请求，更改DOM 不发生任何的用户事件，组件渲染完毕之后就需要和服务器要数据，整个过程中属于‘只需要…...
Python随机抽取Excel数据并在处理后整合为一个文件
本文介绍基于Python语言，针对一个文件夹下大量的Excel表格文件，基于其中每一个文件，随机从其中选取一部分数据，并将全部文件中随机获取的数据合并为一个新的Excel表格文件的方法。 首先，我们来明确一下本文的具体需求。…...
Unix 和 Windows 的有趣比较
Unix 和 Windows NT 比较 来源于这两本书，把两本书对照来读，发现很多有意思的地方： 《Unix 传奇》 https://book.douban.com/subject/35292726/ 《观止 微软创建NT和未来的夺命狂奔 》 Showstopper!: The Breakneck Race to Create Windows…...
)
解决Android Studio Unexpected tokens (use ； to separate expressions on the same line)
[TOC](Unexpected tokens (use ; to separate expressions on the same line)) 问题描述：Unexpected tokens (use ; to separate expressions on the same line) 原因：Android Studio 更新到最新的版本之后，gradle工程目录结构发生改变 问…...