css2学习总结之尚品汇静态页面
css2总结之尚品汇
一、布局
-
在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页
的版心。 -
版心的宽度一般是 960 ~ 1200 像素之间。
-
版心可以是一个，也可以是多个。
二、布局相关名词
我们一般布局给对应的class取一个名称，该名称有一定的的要求，那就是需要见名之意，我们看一看默认的规范
-
位置 顶部导航条 topbar 页头 header 、 page-header 导航 nav 、 navigator 、 navbar 搜索框 search 、 search-box 横幅、广告、宣传图 banner 主要内容 content 、 main 侧边栏 aside 、 sidebar 页脚 footer 、 page-footer
三、重置默认样式
- p 元素有默认的上下 margin 。
- h1~h6 标题也有上下 margin ，且字体加粗。
- body 元素有默认的 8px 外边距。
- 超链接有默认的文字颜色和下划线。
- ul 元素有默认的左 pading 。
- …
在早期，元素默认样式，能够让我们快速的绘制网页，但如今网页的设计越来越复杂，内容越来越
多，而且很精细，这些默认样式会给我们绘制页面带来麻烦；而且这些默认样式，在不同的浏览器
上呈现出来的效果也不一样，所以我们需要重置这些默认样式。
方案1：全局选择器
{
margin: 0;
padding: 0;......
}
此种方法，在简单案例中可以用一下，但实际开发中不会使用，因为 * 选择的是所有元素，而并
不是所有的元素都有默认样式；而且我们重置时，有时候是需要做特定处理的，比如：想让 a 元
素的文字是灰色，其他元素文字是蓝色。
方案2：reset.css
选择到具有默认样式的元素，清空其默认的样式
经过 reset 后的网页，好似“一张白纸”，开发人员可根据设计稿，精细的去添加具体的样式。
方案3：Normalize.css
Normalize.css 是一种最新方案，它在清除默认样式的基础上，保留了一些有价值的默认样式。
- 官网地址：http://necolas.github.io/normalize.css/
相对于 reset.css ， Normalize.css 有如下优点：
1. 保护了有价值的默认样式，而不是完全去掉它们。
2. 为大部分HTML元素提供一般化的样式。
3. 新增对 HTML5 元素的设置。
4. 对并集选择器的使用比较谨慎，有效避免调试工具杂乱。
备注： Normalize.css 的重置，和 reset.css 相比，更加的温和，开发时可根据实际情况进行
选择。
4、尚品汇
案例是根据尚硅谷老师，天禹老师的视频讲解的尚品汇案例结合所实现的一套静态页面，参照的是视频讲解。
码云地址：git clone https://gitee.com/numyang/css-shangpinhui.git
- 完成后的效果
4.1 文件结构
源码地址：git clone https://gitee.com/numyang/css-shangpinhui.git
里面目录不是一个整体页面，也是没一章节都有一个对应的文件夹，到最终的页脚整个页面完成
4.2 reset.css
里面是重置样式，多个官网均有下载
/* 基础设置 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin: 0;padding: 0;
}ul,ol {list-style: none;
}img {/* 底部留白 */display: block;
border:0;
}b,strong {font-weight: 400;
}h1,h2,h3,h4,h5,h6 {/* 父元素字号的百分比 */font-size: 100%;font-weight: normal;
}i,em {/* 不倾斜 */font-style: normal;
}u,ins,s,del {/* 去掉中划线和下划线 */text-decoration: none;
}table {border: 1px solid #999;/* 相当于是cellspacing */border-spacing: 0;/* 1px边框 */border-collapse: collapse;
}td,th {border: 1px solid #999;
}input,button {/* 去掉轮廓线 */outline: none;border:none;
}/* 风格设置 */
body {font: 12px/1.5 "Microsoft YaHei", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;color: #333;
}a {text-decoration: none;color: #666;
}a:hover {color:#DD302D;text-decoration: none;
}.leftfix {float: left;
}.rightfix {float: right;
}.clearfix::after {content: "";display: block;clear: both;
}4.2 index.html
页面结构，div布局相关
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>尚品汇</title><!-- 引入页签图标 --><link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"><!-- 重置样式 --><link rel="stylesheet" href="../css/reset.css"><!-- 自定义样式 --><link rel="stylesheet" href="./css/index.css"></head>
<body><!-- 头部导航 --><div class="topbar"><div class="container clearfix"><div class="welcome leftfix"><span class="hello">尚品汇欢迎您</span><span>请</span><a href="#" class="login">登录</a><a href="#" class="regiester">免费注册</a></div><div class="topbar-nav rightfix"><ul class="list clearfix"><li><a href="#">我的订单</a></li><li><a href="#">我的购物车</a></li><li><a href="#">我的尚品汇</a></li><li><a href="#">尚品汇会员</a></li><li><a href="#">企业采购</a></li><li><a href="#">关注尚品汇</a></li><li><a href="#">合作招商</a></li><li><a href="#">商家后台</a></li></ul></div></div></div><!-- 头部logo区域 --><div class="header"><div class="container clearfix"><div class="logo leftfix"><img src="../images/logo.png" alt="logo"></div><div class="search rightfix"><form action="#"><input type="text"><button></button></form></div></div></div><!-- 主导航区 --><div class="mian-nav"><div class="container clearfix"><div class="all-types leftfix">全部商品分类</div><ul class="main-nav-list leftfix clearfix"><li><a href="#">尚品超市</a></li><li><a href="#">优惠卷</a></li><li><a href="#">买啥</a></li><li><a href="#">尚品家电</a></li><li><a href="#">尚品生鲜</a></li><li><a href="#">PLUS会员</a></li><li><a href="#">进口好物</a></li><li><a href="#">品牌闪购</a></li><li><a href="#">拍卖</a></li><li><a href="#">五金店铺</a></li></ul></div></div><!-- 内容区 左侧导航 --><div class="main-content"><div class="container clearfix"><ul class="slide-nav leftfix"><li><a href="#">手机/运营/数码</a><div class="slide-second-menu"><dl class="clearfix"><dt><a href="#">电子书刊</a></dt><dd><a href="#">电子书</a></dd><dd><a href="#">网络原创</a></dd><dd><a href="#">数字杂志</a></dd><dd><a href="#">多媒体图书</a></dd></dl><dl class="clearfix"><dt><a href="#">音像</a></dt><dd><a href="#">音乐</a></dd><dd><a href="#">影视</a></dd><dd><a href="#">教育音像</a></dd></dl><dl class="clearfix"><dt><a href="#">英文原版</a></dt><dd><a href="#">少儿</a></dd><dd><a href="#">商务投资</a></dd><dd><a href="#">英语学习考试</a></dd><dd><a href="#">文学</a></dd><dd><a href="#">传记</a></dd><dd><a href="#">励志</a></dd></dl><dl class="clearfix"><dt><a href="#">文艺</a></dt><dd><a href="#">小说</a></dd><dd><a href="#">文学</a></dd><dd><a href="#">青春文学</a></dd><dd><a href="#">传记</a></dd><dd><a href="#">艺术</a></dd></dl><dl class="clearfix"><dt><a href="#">少儿</a></dt><dd><a href="#">胎教</a></dd><dd><a href="#">0-2岁</a></dd><dd><a href="#">3-6岁</a></dd><dd><a href="#">7-10岁</a></dd><dd><a href="#">11-14岁</a></dd></dl><dl class="clearfix"><dt><a href="#">人文社科</a></dt><dd><a href="#">历史</a></dd><dd><a href="#">哲学</a></dd><dd><a href="#">国学</a></dd><dd><a href="#">政治/军事</a></dd><dd><a href="#">法律</a></dd><dd><a href="#">人文社科</a></dd><dd><a href="#">心理学</a></dd><dd><a href="#">文化</a></dd><dd><a href="#">社会科学</a></dd></dl><dl class="clearfix"><dt><a href="#">经管励志</a></dt><dd><a href="#">经济</a></dd><dd><a href="#">金融与投资</a></dd><dd><a href="#">管理</a></dd><dd><a href="#">励志与成功</a></dd></dl><dl class="clearfix"><dt><a href="#">生活</a></dt><dd><a href="#">健康与保健</a></dd><dd><a href="#">家庭与育儿</a></dd><dd><a href="#">旅游</a></dd><dd><a href="#">烹饪美食</a></dd></dl><dl class="clearfix"><dt><a href="#">科技</a></dt><dd><a href="#">工业技术</a></dd><dd><a href="#">科普读物</a></dd><dd><a href="#">建筑</a></dd><dd><a href="#">医学</a></dd><dd><a href="#">科学与自然</a></dd><dd><a href="#">计算机与互联网</a></dd><dd><a href="#">电子通信</a></dd></dl><dl class="clearfix"><dt><a href="#">教育</a></dt><dd><a href="#">中小学教辅</a></dd><dd><a href="#">教育与考试</a></dd><dd><a href="#">外语学习</a></dd><dd><a href="#">大中专教材</a></dd><dd><a href="#">科学与自然</a></dd><dd><a href="#">字典词典</a></dd></dl><dl class="clearfix"><dt><a href="#">艺术与收藏</a></dt><dd><a href="#">经济管理</a></dd><dd><a href="#">文化与艺术</a></dd></dl><dl class="clearfix"><dt><a href="#">其他</a></dt><dd><a href="#">工具书</a></dd><dd><a href="#">杂志期刊</a></dd><dd><a href="#">套装书</a></dd><dd><a href="#">打折图书</a></dd></dl></div></li><li><a href="#">电脑/办公</a><div class="slide-second-menu"><dl class="clearfix"><dt><a href="#">手机通讯</a></dt><dd><a href="#">手机</a></dd><dd><a href="#">对讲机</a></dd></dl><dl class="clearfix"><dt><a href="#">运营商</a></dt><dd><a href="#">合约机</a></dd><dd><a href="#">选号中心</a></dd><dd><a href="#">装宽带</a></dd></dl><dl class="clearfix"><dt><a href="#">手机配件</a></dt><dd><a href="#">移动电源</a></dd><dd><a href="#">蓝牙耳机</a></dd><dd><a href="#">充电器</a></dd><dd><a href="#">数据线</a></dd><dd><a href="#">苹果周边</a></dd></dl></div></li><li><a href="#">家具/家居/家装/厨具</a><div class="slide-second-menu"><dl class="clearfix"><dt><a href="#">大家电</a></dt><dd><a href="#">平板电视</a></dd><dd><a href="#">空调</a></dd><dd><a href="#">冰箱</a></dd><dd><a href="#">洗衣机</a></dd><dd><a href="#">迷你音响</a></dd></dl><dl class="clearfix"><dt><a href="#">厨卫家电</a></dt><dd><a href="#">燃气灶</a></dd><dd><a href="#">油烟机</a></dd><dd><a href="#">热水器</a></dd><dd><a href="#">消毒柜</a></dd><dd><a href="#">洗碗机</a></dd></dl><dl class="clearfix"><dt><a href="#">厨卫小电</a></dt><dd><a href="#">料理机</a></dd><dd><a href="#">榨汁机</a></dd><dd><a href="#">电饭煲</a></dd><dd><a href="#">压力锅</a></dd><dd><a href="#">豆浆机</a></dd><dd><a href="#">咖啡机</a></dd><dd><a href="#">微波炉</a></dd><dd><a href="#">电磁炉</a></dd></dl><dl class="clearfix"><dt><a href="#">生活电器</a></dt><dd><a href="#">取暖电器</a></dd><dd><a href="#">净化器</a></dd><dd><a href="#">加湿器</a></dd><dd><a href="#">扫地机器人</a></dd><dd><a href="#">吸尘器</a></dd><dd><a href="#">挂烫机</a></dd><dd><a href="#">电话机</a></dd><dd><a href="#">电风扇</a></dd></dl><dl class="clearfix"><dt><a href="#">个护健康</a></dt><dd><a href="#">剃须刀</a></dd><dd><a href="#">脱毛器</a></dd><dd><a href="#">口腔护理</a></dd><dd><a href="#">电吹风</a></dd><dd><a href="#">美容仪</a></dd><dd><a href="#">理发器</a></dd><dd><a href="#">按摩椅</a></dd><dd><a href="#">血压计</a></dd></dl></div></li><li><a href="#">男装/女装/童装/内衣</a><div class="slide-second-menu"><dl class="clearfix"><dt><a href="#">摄影摄像</a></dt><dd><a href="#">数码现货即</a></dd><dd><a href="#">拍立得</a></dd><dd><a href="#">镜头</a></dd><dd><a href="#">户外器材</a></dd><dd><a href="#">数码相框</a></dd></dl><dl class="clearfix"><dt><a href="#">数码配件</a></dt><dd><a href="#">存储卡</a></dd><dd><a href="#">读卡器</a></dd><dd><a href="#">滤镜</a></dd><dd><a href="#">相机包</a></dd><dd><a href="#">数码支架</a></dd></dl><dl class="clearfix"><dt><a href="#">智能设备</a></dt><dd><a href="#">智能手环</a></dd><dd><a href="#">智能眼镜</a></dd><dd><a href="#">健康监测</a></dd><dd><a href="#">体感车</a></dd><dd><a href="#">无人机</a></dd></dl></div></li><li><a href="#">美妆/个护清洁/宠物</a><div class="slide-second-menu"><dl class="clearfix"><dt><a href="#">宠物生活</a></dt><dd><a href="#">宠物粮食</a></dd><dd><a href="#">宠物零食</a></dd><dd><a href="#">医疗保健</a></dd><dd><a href="#">宠物玩具</a></dd><dd><a href="#">出行装备</a></dd></dl><dl class="clearfix"><dt><a href="#">生活日用</a></dt><dd><a href="#">保暖防护</a></dd><dd><a href="#">收纳用品</a></dd><dd><a href="#">雨伞雨具</a></dd><dd><a href="#">浴室用品</a></dd><dd><a href="#">洗漱用品</a></dd></dl></div></li><li><a href="#">女鞋/箱包/钟表/珠宝</a><div class="slide-second-menu"><dl class="clearfix"><dt><a href="#">电脑整机</a></dt><dd><a href="#">笔记本电脑</a></dd><dd><a href="#">台式机</a></dd><dd><a href="#">超极本</a></dd><dd><a href="#">游戏本</a></dd><dd><a href="#">平板电脑</a></dd><dd><a href="#">平板配件</a></dd></dl><dl class="clearfix"><dt><a href="#">电脑配件</a></dt><dd><a href="#">CPU</a></dd><dd><a href="#">主板</a></dd><dd><a href="#">显卡</a></dd><dd><a href="#">硬盘</a></dd><dd><a href="#">SSD固态硬盘</a></dd><dd><a href="#">内存</a></dd></dl></div></li><li><a href="#">男鞋/运动/户外</a><div class="slide-second-menu"><dl class="clearfix"><dt><a href="#">刀剪菜板</a></dt><dd><a href="#">菜刀</a></dd><dd><a href="#">剪刀</a></dd><dd><a href="#">多功能刀</a></dd><dd><a href="#">道具套装</a></dd></dl><dl class="clearfix"><dt><a href="#">水具酒具</a></dt><dd><a href="#">塑料杯</a></dd><dd><a href="#">运动水壶</a></dd><dd><a href="#">保温杯</a></dd><dd><a href="#">保温壶</a></dd></dl></div></li><li><a href="#">房产/汽车/汽车用品</a><div class="slide-second-menu"><dl class="clearfix"><dt><a href="#">清洁用品</a></dt><dd><a href="#">纸巾湿巾</a></dd><dd><a href="#">清洁工具</a></dd><dd><a href="#">驱虫用品</a></dd><dd><a href="#">家庭清洁</a></dd><dd><a href="#">皮具护理</a></dd></dl><dl class="clearfix"><dt><a href="#">面部护肤</a></dt><dd><a href="#">洁面乳</a></dd><dd><a href="#">面膜</a></dd><dd><a href="#">防晒</a></dd><dd><a href="#">隔离</a></dd><dd><a href="#">爽肤水</a></dd></dl></div></li><li><a href="#">母婴/玩具乐器</a><div class="slide-second-menu"><dl class="clearfix"><dt><a href="#">男装</a></dt><dd><a href="#">衬衫</a></dd><dd><a href="#">针织衫</a></dd><dd><a href="#">夹克</a></dd><dd><a href="#">风衣</a></dd><dd><a href="#">牛仔裤</a></dd></dl><dl class="clearfix"><dt><a href="#">女装</a></dt><dd><a href="#">雪纺衫</a></dd><dd><a href="#">休闲裤</a></dd><dd><a href="#">小西装</a></dd><dd><a href="#">皮衣</a></dd><dd><a href="#">羽绒服</a></dd></dl></div></li><li><a href="#">食品/酒类/生鲜/特产</a><div class="slide-second-menu"><dl class="clearfix"><dt><a href="#">钟表</a></dt><dd><a href="#">男表</a></dd><dd><a href="#">瑞士表</a></dd><dd><a href="#">女表</a></dd><dd><a href="#">风衣</a></dd><dd><a href="#">智能手表</a></dd><dd><a href="#">闹钟</a></dd></dl></div></li><li><a href="#">艺术/礼品鲜花/农资绿植</a><div class="slide-second-menu"><dl class="clearfix"><dt><a href="#">流行男鞋</a></dt><dd><a href="#">休闲鞋</a></dd><dd><a href="#">商务鞋</a></dd><dd><a href="#">功能鞋</a></dd><dd><a href="#">布鞋</a></dd><dd><a href="#">人字拖</a></dd></dl><dl class="clearfix"><dt><a href="#">时尚女鞋</a></dt><dd><a href="#">高跟鞋</a></dd><dd><a href="#">凉鞋</a></dd><dd><a href="#">雪地靴</a></dd><dd><a href="#">筒靴</a></dd><dd><a href="#">内增高</a></dd></dl></div></li><li><a href="#">医药保健/计生情趣</a><div class="slide-second-menu"><dl class="clearfix"><dt><a href="#">营养辅食</a></dt><dd><a href="#">维生素</a></dd><dd><a href="#">面条</a></dd><dd><a href="#">益生菌</a></dd><dd><a href="#">钙铁锌硒</a></dd><dd><a href="#">DHA</a></dd></dl><dl class="clearfix"><dt><a href="#">妈妈专区</a></dt><dd><a href="#">孕妇装</a></dd><dd><a href="#">孕妇护肤</a></dd><dd><a href="#">防辐射服</a></dd><dd><a href="#">产后塑身</a></dd><dd><a href="#">月子装</a></dd></dl></div></li><li><a href="#">图书/文娱/教育/电子书</a><div class="slide-second-menu"><dl class="clearfix"><dt><a href="#">流行皮包</a></dt><dd><a href="#">钱包</a></dd><dd><a href="#">手包</a></dd><dd><a href="#">钥匙包</a></dd><dd><a href="#">手提包</a></dd><dd><a href="#">公文包</a></dd></dl><dl class="clearfix"><dt><a href="#">婚庆</a></dt><dd><a href="#">婚庆首饰</a></dd><dd><a href="#">婚纱摄影</a></dd><dd><a href="#">婚宴</a></dd><dd><a href="#">婚庆服务</a></dd><dd><a href="#">婚纱礼服</a></dd></dl></div></li><li><a href="#">机票/酒店/旅游/生活</a><div class="slide-second-menu"><dl class="clearfix"><dt><a href="#">地方特产</a></dt><dd><a href="#">北京</a></dd><dd><a href="#">新疆</a></dd><dd><a href="#">四川</a></dd><dd><a href="#">福建</a></dd><dd><a href="#">重庆</a></dd></dl><dl class="clearfix"><dt><a href="#">进口食品</a></dt><dd><a href="#">饼干果干</a></dd><dd><a href="#">巧克力</a></dd><dd><a href="#">牛奶</a></dd><dd><a href="#">调味食品</a></dd><dd><a href="#">休闲零食</a></dd></dl></div></li><li><a href="#">众筹/白条/保险/企业金融</a><div class="slide-second-menu"><dl class="clearfix"><dt><a href="#">木手串</a></dt><dd><a href="#">小叶紫檀</a></dd><dd><a href="#">黄花梨</a></dd><dd><a href="#">禅香木</a></dd><dd><a href="#">金丝楠</a></dd></dl><dl class="clearfix"><dt><a href="#">钻石</a></dt><dd><a href="#">裸钻</a></dd><dd><a href="#">钻戒</a></dd><dd><a href="#">耳饰</a></dd><dd><a href="#">手镯</a></dd><dd><a href="#">手链</a></dd></dl></div></li><li><a href="#">安装/维修/清洗/二手</a><div class="slide-second-menu"><dl class="clearfix"><dt><a href="#">二手家电</a></dt><dd><a href="#">洗衣机</a></dd><dd><a href="#">烘干机</a></dd><dd><a href="#">烤箱</a></dd><dd><a href="#">微波炉</a></dd></dl><dl class="clearfix"><dt><a href="#">上门清洗</a></dt><dd><a href="#">油烟机</a></dd><dd><a href="#">橱柜</a></dd><dd><a href="#">灶台</a></dd><dd><a href="#">锅</a></dd><dd><a href="#">燃气灶</a></dd></dl></div></li></ul><div class="banner leftfix"><img src="../images/banner主图.png" alt="主图"> </div><div class="slide-other leftfix"><div class="other-news"><div class="title clearfix"><span class="leftfix">尚品快报</span><a class="rightfix" href="#">更多 ></a></div><ul class="msg-list"><li><a href="#">[特惠] 毛衣+直筒裤，才是YYDS。</a></li><li><a href="#">[特惠] 超大容量的满足感来啥子于</a></li><li><a href="#">[特惠] 每日一件，衣柜满到塞不下。</a></li><li><a href="#">[特惠] 媳妇儿再买，我就疯给他看。</a></li></ul></div><div class="other-nav-icon"><ul class="other-nav-item clearfix"><li><div class="picture"></div><span>话费</span></li><li><div class="picture"></div><span>火车票</span></li><li><div class="picture"></div><span>加油卡</span></li><li><div class="picture"></div><span>白条</span></li></ul> <ul class="other-nav-item clearfix"><li><div class="picture"></div><span>电影票</span></li><li><div class="picture"></div><span>酒店</span></li><li><div class="picture"></div><span>理财</span></li><li><div class="picture"></div><span>机票</span></li></ul> <ul class="other-nav-item clearfix"><li><div class="picture"></div><span>礼品卡</span></li><li><div class="picture"></div><span>彩票</span></li><li><div class="picture"></div><span>游戏</span></li><li><div class="picture"></div><span>众筹</span></li></ul> </div></div></div></div><!-- 秒杀专场 --><div class="seckill"><div class="container clearfix"><img src="../images/seckill.png" alt="秒杀"><img src="../images/banner1.png" alt="banner图1"><img src="../images/banner2.png" alt="banner图2"><img src="../images/banner3.png" alt="banner图3"><img src="../images/baner4.png" alt="banner图4"></div></div> <!-- 楼层1 --><div class="floor"><div class="container"><div class="floor-nav clearfix"><span class="leftfix">家用电器</span><ul class="rightfix clearfix"><li><a href="#">热门</a></li><li><a href="#">大家电</a></li><li><a href="#">生活电器</a></li><li><a href="#">厨房电器</a></li><li><a href="#">应季电器</a></li><li><a href="#">空气/净水</a></li><li><a href="#">高端电器</a></li></ul> </div><div class="floor-inf clearfix"><div class="item item1"><ul class="clearfix"><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><img src="../images/编组.png" alt="电视"></div><div class="item item2"><img src="../images/appliance_banner07.png" alt="商品1"></div><div class="item item3"><img src="../images/微波炉.png" alt="微波炉"><img src="../images/空气炸锅.png" alt="空气炸锅"></div><div class="item item4"><img src="../images/冰箱.png" alt="冰箱"></div><div class="item item5"><img src="../images/电饭煲.png" alt="电饭煲"><img src="../images/电饭煲2.png" alt="电饭煲2"></div> </div></div></div><!-- 楼层2 --><div class="floor"><div class="container"><div class="floor-nav clearfix"><span class="leftfix">家用电器</span><ul class="rightfix clearfix"><li><a href="#">热门</a></li><li><a href="#">大家电</a></li><li><a href="#">生活电器</a></li><li><a href="#">厨房电器</a></li><li><a href="#">应季电器</a></li><li><a href="#">空气/净水</a></li><li><a href="#">高端电器</a></li></ul> </div><div class="floor-inf clearfix"><div class="item item1"><ul class="clearfix"><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><img src="../images/编组.png" alt="电视"></div><div class="item item2"><img src="../images/appliance_banner07.png" alt="商品1"></div><div class="item item3"><img src="../images/微波炉.png" alt="微波炉"><img src="../images/空气炸锅.png" alt="空气炸锅"></div><div class="item item4"><img src="../images/冰箱.png" alt="冰箱"></div><div class="item item5"><img src="../images/电饭煲.png" alt="电饭煲"><img src="../images/电饭煲2.png" alt="电饭煲2"></div> </div></div></div><!-- 尾部 --><div class="footer"><div class="container"><!-- 上方--><div class="top-links clearfix"><ul class="links-list"><li><a href="#">购物指南</a></li><li><a href="#">购物流程</a></li><li><a href="#">会员介绍</a></li><li><a href="#">生活旅行</a></li><li><a href="#">常见问题</a></li><li><a href="#">大家电</a></li><li><a href="#">联系客服</a></li></ul><ul class="links-list"><li><a href="#">配送方式</a></li><li><a href="#">上门自提</a></li><li><a href="#">211限时达</a></li><li><a href="#">配送服务查询</a></li><li><a href="#">配送费收取标准</a></li></ul><ul class="links-list"><li><a href="#">支付方式</a></li><li><a href="#">货到付款</a></li><li><a href="#">在线支付</a></li><li><a href="#">生活旅行</a></li><li><a href="#">分期付款</a></li><li><a href="#">公司转账</a></li></ul><ul class="links-list"><li><a href="#">售后服务</a></li><li><a href="#">售后政策</a></li><li><a href="#">价格保护</a></li><li><a href="#">退款说明</a></li><li><a href="#">返修/退换货</a></li><li><a href="#">取消订单</a></li></ul><ul class="links-list"><li><a href="#">特色服务</a></li><li><a href="#">夺宝岛</a></li><li><a href="#">DIY装机</a></li><li><a href="#">延保服务</a></li><li><a href="#">尚品汇E卡</a></li><li><a href="#">尚品汇通信</a></li><li><a href="#">尚品鱼座智能</a></li></ul><ul class="links-list"><li><a href="#">自营覆盖区县</a></li><li><a href="#">尚品汇已向全国2661个区县</a></li><li><a href="#">提供自 营配送服务，支持货到</a></li><li><a href="#">付款、POS 机刷卡和售后上门</a></li><li><a href="#">常见问题</a></li><li><a href="#">服务</a></li><li><a href="#">查看详情</a></li></ul></div><!-- 中间的横线 --><div class="line"></div><!-- 关于我们 --><div class="bottom-links"><ul class="links-item clearfix"><li><a href="#">关于我们</a></li><li><a href="#">联系我们</a></li><li><a href="#">联系客服</a></li><li><a href="#">合作招商</a></li><li><a href="#">商家帮助</a></li><li><a href="#">营销中心</a></li><li><a href="#">手机尚品</a></li><li><a href="#">友情链接</a></li><li><a href="#">销售联盟</a></li><li><a href="#">隐私政策</a></li></ul><div class="copyright">京ICP备12345678901</div></div></div></div></body>
</html>
4.4 index.css
里面包含的 index.html页面给加的一层外衣。样式都在这里面
/* 版心 */
.container {width: 1190px;margin: 0 auto;
}/* #region 顶部开始 */
.topbar {height: 30px;background-color: #ECECEC;
}.topbar .welcome {height: 30px;line-height: 30px;font-size: 0;color: #666666;
}.topbar .welcome span,a {font-size: 12px;
}.topbar .hello {margin-right: 28px;
}.topbar .login {padding-right: 10px;border-right: 1px solid #666666;
}.topbar .regiester {margin-left: 10px;
}/* */
.topbar .topbar-nav {height: 30px;line-height: 30px;
}.topbar-nav .list li {float: left;
}.topbar-nav .list li>a {border-right: 1px solid #666666;padding: 0 15px;
}.topbar-nav .list li:first-child>a {padding-left: 0;
}.topbar-nav .list li:last-child>a {border: 0;padding-right: 0;
}/* #endregion 顶部结束 *//* #region 头部开始 */
.header {height: 120px;
}.header form input {width: 508px;height: 34px;border: 1px solid #DD302D;
}.header form button {width: 80px;height: 36px;background-color: #DD302D;vertical-align:bottom;background-image: url('../../images/serch_icon.png');background-repeat: no-repeat;background-position: 26px 6px;
}.header .search {margin-top: 42px;font-size: 0;
}/* #endregion 头部结束 *//* #region 主导航区开始 */
.mian-nav {height: 48px;line-height: 48px;border-bottom: 1px solid #DD302D;
}.mian-nav .all-types {width: 190px;height: 48px;background-color: #DD302D;font-size: 16px;color: #FFFFFF;text-align: center;
} .mian-nav .main-nav-list {height: 48px;line-height: 48px;
}.mian-nav .main-nav-list li {float: left;margin: 0 10px;font-size: 16px;
}.mian-nav .main-nav-list>li>a {font-size: 16px;font-weight: 500;/* color: #333333; */
}/* #endregion 主导航区结束 *//* #region 内容区，左侧导航开始 */
.main-content {height: 458px;margin: 10px 0;
}.main-content .slide-nav {width: 190px;height: 458px;background-color: #F4F4F4 ;position: relative;
}.main-content .slide-nav>li {font-size: 14px;height: 28px;line-height: 28px;padding-left: 16px;
}.main-content .slide-nav>li:hover {background-color: #DD302D;
}.main-content .slide-nav>li:hover>a {color: white;
}.main-content .slide-second-menu {width: 680px;height: 458px;background-color: #F4F4F4;position: absolute;top: 0;left: 190px;padding-left: 20px;display: none;
}/* 鼠标点中的时候显示图层 */
.main-content .slide-nav li:hover .slide-second-menu {display: block;
}.main-content .slide-second-menu>dl {height: 36px;line-height: 36px;
}.main-content .slide-second-menu dl:first-child {margin-top: 10px;
}.main-content .slide-second-menu>dl>dt,dd {float: left;
}.main-content .slide-second-menu>dl>dt {width: 70px;font-size: 14px;font-weight: bold;margin-right: 10px;
}.main-content .slide-second-menu>dl dd>a {padding: 0 10px;border-left: 1px solid #666;
}/* 中间 */
.main-content .banner {width: 690px;height: 458px;margin: 0 10px;
}.main-content .banner img {width: 690px;height: 458px;
}/* 右侧上方 */
.main-content .slide-other {width: 290px;height: 458px;
}.slide-other .other-news {width: 260px;height: 156px;border: 1px solid #D9D9D9;padding: 0 14px;
}.slide-other .other-news .title {height: 38px;line-height: 38px;border-bottom: 1px solid #D9D9D9;
}.slide-other .other-news .title span {font-size: 14px;color: #000000;
}.slide-other .other-news .title a {font-size: 12px;
}.slide-other .msg-list li {height: 26px;line-height: 26px;
}/* 右侧下方 */
.slide-other .other-nav-icon {width: 290px;height: 290px;margin-top: 10px;/* background-color: gold; */overflow: hidden;
}.other-nav-icon .other-nav-item li {width: 48px;height: 70px;/* background-color: pink; */float: left;margin: 0 11px;text-align: center;cursor: pointer;
}.other-nav-icon .other-nav-item:first-child {margin-top: 16px;
}.other-nav-icon .other-nav-item:nth-child(2) {margin: 17px 0;
}.other-nav-icon .other-nav-item li:first-child {margin-left: 16px;
}/* 第一列 */
.other-nav-icon .other-nav-item .picture {width: 48px;height: 48px;background-image: url('../../images/精灵图-侧边功能.png');
}.other-nav-icon .other-nav-item:nth-child(1) li:nth-child(1)>.picture {background-position: 0 0;
}.other-nav-icon .other-nav-item:nth-child(1) li:nth-child(2)>.picture {background-position: -48px 0;
}.other-nav-icon .other-nav-item:nth-child(1) li:nth-child(3)>.picture {background-position: -96px 0;
}.other-nav-icon .other-nav-item:nth-child(1) li:nth-child(4)>.picture {background-position: -144px 0;
}/* 第二列 */
.other-nav-icon .other-nav-item:nth-child(2) li:nth-child(1)>.picture {background-position: 0 -48px;
}.other-nav-icon .other-nav-item:nth-child(2) li:nth-child(2)>.picture {background-position: -48px -48px;
}.other-nav-icon .other-nav-item:nth-child(2) li:nth-child(3)>.picture {background-position: -96px -48px;
}.other-nav-icon .other-nav-item:nth-child(2) li:nth-child(4)>.picture {background-position: -144px -48px;
}/* 第三列 */
.other-nav-icon .other-nav-item:nth-child(3) li:nth-child(1)>.picture {background-position: 0 -96px;
}.other-nav-icon .other-nav-item:nth-child(3) li:nth-child(2)>.picture {background-position: -48px -96px;
}.other-nav-icon .other-nav-item:nth-child(3) li:nth-child(3)>.picture {background-position: -96px -96px;
}.other-nav-icon .other-nav-item:nth-child(3) li:nth-child(4)>.picture {background-position: -144px -96px;
}.other-nav-icon .other-nav-item span {width: 48px;height: 22px;text-align: center;font-weight: bold;
}/* #endregion 内容区，左侧导航开始 *//* #region 秒杀开始 */
.seckill img {float: left;margin-right: 11px;
}.seckill img:last-child {margin-right: 0;
}/* #endregion 秒杀结束 *//* #region 楼层 开始 */
.floor {margin-top: 48px;
}.floor .floor-nav {height: 30px;line-height: 30px;padding-bottom: 4px;border-bottom: 2px solid #DD302D;
}.floor-nav span {font-size: 20px;font-weight: bold;
}.floor-nav ul>li {float: left;}
.floor-nav ul>li>a {font-size: 16px;border-right: 1px solid #666666;padding: 0 10px;
}.floor-nav ul>li:first-child>a {padding-left: 0;color: #DD302D ;
}.floor-nav ul>li:last-child>a {border: 0;padding-right: 0;
}.floor-inf .item {height: 432px;float: left;
}.floor-inf .item:first-child {width: 190px;height: 392px;background-color: #F4F4F4;padding: 20px;
}.floor-inf .item1 li:nth-child(2n-1) {float: left;
}.floor-inf .item1 li:nth-child(2n) {float: right;
}.floor-inf .item1 li {width: 90px;height: 22px;border-bottom: 1px solid #D9D9D9;font-size: 16px;padding-bottom: 3.5px;
}.floor-inf .item1 li a {font-size: 16px;
}.floor-inf .item1 li:nth-child(3)
,.item1 li:nth-child(4) {margin: 14.4px 0;
}.floor-inf .item1 li:nth-child(2n) {float: right;
}.floor-inf .item1 img {margin-top: 30px;
}.floor-inf .item:nth-child(2) {width: 340px;
}.floor-inf .item:nth-child(3)
,.item:nth-child(4) {width: 206px;border-right: 1px solid #E2E2E2;
}
.floor-inf .item:nth-child(3) img,
.item:nth-child(4) img
,.item:nth-child(5) img{border-bottom: 1px solid #E2E2E2 ;
}/* .floor-inf .item:nth-child(4) {width: 206px;border-right: 1px solid #E2E2E2;
} *//* .floor-inf .item:nth-child(4) img {border-bottom: 1px solid #E2E2E2 ;
} */.floor-inf .item:nth-child(5) {width: 206px;
}/* .floor-inf .item:nth-child(5) img {border-bottom: 1px solid #E2E2E2 ;
} *//* #endregion 楼层 结束 *//* #region 页脚 开始 */
.footer {margin-top: 48px;height: 440px;background-color: #483E3E;
}.footer .top-links>.links-list {float: left;width: 190px;height: 176px;color: #FFFFFF;margin-top: 48px;margin-right: 10px;
}.footer .top-links>.links-list:last-child {margin-right: 0;
}.footer .top-links>.links-list a {color: #FFFFFF;
}.footer .line {height: 1px;background-color: #584D4D;margin-top: 22px;
}.footer .bottom-links {margin-top: 47px;text-align: center;
}.footer .links-item {display: inline-block;
}
.footer .links-item li {float: left;
}.footer .links-item li a {color: #FFFFFF;padding: 0 26px;border-right: 1px solid #FFFFFF ;
}.footer .links-item li:first-child a {padding-left: 0;
}.footer .links-item li:last-child a {padding-right: 0;border: 0;
}.footer .copyright {margin-top: 10px;color: #FFFFFF;
}/* #endregion 页脚 结束 */
相关文章：
css2学习总结之尚品汇静态页面
css2总结之尚品汇 一、布局 在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页 的版心。 版心的宽度一般是 960 ~ 1200 像素之间。 版心可以是一个，也可以是多个。 二、布局相关名词 我…...
Lua 第5部分 表
表（ Table ）是 Lua 语言中最主要（事实上也是唯一的）和强大的数据结构。 使用表，Lua语言可以以一种简单、统一且高效的方式表示数组、集合、记录和其他很多数据结构。 Lua语言也使用表来表示包（ package &am…...
01分数规划
https://ac.nowcoder.com/acm/contest/22353/1011 并不需要高级数据结构，对答案二分即可。 假定当前二分的答案为 x x x，则 ∑ v i ∑ w i ≥ x \frac{ \sum_{v_i} }{\sum_{w_i}} ≥ x ∑wi∑vi≥x 成立时 x x x 才可能是最后的答案。 化简式…...
无人机动力系统全维度解析：技术演进、选型策略与未来趋势
一、动力系统技术理念与设计逻辑 （一）核心技术指标 能量密度：决定续航能力的关键参数，单位为 Wh/kg。当前主流锂聚合物电池能量密度约 250-300Wh/kg，氢燃料电池可达 500-800Wh/kg，航空燃油则高达 12,000W…...
)
重新审视中国的GB标准(44495 – 44497)
此前，我们深入探讨了中国新推出的智能互联汽车(ICV)网络安全标准GB Standard 44495-2024。我们探讨了该标准对汽车制造商的影响、与UNECE R155和ISO/SAE 21434等全球标准的一致性，以及该标准对未来汽车网络安全的意义。 然而，GB 44495-2024并…...
Linux进程控制（五）之做一个简易的shell
文章目录 做一个简易的shell预备知识代码实现运行结果 做一个简易的shell 重谈Shell shell是操作系统的一层外壳程序，帮我们用户执行指令， 获取到指令后，交给操作系统，操作系统执行完后，把执行结果通过shell交给用户…...
Apache Kafka全栈技术解析
目录 第一章 Kafka概述与核心价值 1.1 消息队列的演进与Kafka的诞生 1.2 Kafka的核心应用场景 1.3 Kafka生态全景图 第二章 Kafka核心概念与架构解析 2.1 核心概念深度剖析 2.2 Kafka架构设计精要 第三章 Kafka环境搭建与配置 3.1 单机部署实战 3.2 集群部署最佳实践 …...
结合 Flink/Spark 进行 AI 大数据处理（实时数据 + AI 推理的应用场景）
随着企业对实时智能决策的需求日益增强，将 Flink / Spark 等流批计算框架 与 大模型推理能力相结合，正在成为 AI 工业化落地的重要实践路径。本篇文章将深入介绍如何将 AI 模型集成到大数据流处理系统中，实现实时感知、智能判断与自动反馈。 1. 为什么需要“实时数据 + AI 推…...
开发PDF时，如何比较 PDF 文件
在 PDF 论坛上，“如何比较 PDF 文件”是一个经常被提到的问题。在开始之前，重要的是要明确你想要比较的内容是什么。 不同的 PDF 文件可能看起来一样吗？ 是的，可能。不同的 PDF 创建工具可能会生成在视觉上完全相同的页面&#x…...
自动提取pdf公式 ➕ 输出 LaTeX
# 创建打包脚本的主内容 script_content """ from doc2x.extract_formula import extract_formula_imgs from pix2text import Pix2Text from PIL import Image import osdef main():pdf_path "your_file.pdf" # 将你的PDF命名为 your_file.pdf 并…...
abaqus二次开发python程序集
abaqus二次开发python程序集 1、设置字体背景色等2、读取模态频率并写入 csv 文件3、在两个窗口快速对比各价模态 1、设置字体背景色等 # _*_ coding:UTF-8 _*_from abaqusConstants import* def fontsize(sessionNone):#设置字体session.viewports[Viewport: 1].viewportAnno…...
高级java每日一道面试题-2025年3月23日-微服务篇[Nacos篇]-如何使用Nacos进行服务发现？
如果有遗漏,评论区告诉我进行补充 面试官: 如何使用Nacos进行服务发现？ 我回答: 在Java高级面试中讨论如何使用Nacos进行服务发现时，可以从多个角度深入探讨，包括基本概念、配置步骤、代码示例以及高级特性。以下是综合了多种信息的详细回…...
k8s核心资源对象一（入门到精通）
本文将深入探讨Kubernetes中的核心资源对象，包括Pod、Deployment、Service、Ingress、ConfigMap和Secret，详细解析其概念、功能以及实际应用场景，帮助读者全面掌握这些关键组件的使用方法。 一、pod 1 pod概念 k8s最小调度单元，…...
了解 DeepSeek R1
了解DeepSeek R1 R1探索纯强化学习是否可以在没有监督微调的情况下学会推理的能力。 ‘Aha’ Moment 这种现象有点类似于人类在解决问题时突然意识到的方式，以下是它的工作原理： 初始尝试：模型对解决问题进行初始尝试识别：识别…...
【C语言】大小端字节序和字节序判断
前言： 在上章介绍了整形在内存的储存，了解了原码，反码，补码，知道了整数在内存的储存一般是补码，解决了负数相加的问题。 那么在本章为大家讲解一下大小端字节序。 一那字节序是什么呢？ 字节…...
DrissionPage移动端自动化：从H5到原生App的跨界测试
一、移动端自动化测试的挑战与机遇 移动端测试面临多维度挑战： 设备碎片化：Android/iOS版本、屏幕分辨率差异 混合应用架构：H5页面与原生组件的深度耦合 交互复杂性：多点触控、手势操作、传感器模拟 性能监控：内存…...
ARM 汇编启动代码详解：从中断向量表到中断处理
ARM 汇编启动代码详解：从中断向量表到中断处理 引言 在嵌入式系统开发中，ARM 处理器（如 Cortex-A 系列）的启动代码是系统初始化和运行的基础。启动代码通常包括中断向量表的创建、初始化硬件状态（如关闭缓存和 MMU&a…...
笔试专题（七）
文章目录 乒乓球筐（哈希）题解代码 组队竞赛题解代码 删除相邻数字的最大分数（线性dp）题解代码 乒乓球筐（哈希） 题目链接 题解 1. 两个哈希表 先统计第一个字符串中的字符个数，再统计第二个字…...
React基础知识（一）
文章目录 概念特点React基本使用hello_react案例虚拟DOM的两种创建方式使用jsx创建使用js创建 虚拟DOM和真实DOM React jsxXMLjsx语法规则作用基本语法规则js语句和js代码babel.js作用 模块与组件模块组件 React面向组件编程函数式组件类组件 概念 react是一个将数据渲染为Htm…...
红黑树（Red-Black Tree）核心知识点与面试高频问题
红黑树（Red-Black Tree）核心知识点与面试高频问题 一、红黑树的核心性质 红黑树是一种自平衡的二叉搜索树，通过以下规则确保平衡性： 节点颜色：每个节点是红色或黑色。 根节点：根必须是黑色。 叶子节点&a…...
SpringBoot整合SSM
一、SpringBoot整合SSM SpringBoot整合SpringSpringBoot整合SpringMVCSpringBoot整合MyBatis（主要） 步骤一：创建SpringBoot工程，添加druid依赖 <!-- todo 1 添加druid连接池依赖--> <dependency><groupId>co…...
set/multiset容器
1.概念 所有元素会在插入时自动排序 set/multiset属于关联式容器，底层结构是用二叉树实现。 set不允许重复元素，multiset允许重复元素。 2. set构造和赋值 set<T> st; set(const set &st);// 拷贝构造函数 set& operator(const set &a…...
vim 编辑器 使用教程
Vim是一款强大的文本（代码）编辑器，它是由Bram Moolenaar于1991年开发完成。它的前身是Bill Joy开发的vi。名字的意义是Vi IMproved。 打开vim，直接在命令行输入vim即可，或者vim <filename>. Vim分为四种模式&a…...
去中心化固定利率协议
核心机制与分类 协议类型： 借贷协议（如Yield、Notional）：通过零息债券模型（如fyDai、fCash）锁定固定利率。 收益聚合器（如Saffron、BarnBridge）：通过风险分级或博弈论…...
Python高阶函数-filter
1. 基本概念 filter() 是Python内置的高阶函数，用于过滤序列中的元素。它接收一个函数和一个可迭代对象作为参数，返回一个迭代器，包含使函数返回True的所有元素。 filter(function, iterable)2. 工作原理 惰性计算：filter对象是…...
hive/doris查询表的创建和更新时间
hive查询表的创建和更新时间： SELECT d.NAME AS database_name, t.TBL_NAME AS table_name, FROM_UNIXTIME(t.CREATE_TIME) AS create_time, FROM_UNIXTIME(tp.PARAM_VALUE) AS last_ddl_time FROM metastore.TBLS t JOIN metastore.DBS d ON t.DB_ID d.DB_ID JOIN…...
40常用控件_WindowFrame的影响
window frame 的影响 如果 widget 作为一个窗口(带有标题栏,最小化,最大化,关闭按钮),那么在计算尺寸和坐标的 时候就有两种算法.包含 window frame 和 不包含 window frame. 其中x(),y0,frameGeometry(), pos(),move() 都是按照包含 window frame 的方式来计算 的. 其中 geome…...
PCB 赋能机器人技术革新：核心功能与前沿趋势
一、智能控制中枢的异构集成 采用 20 层刚挠结合板架构，搭载 NVIDIA Jetson AGX Orin SoC（100TOPS 算力），集成 64 位 ARMv8 内核与 32GB 内存，实现多模态传感器数据融合与实时决策。板载 128MB DDR4 缓存支持 μs 级响…...
unity 环形UI菜单实现方法2
在项目中需要一个环形UI并且循环往复的效果，这个方法思路为提前预设好位置，让UI根据坐标预设的移动，然后使用mask遮罩达到循环往复效果的目的。 下图分别分为了三个列表 第一个列表poslist是提前预设的位置 第二个列表为背景暂时不用看 第三个…...
Redis进阶--主从复制
目录 一、引言 二、介绍 三、解决问题 四、配置主从复制 1.复制 全量复制： 部分复制： 实时复制： 五、总结 一、引言 本篇文章将继续介绍Redis中的主从复制机制 二、介绍 主从复制是在分布式系统中实现的，希望有多个服务器…...
Redisson分布式锁：原理、使用
1. Redisson简介 Redisson是一个基于Redis的Java客户端库，提供了丰富的分布式对象和服务（如分布式锁、信号量、Map等）。其核心优势在于简化分布式锁的实现，并解决了原生Redis分布式锁的常见问题（如死锁、误删…...
Java设计模式之外观、享元、组合模式《三国争霸：模式风云录》
第一章：乱世起（外观初现） 黄巾余孽张角三兄弟操控"混沌子系统"，各地流民不堪996劳役。观国隐士诸葛孔明出山，在博望坡构建首个"军师智脑"： /*** 外观模式：军师智…...
设计模式之解释器模式：原理、实现与应用
引言 解释器模式（Interpreter Pattern）是一种行为型设计模式，它定义了一种语言的文法表示，并提供一个解释器来解释该语言中的句子。解释器模式适用于需要解析特定语法规则的场景，如正则表达式、SQL解析等。本文将深入…...
redis itheima
缓存问题 核心是如何避免大量请求到达数据库 缓存穿透 既不存在于 redis，也不存在于 mysql 的key，被重复请求 public Result queryById(Long id) {String key CACHE_SHOP_KEYid;// 1. redis & mysqlString shopJson stringRedisTemplate.opsFo…...
AF3 OpenFoldDataModule类setup方法解读
AlphaFold3 data_modules 模块的 OpenFoldDataLoader 类 setup 方法用于设置数据集的关键部分，负责根据不同的模式（训练、验证或预测）生成和初始化相应的数据集。 源代码： def setup(self, stage=None):# Most of the arguments are the same for the three datasets data…...
服务器报错：xxx/libc.so.6: version `GLIBC_2.32‘ not found
/lib/x86_64-linux-gnu/libc.so.6: version GLIBC_2.32 not found (required by ./aima-sim-app-main) 解决思路 根据错误信息，您的应用程序 aima-sim-app-main 和 libmujoco.so.3.1.6 库依赖于较新的 GNU C Library (glibc) 版本（如 GLIBC_2.32, GLIBC…...
FPGA状态机设计：流水灯实现、Modelsim仿真、HDLBits练习
一、状态机思想 1.概念 状态机（Finite State Machine, FSM）是计算机科学和工程领域中的一种抽象模型，用于描述系统在不同状态之间的转换逻辑。其核心思想是将复杂的行为拆解为有限的状态，并通过事件触发状态间的转移。 2.状态机…...
机试题——最少乘坐公交次数
题目描述 春节将近，小明想在节日期间逛一逛城里的 ( N ) 个著名景点。所有景点都能通过坐公交到达。需要设计一种公交路线方案，让小明能最快地逛完所有景点。 输入描述 第一行：一个整数 ( N )，表示景点数量，满足 ( …...
防孤岛保护装置在分布式光伏并网中的应用
什么是光伏的“孤岛效应” 孤岛islanding 包含负荷和电源的部分电网，从主网脱离后继续孤立运行的状态。孤岛可分为非计划性孤岛和计划性孤岛。 孤岛效应的危害 当电网侧停电检修，若并网光伏电站的逆变器仍在继续供电，维修人员不一定…...
记一次gitlab服务器负载过高问题处理
服务器上进程 /var/opt/gitlab/gitlab-rails/etc/unicorn.rb /opt/gitlab/embedded/service/gitlab-rails/config.ru 进程服务器cpu占用过高应该怎么处理 tail -f /var/log/gitlab/gitlab-rails/production.log调整 Unicorn 配置：unicorn.rb 是 Unicorn 服务器的配…...
LiT and Lean: Distilling Listwise Rerankers intoEncoder-Decoder Models
文章：ECIR 2025会议 一、动机 背景：利用LLMs强大的能力，将一个查询（query）和一组候选段落作为输入，整体考虑这些段落的相关性，并对它们进行排序。 先前的研究基础上进行扩展 [14,15]，…...
【项目日记】高并发服务器项目总结
生活总是让我们遍体鳞伤， 但到后来， 那些受伤的地方一定会变成我们最强壮的地方。 -- 《老人与海》-- 高并发服务器项目总结 模块关系图项目工具模块缓冲区模块通用类型模块套接字socket模块信道Channel模块多路转接Poller模块 Reactor模块时间轮Tim…...
P1332 血色先锋队（BFS）
题目背景 巫妖王的天灾军团终于卷土重来，血色十字军组织了一支先锋军前往诺森德大陆对抗天灾军团，以及一切沾有亡灵气息的生物。孤立于联盟和部落的血色先锋军很快就遭到了天灾军团的重重包围，现在他们将主力只好聚集了起来，以抵…...
systemd 与 SysVinit
1. 什么是 systemd 和 SysVinit？ systemd 和 SysVinit 都是 Linux 的初始化系统（init system），用于管理系统启动、服务、进程和日志。 比较项SysVinitsystemd启动方式逐步启动（串行）并行启动（…...
PythonWeb项目-Django+vue白酒数据推荐系统功能介绍
❥(^_-) 上千个精美定制模板，各类成品Java、Python、PHP、Android毕设项目，欢迎咨询。 ❥(^_-) 程序开发、技术解答、代码讲解、文档，💖文末获取源码+数据库+文档💖 💖软件下载 | 实战案例 💖文章底部二维码，可以联系获取软件下载链接，及项目演示视频。 本项目源…...
AWS Bedrock：开启企业级生成式AI的钥匙【深度解析】
引言：生成式AI的工业革命需要新基建 根据Gartner预测，到2026年超过80%的企业将在生产环境中部署生成式AI。而AWS Bedrock作为首个企业级生成式AI托管平台，正在重塑AI工业化落地的技术范式。本文将深入解构其技术架构与商业价值。 一、Bedroc…...
网络安全应急响应-文件痕迹排查
在Windows系统的网络安全应急响应中，文件痕迹排查是识别攻击行为的关键步骤。以下是针对敏感目录的详细排查指南及扩展建议： 1. 临时目录排查（Temp/Tmp） 路径示例： C:\Windows\TempC:\Users\<用户名>\AppData\L…...
【玩转全栈】—— Django 连接 vue3 保姆级教程，前后端分离式项目2025年4月最新！！！
本文基于之前的一个旅游网站，实现 Django 连接 vue3，使 vue3 能携带 CSRF Token 发送 axios 请求给后端，后端再响应数据给前端。想要源码直接滑倒底部。 目录 实现效果 解决跨域 获取 csrf-token 什么是 csrf-token ？ CSRF攻击的…...
网络安全·第一天·IP协议安全分析
本篇博客讲述的是网络安全中一些协议缺陷以及相应的理论知识，本博主尽可能讲明白其中的一些原理以及对应的防卫措施。 学习考研408的同学也能进来看看，或许对考研有些许帮助（按照考研现在的趋势，年年都有新题目，本文当…...
TensorFlow深度学习实战——字符嵌入、子词嵌入、句子嵌入和段落嵌入
TensorFlow深度学习实战——字符嵌入、子词嵌入、句子嵌入和段落嵌入 0. 前言1. 字符嵌入2. 字词嵌入3. 句子嵌入和段落嵌入相关链接 0. 前言 在自然语言处理中，嵌入 (Embedding) 技术是将文本转化为数值向量的核心方法，使计算机能够理解和处理语言中的…...