坛子里的表格很多都只能切换成电脑版才能看全
对我这种手机党太不友好啦
加上最近在做表格任务，兼容和色差让人恼火😔
所以有了这个水贴😂

前排声明:
本内容采用flex和grip布局，不用table布局！
div一把梭 从头梭到尾🤓
只有这样才有弹性布局
【目前自适应方案】

第一课
在线编辑运行，掌握p标签和div标签
并修改文字大小颜色、背景颜色、增加并修改边框样式。
最终在派派完成上述效果。

第一节
在线编辑运行，掌握p标签和div标签
电脑打开在线编辑网页，https://www.jyshare.com/front-end/61/
在左上方【输入html代码】里，输入代码，再点击运行。

描述:screenshot-20250214-185843.png

例子，将下面代码复制到左上方的代码框里，点击运行。右下角出现运行结果。
<p>hello，派派</p>
<div>hello,派派</div>
<span>hello,派派</span>

1️⃣小作业：复制以下代码并运行。
将鼠标放在划分两边内容的竖杠上，左右拖动，感受左右两边大小变化的运行结果。
<p>好雨知时节，当春乃发生。</p>
<p>随风潜入夜，润物细无声。</p>
<p>野径云俱黑，江船火独明。</p>
<p>晓看红湿处，花重锦官城。</p>


<div>
好雨知时节，当春乃发生。
随风潜入夜，润物细无声。
野径云俱黑，江船火独明。
晓看红湿处，花重锦官城。
</div>

=======================================

第二节
修改文字大小颜色、背景颜色、增加并修改边框样式
上面可能感受不到区别。
现在给它加上【#ccc的背景颜色】,【大小为24px、颜色是黄色的文字】,【大小为5px、虚线、颜色为#99ccff的边框】。
将下面的代码复制到右上角[输入css代码]中。
p{      
    background-color: #ccc;
    color:yellow;
    font-size:24px;
    border:5px dashed #99ccff;
}

div{
    background-color: #ccc;
    color:yellow;
    font-size:24px;
    border:5px dashed #99ccff;
}

ps:这里不用纠结css的写入方式。先复制代码，后面会详细说。
再将鼠标放在划分两边内容的竖杠上，左右拖动，感受下。
效果如下，一定要拖动感受下！

描述:output (2).png

2️⃣小作业：修改文字颜色、背景颜色，边框的大小、颜色和边框样式。
提示：dashed为虚线，solid为实线，dotted为点虚线，double为双实线。
     双实线的大小最好要大于或者等于2px，否则浏览器很难观察到。
     通过【ctrl和+】或者【ctrl和-】来放大或者缩小浏览器。

=======================================
第三节
怎么样在派派上实现上述效果？
根据以上可以知道，html是网页的文本结构，css是来修改样式的。
那么css怎么写入到html文本结构中呢？
有3种方式。
1）第一种方式：内部css，通过<style></style>标签，将修改样式的代码放在这个标签内。
❤️div标签
<div id="t">
好雨知时节，当春乃发生。
随风潜入夜，润物细无声。
野径云俱黑，江船火独明。
晓看红湿处，花重锦官城。
</div>
<style>
#t{
    background-color: #ccc;
    color:yellow;
    font-size:24px;
    border:5px dashed #99ccff;
}
</style>

❤️p标签
<p id="t">好雨知时节，当春乃发生。</p>
<p id="t">随风潜入夜，润物细无声。</p>
<p id="t">野径云俱黑，江船火独明。</p>
<p id="t">晓看红湿处，花重锦官城。</p>
<style>
#t{      
    background-color: #ccc;
    color:yellow;
    font-size:24px;
    border:5px dashed #99ccff;
}
</style>

3️⃣小作业：
仔细观察内部css下style标签里的样式和最初在编辑网页上有何不同？
    答案:内部css和最初的网页编辑上的差距主要有2个:
        1个是div和p标签后多了个【id="t"】;
        第2个是大括号{}的前面从之前的p/div变成了【#t】
       🤔思考：那这个id="t"和#t{}是什么？

2）第二种方式：行内css，通过在标签内部增加样式。
将上述的内部css改成行内css。
❤️p标签
<p style="background-color: #ccc; color: yellow; font-size: 24px; border: 5px dashed #99ccff;">
    好雨知时节，当春乃发生。
</p>
<p style="background-color: #ccc; color: yellow; font-size: 24px; border: 5px dashed #99ccff;">
    随风潜入夜，润物细无声。
</p>
<p style="background-color: #ccc; color: yellow; font-size: 24px; border: 5px dashed #99ccff;">
    野径云俱黑，江船火独明。
</p>
<p style="background-color: #ccc; color: yellow; font-size: 24px; border: 5px dashed #99ccff;">
    晓看红湿处，花重锦官城。
</p>

❤️div标签
<div style="background-color: #ccc; color: yellow; font-size: 24px; border: 5px dashed #99ccff;">
    好雨知时节，当春乃发生。
    随风潜入夜，润物细无声。
    野径云俱黑，江船火独明。
    晓看红湿处，花重锦官城。
</div>

4️⃣小作业：
【1】分别复制上面2种css写入方式下的p标签和div标签的代码，并在派派实现效果。
提示：复制代码到派派里，并进入到高级样式，点击勾选html。

