【前端开发】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中有关抖动的定义如下： 数字信号重要瞬间相对于其理想时间位置的短期非累积变化。 抖动是时钟或数据信号时序的短期时域变化。抖动包括信号周期、频率、相位、占空比或其他一些定时特…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码，写上注释 当然可以！这段代码是 Qt …...
从零实现STL哈希容器：unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
让AI看见世界：MCP协议与服务器的工作原理
让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具，可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板，允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板，并通…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库，可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画，可以包含在你的网页或应用项目中。 3.An…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具，可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件，也不需要在线上传文件，保护您的隐私。 工具截图 主要特点 🚀 快速转换：本地转换，无需等待上…...
RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill
视觉语言模型（Vision-Language Models, VLMs），为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展，机器人仍难以胜任复杂的长时程任务（如家具装配），主要受限于人…...
6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础
第三周 Day 3 🎯 今日目标 理解类（class）和对象（object）的关系学会定义类的属性、方法和构造函数（init）掌握对象的创建与使用初识封装、继承和多态的基本概念（预告） &a…...
热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁
赛门铁克威胁猎手团队最新报告披露，数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据，严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能，但SEMR…...
C++11 constexpr和字面类型：从入门到精通
文章目录 引言一、constexpr的基本概念与使用1.1 constexpr的定义与作用1.2 constexpr变量1.3 constexpr函数1.4 constexpr在类构造函数中的应用1.5 constexpr的优势 二、字面类型的基本概念与使用2.1 字面类型的定义与作用2.2 字面类型的应用场景2.2.1 常量定义2.2.2 模板参数…...