【前端开发】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中有关抖动的定义如下： 数字信号重要瞬间相对于其理想时间位置的短期非累积变化。 抖动是时钟或数据信号时序的短期时域变化。抖动包括信号周期、频率、相位、占空比或其他一些定时特…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...
三体问题详解
从物理学角度，三体问题之所以不稳定，是因为三个天体在万有引力作用下相互作用，形成一个非线性耦合系统。我们可以从牛顿经典力学出发，列出具体的运动方程，并说明为何这个系统本质上是混沌的，无法得到一般解…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码： https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
Java编程之桥接模式
定义 桥接模式（Bridge Pattern）属于结构型设计模式，它的核心意图是将抽象部分与实现部分分离，使它们可以独立地变化。这种模式通过组合关系来替代继承关系，从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
招商蛇口 | 执笔CID，启幕低密生活新境
作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中，科研绘图是必不可少的，一张好看的图形会是文章很大的加分项。 为了便于使用，本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中，获取方式： R 语言科研绘图模板 --- sciRplothttps://mp.…...
嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程（6.3）
目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 编辑编辑 UDP的特征 socke函数 bind函数 recvfrom函数（接收函数） sendto函数（发送函数） 五、网络编程之 UDP 用…...
【深尚想】TPS54618CQRTERQ1汽车级同步降压转换器电源芯片全面解析
1. 元器件定义与技术特点 TPS54618CQRTERQ1 是德州仪器（TI）推出的一款 汽车级同步降压转换器（DC-DC开关稳压器），属于高性能电源管理芯片。核心特性包括： 输入电压范围：2.95V–6V，输…...
FOPLP vs CoWoS
以下是 FOPLP（Fan-out panel-level packaging 扇出型面板级封装）与 CoWoS（Chip on Wafer on Substrate）两种先进封装技术的详细对比分析，涵盖技术原理、性能、成本、应用场景及市场趋势等维度： 一、技术原…...