【2】仔细观察行内css和内部css,感受下两种方式的简易程度。
    答案:内部css更容易，只要将代码放在<style></style>标签里，不需要一个个都写。

3）第三种方式：外链接 后续再说

好！第一节课结束。🔚  

好强！！！！手机端ok的，还看到了星星的美貌🙈

很OK，可以继续水

手机端完全可以

真不错。。

第一个ok，第二个没东西了

第二课
选择器
字体、文本、背景样式
块元素和内联元素
盒子模型、外边距、内边距、边框
由第一课的作业，以后采取的都是内部css,将css代码放在<style></style>标签里。
🤔id="t"和#t{}这个是什么？

第一节 选择器
举个例子，比如在正常的一个网页中，还是上一节的代码，想定位其中的div，可以采用哪些方式？
比如说修改里面的文字颜色，将其改成黑色。怎么实现？
<div id="t">
好雨知时节，当春乃发生。
随风潜入夜，润物细无声。
野径云俱黑，江船火独明。
晓看红湿处，花重锦官城。
</div>
<style>
#t{
    background-color: #ccc;
    color:yellow;
    font-size:24px;
    border:5px dashed #99ccff;
}
</style>
直接将代码【color:yellow;】改成【color:black;】即可。
所以是#t{}定位选中了div标签内的文字，再修改文字颜色。
那还有其他的选择器吗？


1)元素选择器
直接用div{}就能定位到上面的标签。
同理，p标签也是直接采用p{}就能直接定位到。
但一个正常网页中，会出现多个div/p标签，如果直接用元素选择器，那么就对所有的div/p标签都进行了修改。
这不是我们想要的。
尤其是在派派中，如果采用元素选择器，会对表格外的网页内容都进行了修改。

解决方法：
在html代码中，最外面嵌套一个div标签。
例如：
<div id="test">
----这中间写表格代码----
</div>
再通过id选中器，#test{}就能定位到该div标签。


2）类选择器
类选择器，就是class后面的类名称相同时，可以定位多个标签。
在<style>标签里主要通过.类名称{}来定位元素标签。
⚠️class后的名称是自己取的。不能以数字开头，只能用英文小写字母，特殊符号只能使用【_】
【写法如下】
<div class="test">
----这中间写表格代码----
<div>
<style>
.test{
    color:yellow;
    font-size:24px;
}
</style>
派派里不能使用类选择器，因为不能使用【.】


3）id选择器
id选择器，就是id后面的名称具有唯一性，只定位这一个标签。
⚠️id后的名称是自己取的。不能以数字开头，只能用英文小写字母，特殊符号只能使用【_】
【写法如下】
<div id="test">
----这中间写表格代码----
<div>
<style>
#test{
    color:yellow;
    font-size:24px;
}
</style>

【区别】
id和类的区别就是一个前面是【.】,另一个是【#】，一个是class,一个是id。
由于派派不能使用类选择器，故对【相似的结构】的标签可使用同一个id名称，进而定位多个标签。
在派派里，id代替class。

⚠️正常的网页不可这么使用。

回到最开始。
我们说一个正常网页中，会有多个div/p标签，为了定位准确，是在最外层嵌套一个div标签。
例如：
<div id="test">
    <p>1好雨知时节，当春乃发生。</p>
    <div>2随风潜入夜，润物细无声。<div>
    <p>3野径云俱黑，江船火独明。</p>
    <div>4晓看红湿处，花重锦官城。<div>
</div>
这段代码，一个div标签里有2个p，2个div。
涉及的嵌套，先这么做，后续再详细说明。
怎么选中里面的p和div？

4)后代选择器
比如说想选中上面所有的p/div,
#test p{} 选中test下所有的p标签，即1和3。
同理#test div{} 选中test下所有的div标签，即2和4。
中间通过空格分开。

5）伪类选择器
目前只举其中的几个来说一下。还是上面的代码。
<div id="test">
    <p>1好雨知时节，当春乃发生。</p>
    <div>2随风潜入夜，润物细无声。<div>
    <p>3野径云俱黑，江船火独明。</p>
    <div>4晓看红湿处，花重锦官城。<div>
</div>
1️⃣:first-child 选择一组兄弟元素中的第一个元素。那么选择的就是1。
2️⃣:last-child  选择一组兄弟元素中的最后一个元素。那么选择的就是4。
3️⃣:nth-child(n)  选择一组兄弟元素中第n个元素。假如n是3，那么选择的就是3。
4️⃣:nth-child(even) 选择一组兄弟元素中的偶数元素。那么选择就是2和4。
5️⃣:nth-child(odd) 选择一组兄弟元素中的奇数元素。那么选择的就是1和3。

写法分别如下：
#test:first-child{}
#test:last-child{}
#test:nth-child(3){}
#test:nth-child(even){}
#test:nth-child(odd){}

还有很多选择器，子选择器，相邻兄弟选择器，兄弟选择器，伪元素选择器等就先不说了。
我们也用不到那么多。

先蹲为敬

先來收藏一下謝謝分享辛苦喔

这个技术贴必须要摁个爪Mark住！

第三课
嵌套
文档流，浮动布局和定位布局

第四课
自适应概念
flex布局、grid布局

按照这个进度 猴年马月
再占一个坑
写完能申请加精嘛！！