【前端开发】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>小兔鲜儿-新鲜、惠民、快捷<…...
【人工智能-中级】卷积神经网络（CNN）的中阶应用：从图像分类到目标检测
文章目录 卷积神经网络（CNN）的中阶应用：从图像分类到目标检测1. 图像分类：CNN的基础应用CNN结构概述经典网络架构2. 目标检测：从分类到定位基于区域的目标检测方法单阶段目标检测方法边界框回归与NMS（Non-Maximum Suppression）3. 深度学习中的目标检测挑战与解决方案4. …...
[笔记] 编译LetMeowIn（C++汇编联编程序）过程
文章目录 前言过程下载源码vs2017 创建空项目 引入编译文件改项目依赖属性改汇编编译属性该项目还需注意编译运行 总结 前言 编译LetMeowin 项目发现是个混编项目，c调用汇编的程序，需要配置一下，特此记录一下 过程 下载源码 首先下载源码…...
牛客小白月赛107（A~E）
文章目录 A Cidoai的吃饭思路code B Cidoai的听歌思路code C Cidoai的植物思路code D Cidoai的猫猫思路code E Cidoai的可乐思路code 牛客小白月赛107 A Cidoai的吃饭 思路 签到题，按题意模拟即可 code void solve(){int n,a,b,c;cin >> n >> a &g…...
批量DWG文件转换低版本（CAD图转低版本）——c#插件实现
此插件可实现指定路径下所有dwg文件（包含子文件夹内dwg）一键全部转为低版本（包含2004、2007、2018版本，也可定制指定版本）。效果如下： （使用方法：命令行输入 “netload” 加载插件&…...
安装Python库
安装Python库 一、pip安装参数--no-deps 更换下载源，一劳永逸 二、conda下载 一、pip安装 换源安装并且信任该下载源 pip install pipenv -i http://pypi.douban.com/simple --trusted-host pypi.douban.com参数 –no-deps 有些 packages 会依赖一些其它的 p…...
智慧政务数据中台建设及运营解决方案
数据中台：政府数字化转型的引擎 数据中台作为政府数字化转型的核心驱动力，起源于美军的作战体系，强调高效、灵活与强大。它不仅促进了政府决策的科学性，还推动了政府服务的精细化与智能化。 数据中台的应用场景：数字…...
陪玩系统小程序源码/游戏陪玩APP系统用户端有哪些功能？游戏陪玩小程序APP源码开发
多客陪玩系统-游戏陪玩线下预约上门服务等陪玩圈子陪玩社区系统源码 陪玩系统源码，高质量的陪玩系统源码，游戏陪玩APP源码开发，语音陪玩源码搭建: 线上陪玩活动组局与线下家政服务系统的部署需要综合考虑技术选型、开发流程、部署流程、功能实…...
米哈游大数据面试题及参考答案
怎么判断两个链表是否相交？怎么优化？ 判断两个链表是否相交可以采用多种方法。 一种方法是使用双指针。首先分别遍历两个链表，得到两个链表的长度。然后让长链表的指针先走两个链表长度差的步数。之后，同时移动两个链表的指针，每次比较两个指针是否指向相同的节点。如果指…...
使用Hydra库简化配置管理
使用Hydra库简化配置管理 简介 在现代软件开发中，配置管理是至关重要的。应用程序的灵活性和可维护性很大程度上取决于其如何处理配置。Hydra是一个由Facebook AI Research (FAIR) 开发的Python库，它旨在简化复杂应用的配置过程。Hydra使得开发者可以轻…...
二维数组和函数
文章目录 1、课程代码 #include <bits/stdc.h> using namespace std;//定义函数 /*函数名的命名规则和变量是一致的 函数的返回值数据类型 函数名(形式参数){函数体 } */ //自己写乘方pow这个函数 pow(2,3) int p(int a,int b); int p(int a,int b){int s1;for(i…...
如何在 Ubuntu 终端中打开当前文件夹的图形界面
文章目录 1. 简介2. 方法一：使用 Nautilus 文件管理器3. 方法二：使用通用命令 xdg-open4. 方法三：使用其他文件管理器5. 推荐方案6. 参考资料 1. 简介 在日常使用 Linux 系统时，我们常常会在终端中执行各种操作。有时，…...
基于SpringBoot的嗨玩旅游网站：一站式旅游信息服务平台的设计与实现
摘要 在旅游需求日益增长的今天，一个全面、便捷的旅游信息服务平台显得尤为重要。嗨玩旅游网站正是为了满足这一需求而设计的在线平台，它提供了包括景点信息、旅游线路、商品信息、社区信息和活动推广等在内的丰富旅游目的地信息，旨在帮助用…...
Opencv之图像梯度处理和绘制图像轮廓
一、梯度处理的sobel算子函数 处理示意 Sobel 算子是一种常用的图像边缘检测方法，结合了一阶导数和高斯平滑，用于检测图像的梯度信息。 1、功能 Sobel 算子用于计算图像在 x 和 y 方向的梯度，主要功能包括： 强调图像中灰度值的…...
vue3的watch一次性监听多个值用法
vue3的watch一次性监听多个值 1、监听单个值 watch(() > route.params.keyword, (newValue, oldValue) > {console.log(监听值变化, newVal, oldVal)state.a newValue});2、监听多个值 watch(() > [route.params.id, route.params.keyword], (newValue, oldValue) &g…...
Electron和C/C++开发桌面应用对比
Electron和C/C开发桌面应用对比 1. Electron 的特点 优点 跨平台支持： Electron 基于 Chromium 和 Node.js，可以轻松构建跨平台应用（Windows、macOS、Linux）。开发者只需编写一套代码，即可在多个平台上运行。 使用 …...
Q学习（Q-Learning）详解
✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏…...
【前端】 canvas画图
一、场景描述 利用js中的canvas画图来画图，爱心、动画。 二、问题拆解 第一个是：canvas画图相关知识。 第二个是：动画相关内容。 三、知识背景 3.1 canvas画图相关内容 canvas画图的基本步骤 获取页面上的canvas标签对象获取绘图上下文…...
超标量处理器设计笔记（10） 寄存器重命名过程的恢复、分发
重命名 寄存器重命名过程的恢复使用 Checkpoint 对 RAT 进行恢复使用 WALK 对 RAT 进行恢复使用 Architecture State 对 RAT 进行恢复总结 分发（Dispatch） 寄存器重命名过程的恢复 当发生异常、分支预测失败时，指令占用 RAT、ROB 和 Issue …...
硬件设计-电源轨噪声对时钟抖动的影响
目录 定义 实际案例 总结 定义 首先了解抖动的定义，在ITU-T G.701中有关抖动的定义如下： 数字信号重要瞬间相对于其理想时间位置的短期非累积变化。 抖动是时钟或数据信号时序的短期时域变化。抖动包括信号周期、频率、相位、占空比或其他一些定时特…...
多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言：多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时，基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套：跨云网络构建数据…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
多种风格导航菜单 HTML 实现（附源码）
下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式，然后找到相应的网卡（可以查看自己本机的网络连接） windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置，选择刚才配置的桥接模式 静态ip设置： 我用的ubuntu24桌…...
算法：模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣（LeetCode） 遍历字符串：通过外层循环逐一检查每个字符。遇到 ? 时处理： 内层循环遍历小写字母（a 到 z）。对每个字母检查是否满足： 与…...