在本月的5月2日，写下上周的记录，没错，我又拖更了
4月24日，这天是我老妈和姥姥的生日，我们一家子去海底捞吃了个饭，去拿蛋糕的时候我特意让服务员多拿了一个王冠，吃饭的时候小杨嘴上一直说着吃饱了，筷子却一直就没有停过，下面是当时拍的两张照片
4月26日，这天闲来无事做了两张图片，用来作为我和小杨的手机壁纸
这周和小杨闹了几次别扭，我反思发现很大程度上都是我的问题，患得患失，草木皆兵，然后就和小杨展开了权力斗争，好在及时醒觉
最后马上就到小样的生日了，应该送什么礼物比较好呢，希望大家可以出出主意，还有一件事，我发现有些事情我想记录，可又不适合放开给全部人可见，有什么方案可以实现呢
在拼多多商家后台点击供货管理
点击添加商品
选择需要添加的商品，我们这里以这款范小柒为例，然后点击下一步
在批发折扣那里填写折扣，因为以前是要求必须 9 折的，所以本次我们也填写 9 折，填写后点击提交
添加成功后，点击查看批发商品
点击批量定向供货
这里我们可以看到批量定向供货的功能简介，点击发起定向供货
点击选规格
在弹出的窗口输入需要改的销量，这里我们填写 666 ，然后点击加入供货单
选完规格后，点击发起定向供货
在弹出的窗口，点击确认
现在订单已经生成了，点击分享给买家
在弹出的窗口会显示订单的下单链接，这里我们直接使用商家 APP 扫描二维码，注意这里我们使用其它店铺的账号来下单
使用商家 APP 扫描二维码后，跳转到订单界面，没有设置收货地址的可能会跳转到添加地址界面，随便填写下地址就可以，确认订单信息后，点击立即支付
点击后跳转到微信付款界面，代表订单已经提交成功，这里我们先不要付款
4.订单改价
返回商家后台点击查看订单，找不到这个页面的可以在订单查询里面找到该订单
这笔订单现在需要支付的金额，我使用方框框起来了，我们记下金额，点击催支付
在弹出的窗口优惠金额处填写需要优惠的金额，我们可以使用刚才的产品金额减去 0.01 得出我们所需的优惠金额，然后点击发送
在手机商家 APP 上点击待付款，找到该订单点击去支付
确认订单信息后，此时付款金额就已经成 0.01 ，点击去支付跳转到微信支付付款就可以
在商家后台点击订单查询，选择该订单后点击发货
在弹出的窗口，点击自己联系物流发货，发货方式点击无物流发货，商品类型选其它，最后点击确认发货
最后打开商家 APP 找到该订单点击确认收货就可以
因为运营工作需要将没报活动的产品统计出来，单独设置相应的优惠，而在拼多多的商家后台并没有相应的筛选功能，一个个的复制粘贴实在苦逼，于是想到可以使用javascript脚本来实现相应需求
要求：获取页面所有没报活动的商品ID
运行环境：Google Chrome 111.0.5563.147
首先我们在浏览器打开商家后台，单击F12进入开发者调试界面，我们分析下页面，发现以下结论
已经参加活动的商品，在价格前面会多一个活动价
我们需要的商品数据均在
data-testid="beast-core-table-body-tr"内
我们访问Chatgpt，这里使用的是国内镜像站点，我们输入：写一个JS脚本，可以直接在浏览器控制台运行，可以获取data-testid="beast-core-table-body-tr"的值
返回内容为：
const trElements = document.querySelectorAll('[data-testid="beast-core-table-body-tr"]');
trElements.forEach((element) => {
console.log(element.textContent.trim());
});我们在控制台输入这段脚本，会返回页面所有商品的内容
因为我们需要的是不包含活动价的商品的ID值，并且ID的值前面不要包含ID:所以我们继续让Chatgpt完善我们的脚本
返回代码：
const trElements = document.querySelectorAll('[data-testid="beast-core-table-body-tr"]');
trElements.forEach((element) => {
const goodsIdElement = element.querySelector('.goods-id');
if (goodsIdElement && !element.textContent.includes('活动价：')) {
const goodsId = goodsIdElement.textContent.trim().replace('ID:','');
console.log(goodsId);
}
});我们在控制台运行，没有参与活动的商品ID便会输出
我要的是将它们输出为一行，并以','分割，所以我们继续让Chatgpt完善脚本
返回内容为：
const trElements = document.querySelectorAll('[data-testid="beast-core-table-body-tr"]');
const goodsIds = [];
trElements.forEach((element) => {
const goodsIdElement = element.querySelector('.goods-id');
if (goodsIdElement && !element.textContent.includes('活动价：')) {
const goodsId = goodsIdElement.textContent.trim().replace('ID:', '');
goodsIds.push(goodsId);
}
});
console.log(goodsIds.join(','));我们在控制台运行，便会返回出我们需要的数据，我们直接复制就可以
我们前往拼多多商家后台的营销工具添加优惠券，直接输入刚才返回的ID，发现没有搜索到商品，而我们的商品是存在的
经过排查，发现在数字前面会有空格存在，我们继续让Chatgpt完善
输出内容为：
const trElements = document.querySelectorAll('[data-testid="beast-core-table-body-tr"]');
const goodsIds = [];
trElements.forEach((element) => {
const goodsIdElement = element.querySelector('.goods-id');
if (goodsIdElement && !element.textContent.includes('活动价：')) {
const goodsId = goodsIdElement.textContent.trim().replace(/ID:\s*/g, '');
goodsIds.push(goodsId);
}
});
console.log(goodsIds.join(','));我们在控制台输入，这时我们所需的数据便会进行输出，直接复制拿去用就可以
刚才闲来无事仔细梳理了下博客，发现之前写的2022年小目标，点开一看发现大部分（一个）都没有完成😂，痛定思痛决定定下2023年年度计划！！！
使用百词斩，每天学习10个单词，完成每天的学习任务，循环复习最终达成任务
每天学习慕课网Python就业课，并记笔记，日拱一卒
每天进行减脂计划的训练，最终达成目标
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>1.我的第一个CSS程序</title>
<!-- 规范，style 可以编写CSS代码
语法 ：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: blue;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html> style.css 文件内容
h3{
color: aqua;
}html 文件内容
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>2.四种CSS导入方式</title>
<!-- 内部样式表 使用 style 标签开始 然后选择选择器-->
<style>
h2{
color: red;
}
</style>
<!-- 外部样式表 引入外部 style.css 文件 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 行内样式表，在标签中直接使用 style 属性 -->
<h1 style="color: blue;">行内样式表</h1>
<!-- 内部样式表 -->
<h2>内部样式表</h2>
<!-- 外部样式表 -->
<h3>外部样式表</h3>
</body>
</html> 扩展： 外部样式两种写法
<!-- 外部样式表 引入外部 style.css 文件 -->
<link rel="stylesheet" href="style.css"><!-- 导入式-->
<style>
@import url(styles.css);
</style><!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>3.三种基本选择器</title>
<style>
/* 标签选择器 会选择该标签的所有内容*/
p{
color: blue;
}
/* 类选择器的格式 .class 的名称
好处： 可以多个标签复用
*/
.lei{
color: red;
}
/* ID选择器 : ID必须保证全局唯一
#ID名称{}
不遵循就近原则
优先级：
ID > 类选择器 > 标签选择器
*/
#xin{
color: green;
}
</style>
</head>
<body>
<p>标签选择器</p>
<p class="lei">类选择器</p>
<p id="xin">ID选择器</p>
</body>
</html> 总结：
p{}class ：选择所有class属性一致的标签，跨标签 例如：.lei{}#id名{}<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>4.层次选择器</title>
<style>
/* 后代选择器 : 在某个元素的后面*/
body p{
background: red;
}
/* 子选择器 :只有一代*/
body>p{
background: green;
}
/* 相邻兄弟选择器 只有一个向下,相邻(向下)*/
.active + p{
background: blue;
}
/* 通用选择器,当前选择元素向下的所有兄弟元素 */
.active~p{
font-size: 24px;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
</body>
</html> <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>5.结构伪类选择器</title>
<style>
/* ul 的第一个子元素 */
ul li:first-child{
background: red;
}
/* ul 的最后一个子元素 */
ul li:last-child{
background: green;
}
/* 选中 p1 : 定位到父元素,选择当前的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效
*/
p:nth-child(1){
background: blue;
}
/* 选中p2 */
p:nth-child(2){
background: blueviolet;
}
/* 选中父元素,下的p元素的第三个类型,此处以p3举例 */
p:nth-of-type(3){
background: yellowgreen;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html> <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>6.属性选择器(重要)</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: blue;
text-align: center;
color: aqua;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/* 属性名, 属性名 = 属性值(正则)
= 绝对等于
*= 包含
^= 以这个开头
$= 以这个结尾
*/
/* 存在ID属性的元素 ,a[]{} */
a[id]{
background: red;
}
/* a 标签下,ID = two 的元素 */
a[id=two]{
background: yellow;
}
/* class 中有 links 的元素 */
a[class*="links"]{
background: blueviolet;
}
/* 选中herf中以http开头的元素 */
a[href^="http"]{
background: green;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.5iv.top" class="links team">1</a>
<a href="" class="links">2</a>
<a href="dasa" class="links team">3</a>
<a href="fsf.jh" id="one" class="links team">4</a>
<a href="dasas">5</a>
<a href="fsad" id="two">6</a>
<a href="ryt">7</a>
<a href="bgf" class="links">8</a>
<a href="jhgjgh">9</a>
<a href="hjg">10</a>
</p>
</body>
</html> span标签：重点要突出的字，使用span套起来，本身无样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>7.字体样式</title>
<style>
#code{
color: red;
}
</style>
</head>
<body>
<span id="code">
Python
</span>
</body>
</html> 字体样式：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>7.字体样式</title>
<style>
/*
color : 颜色
font-family : 字体
font-size : 字体大小
font-weight : 字体粗细
*/
body{
font-family: 楷体;
font-size: 20px;
font-weight: bolder;
}
</style>
</head>
<body>
<h3>《咏柳》</h3>
<h4>唐·贺知章</h4>
<p>碧玉妆成一树高，</p>
<p>万条垂下绿丝绦。</p>
<p>不知细叶谁裁出，</p>
<p>二月春风似剪刀。</p>
</body>
</html> <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>8.文本样式</title>
<style>
/*
text-align : 排版
text-indent : 首行缩进
line-height : 行高，如果行高和块高一致，就可以上下居中
text-decoration : 装饰
*/
h3{
color: green;
text-align: center;
}
.copy{
text-indent: 2em;
}
.p4{
background: blueviolet;
height: 100px;
line-height: 100px;
}
.p1{
text-decoration: underline;
}
.p2{
text-decoration: line-through;
}
.p3{
text-decoration: overline;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<h3>《咏柳》</h3>
<h4 class="copy">唐·贺知章</h4>
<!-- 下划线 -->
<p class="p1">碧玉妆成一树高，</p>
<!-- 中划线 -->
<p class="p2">万条垂下绿丝绦。</p>
<!-- 上划线 -->
<p class="p3">不知细叶谁裁出，</p>
<p class="p4">二月春风似剪刀。</p>
<!-- a 链接去下划线 -->
<a href="">996</a>
</body>
</html> <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>9.文本阴影和超链接伪类</title>
<style>
/* 默认的颜色 */
a{
text-decoration: none;
color: #000000;
}
/* 鼠标悬浮的颜色 */
a:hover{
color: yellow;
}
鼠标按住未释放的状态
a:active{
color: green;
}
/*
text-shadow : 阴影颜色，水平偏移，垂直偏移，阴影半径
*/
#address{
text-shadow: #41c8c4 10px 10px 5px;
}
</style>
</head>
<body>
<p>
<a href="">知枝百货店</a>
</p>
<p id="address">
原阳县
</p>
</body>
</html> style.css文件：
#nav{
width: 300px;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background: red;
}
ul{
background: #c1c6c8;
}
/* list-style:
none : 去掉圆点
circle : 空心圆
decimal : 数字
square : 正方形
*/
ul li{
height: 30px;
list-style: none;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
}html文件：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>10.列表样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li>
<a href="">图书</a>
<a href="">音像</a>
<a href="">数字商品</a>
</li>
<li>
<a href="">家用电器</a>
<a href="">手机</a>
<a href="">数码</a>
</li>
<li>
<a href="">电脑</a>
<a href="">办公</a>
</li>
<li>
<a href="">家具</a>
<a href="">家装</a>
<a href="">厨具</a>
</li>
<li>
<a href="">服饰鞋帽</a>
<a href="">个护化妆</a>
</li>
<li>
<a href="">礼品箱包</a>
<a href="">钟表</a>
<a href="">珠宝</a>
</li>
<li>
<a href="">食品饮料</a>
<a href="">保健食品</a>
</li>
<li>
<a href="">彩票</a>
<a href="">旅行</a>
<a href="">充值</a>
<a href="">票务</a>
</li>
</ul>
</div>
</body>
</html> 设置背景图片
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>11.背景图像应用及渐变</title>
<style>
/* background-image: url() 设置背景图片
默认是全部平铺的 repeat
*/
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-10bc77ee-2875-4114-959a-9c030e8bc059/d8263126-f854-4173-861d-74c5a0ee8950.png);
}
/* 以 x 轴方向平铺 */
.div1{
background-repeat: repeat-x;
}
/* 以 y 轴方向平铺 */
.div2{
background-repeat: repeat-y;
}
/* 不平铺 */
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html> style.css文件：
#nav{
width: 300px;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
/* 颜色,图片,图片位置,平铺方式 */
background: red url("https://cos.maopis.com/Lksy/2022/11/14/637211ae540d7.png") 275px 7px no-repeat;
}
ul{
background: #c1c6c8;
}
/* list-style:
none : 去掉圆点
circle : 空心圆
decimal : 数字
square : 正方形
*/
ul li{
height: 30px;
list-style: none;
/* 设置背景图 */
background-image: url("https://cos.maopis.com/Lksy/2022/11/14/637211ae540d7.png");
/* 设置平铺方式 */
background-repeat: no-repeat;
/* 设置图片位置 */
background-position: 235px 4px;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
}html文件：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>10.列表样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li>
<a href="">图书</a>
<a href="">音像</a>
<a href="">数字商品</a>
</li>
<li>
<a href="">家用电器</a>
<a href="">手机</a>
<a href="">数码</a>
</li>
<li>
<a href="">电脑</a>
<a href="">办公</a>
</li>
<li>
<a href="">家具</a>
<a href="">家装</a>
<a href="">厨具</a>
</li>
<li>
<a href="">服饰鞋帽</a>
<a href="">个护化妆</a>
</li>
<li>
<a href="">礼品箱包</a>
<a href="">钟表</a>
<a href="">珠宝</a>
</li>
<li>
<a href="">食品饮料</a>
<a href="">保健食品</a>
</li>
<li>
<a href="">彩票</a>
<a href="">旅行</a>
<a href="">充值</a>
<a href="">票务</a>
</li>
</ul>
</div>
</body>
</html> 渐变还是用谷歌吧😁
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>11.边框使用</title>
<style>
/* 常见初始化操作
margin : 外边距
padding : 内边距
text-decoration : 装饰线
*/
body{
margin: 0;
padding: 0;
text-decoration: none;
}
/* boder : 粗细，样式，颜色 */
#box{
width: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登陆</h2>
<form action="get">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html> <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>12.内外边距及居中</title>
<style>
/* 常见初始化操作
margin : 外边距
padding : 内边距
text-decoration : 装饰线
magrin : 0 auto; 居中，要求：块元素，有固定的宽度
*/
body{
margin: 0;
padding: 0;
text-decoration: none;
}
/* boder : 粗细，样式，颜色 */
margin : 外边距,单行写法可以为,margin : 0 0 0 0;依次为上,右,下,左,也可简写为上下,左右
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登陆</h2>
<form action="get">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html> <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>12.内外边距及居中</title>
<style>
/*
boder-radius : 设置圆角,顺时针旋转
圆圈 ：圆角=半径
*/
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50px 20px 10px 5px;
}
</style>
</head>
<body>
<div></div>
</body>
</html> <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>圆角阴影</title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html> <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
/* display:
block : 块元素
inline : 行内元素
inline-block : 块元素，保持行内
none : 不显示
*/
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: block;
}
</style>
</head>
<body>
<div>块元素</div>
<span>行内元素</span>
</body>
</html> <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
/* float:
left : 左浮动
right : 右浮动
clear:
left : 禁止左浮动
right : 禁止右浮动
both : 禁止两侧浮动
*/
div{
margin: 10px;
padding: 5px;
}
.father{
border: 1px solid red;
}
.layer01{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
float: left;
}
.layer02{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
float: left;
}
.layer03{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
float: right;
}
.layer04{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
float: right;
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="layer01">
layer01
</div>
<div class="layer02">
layer02
</div>
<div class="layer03">
layer03
</div>
<div class="layer04">
layer04
</div>
</div>
</body>
</html> .father{
border: 1px solid red;
height: 800px;
} <div id="clear"> </div>
#clear{
clear: both;
padding: 0;
margin: 0;
}overflow: hidden;.father:after{
content: '';
display: block;
clear: both;
}<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* position: relative;
相对定位
相对于原来的位置，进行指定偏移，原来的地址会被保留
*/
div{
margin: 10px;
padding: 5;
font-size: 15px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
}
#first{
border: 1px solid red;
background-color: blue;
position: relative;
top: -20px;
left: 20px;
}
#second{
border: 1px solid red;
background: fuchsia;
position: relative;
bottom: 10px;
right: 20px;
}
#third{
border: 1px solid red;
background-color: yellow;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html> 练习
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#father{
border: 1px solid red;
padding: 10px;
width: 300px;
height: 300px;
}
a{
text-decoration: none;
width: 100px;
height: 100px;
background-color: deeppink;
display: block;
color: aliceblue;
line-height: 100px;
text-align: center;
display: block;
}
a:hover{
background-color: blue;
}
#two,#four{
position: relative;
bottom: 100px;
left: 200px;
}
#five{
position: relative;
bottom: 300px;
left: 100px;
}
</style>
</head>
<body>
<div id="father">
<a href="" id="one">链接1</a>
<a href="" id="two">链接2</a>
<a href="" id="three">链接3</a>
<a href="" id="four">链接4</a>
<a href="" id="five">链接5</a>
</div>
</body>
</html> 定位：基于xx定位，上下左右
position: absolute;相对于浏览器或父级的位置，进行指定偏移，不会保留原来的位置
position: fixed;z-index: 999;类似于PS里面的图层，数字越高排序越前，默认为0
opacity: 0.5;设置透明度