小白音画帖教程（完结）
本帖最后由 马黑黑 于 2024-9-7 19:52 编辑 <br /><br /><style>#contentsBox { min-height: 400px; font-size: 18px; }
</style>
<h2>目录</h2>
<p>【提示】讲义展示的代码高亮需要 chromium内核 ≥ 105</p>
<div id="contentsBox"></div>
<script>
let datas = [
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2151697&fromuid=7130', '第一讲：初识音画帖代码结构'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2151698&fromuid=7130','第二讲：认识CSS选择器和HTML标签的关系'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2151699&fromuid=7130','第三讲：帖子容器背景、尺寸与定位'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2151961&fromuid=7130','第四讲：给帖子添加子元素并定位'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2152247&fromuid=7130','第五讲：让帖子子元素动起来'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2152474&fromuid=7130','第六讲：帖子加入音频并使用旋转的图片“控制”音频'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2153259&fromuid=7130','第七讲：加入音、视频及CSS关键帧动画联动控制机制'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2153649&fromuid=7130','第八讲：联动控制函数如何管理众多子元素的动态变化'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2153820&fromuid=7130','第九讲：在帖子中添加大批量的子元素'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2153996&fromuid=7130','第十讲：元素边框'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2154358&fromuid=7130','第十一讲：CSS渐变之线性渐变'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2154764&fromuid=7130','第十二讲：CSS渐变之径向渐变'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2155206&fromuid=7130','第十三讲：CSS渐变之锥形渐变'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2155645&fromuid=7130','第十四讲：CSS阴影'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2156089&fromuid=7130','第十五讲：文本阴影和使用元素背景渲染文本'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2156529&fromuid=7130','第十六讲：CSS遮罩'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2157105&fromuid=7130','第十七讲：CSS伪元素 ::before 和 ::after'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2157210&fromuid=7130','第十八讲：在帖子中使用常规CSS颜色'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2157566&fromuid=7130','第十九讲：颜色融合模式 *-blend-mode 和多背景图像的处理'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2157947&fromuid=7130','第二十讲：CSS filter滤镜'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2158332&fromuid=7130','第二十一讲：学一点点JS（一）变量'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2158704&fromuid=7130','第二十二讲：学一点点JS（二）函数'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2158912&fromuid=7130','第二十三讲：学一点点JS（三）元素的JS相关事件'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2159737&fromuid=7130','第二十四讲：学一点点JS（四）动态追加元素'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2164281&fromuid=7130','第二十五讲：学一点点JS（五）JS操作CSS属性和HTML属性'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2166997&fromuid=7130','第二十六讲：学一点点JS（六）JS操作CSS变量'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2168345&fromuid=7130','第二十七讲：在帖子中实现LRC歌词同步'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2169142&fromuid=7130','第二十八讲：帖子子元素布局技巧（一）'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2170159&fromuid=7130','第二十九讲：帖子子元素布局技巧（二）'],
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=77307&pid=2170160&fromuid=7130','第三十讲：完结篇'],
];
const getDatas = (ar) => {
let outstr = '<blockquote>';
ar.forEach(item => {
outstr += `<a href="${item}">${item}</a><br>`;
});
outstr += '</blockquote>';
return outstr;
};
contentsBox.innerHTML = getDatas(datas);
</script>
本帖最后由 马黑黑 于 2024-7-23 20:01 编辑 <br /><br /><style>
.artbox { position: relative; }
.artbox > p { margin: 10px 0; font: normal 18px / 26px sans-serif; }
.artbox > p > mark { color: black; background: lightblue; padding: 2px 4px; }
.textRed { color: red; }
.textMid { text-align: center; }
</style>
<h2>第一讲：初识音画帖代码结构</h2>
<div class="artbox">
<p>做音画帖好比小时候做黑板报，都是在一定的区域内布置我们想要呈现的内容，我们追求的效果不论是花里胡哨的还是朴实无华的，其目的都是我们要展现我们想要表达的，并希望作品能够吸人他人前来欣赏，最好能够和我们达成共鸣。</p>
<p>黑板报发布了，内容是在黑板上，帖子呢，在一楼，当然也可以在别的楼层。一楼或别的楼层就相当于一块黑板，不同于黑板报的是，我们做音画帖可以发宽幅帖子，我们的帖子宽度可以大于它预设留给我们的尺寸。要做到这一点，我们其实用到了CSS，不管你此前对CSS有没有概念。比方讲，你用这样的HTML代码组织你的帖子：</p>
<div class="hE"><pre><div style="position：relative; width: 1400px; height: 720px; left: -600px; background: url('图片地址');"></div></pre></div>
<p>其上的 <mark>style="..."</mark> 部分，就是CSS！CSS是什么，或者，什么是CSS？CSS是层叠样式，是做网页不可或缺的组成模块，该模块负责制定“黑板报”每一个内容的样式。上面大家可能用过的代码，style 就是样式的意思，其等号后面的双引号里的内容集合，有 div 的定位方式（position）、宽度（width）、高度（height）、左边位置（left）、背景图（background）等等，这些，都是描述性的语句，语句结构是一组一组的键值对（例如：<mark>width: 1400px;</mark> 中，width 是键，1400px 是值），每一组键值对用分号 <mark>;</mark> 隔开。这种样式的制定是通过 style 属性嵌套在 div 元素内，我们可以称之为嵌套式CSS，它直接作用于使用它的 div 或其他的元素。嵌套式CSS层叠样式现在已经不主张过多使用，前端行业标准认为，CSS应该独立出来，以便让网页页面的结构更为清晰，将来如果有维护需要也更容易操作。试看如下剥离出 CSS 的帖子代码结构：</p>
<div class="hE"><pre>
<style>
#mydiv {
position：relative;
width: 1400px;
height: 720px;
left: -600px;
background: url('图片地址')";
}
</style>
<div id="mydiv"></div>
</pre></div>
<p>我们可以看到，style 以标签对的形式出现，第一行是 style 的起始符，<mark><style></mark>，第九行是收尾符，<mark></style></mark>；二者间的内容就是CSS的具体内容，每一个单位的内容（上例只有一个单位）都会有一个名称，这里，以 <mark>#</mark> 号开头的叫 <mark>id选择器</mark>，它的内容用一组花括号 <mark>{...}</mark> 包裹起来，里面的每一行对应于前面的 style 属性中的键值对，除了分行写（也可以不分行）没什么不同。这个就叫<mark>内联式CSS</mark>，它通过 <style> 和 </style> 来组织代码，独立于HTML代码。而最后一行就是HTML代码，注意看 div 里面有一个 <mark>id="mydiv"</mark>，其意思是，我这个 div 使用 CSS 样式表中的 <mark>#mydiv</mark> 指定的层叠样式，<mark>#mydiv</mark> 所描述的一切，我都遵照执行。</p>
<p>这里强调一下：上述代码分成两个部分，其一，CSS代码，用 <style> 和 </style> 头尾包裹起来，里面的内容全部是用来制定HTML元素的样子（样式），制定方式是给出一个或多个选择器（比如 #mydiv）并在花括号内用键值对的方式一一描述各个属性，将来HTML元素（比如 div）通过使用 id="选择器名称" 来接受样式制定；其二，HTML代码，上面示例代码的最后一行就是，它是网页的组成部分，我们称之为元素或HTML标签，有 div（分区）、p（段落）、span（行内包裹元素）、img(图片）、audio（音频）、video（视频）等等，它们一般成对出现（比如 <div> ... </div>），这叫闭合标签，也有单独出现的（如 <img ... />），这叫自闭合标签。</p>
<p>CSS还有其他的剥离方式，将来我们如果用得上我们会讲解。其他的内容也是如此，碰上了我们就会解释一下。本节就讲到这，看完本讲，如果能明白内联式CSS + HTML就一切OK，更多的内容我们会一一接触、慢慢扩展。学习愉快！</p>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307&extra=page%3D1">返回目录</a></p>
</div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>
本帖最后由 马黑黑 于 2024-7-23 19:55 编辑 <br /><br /><h2>第二讲：认识CSS选择器和HTML标签的关系</h2>
<div class="artbox">
<p>上一讲，<a href="http://43.159.199.78/forum.php?mod=redirect&goto=findpost&ptid=13984&pid=496672">《初识音画帖代码结构》</a>，我们讲到了CSS的 <mark>id选择器</mark>，该选择器由 <span class="textRed">#+名称</span> 表示，然后用花括号 <mark>{}</mark> 将描述元素属性值的语句组织起来，例如，<mark>#mydiv { ... }</mark>，对应的HTML元素则使用 <span class="textRed">id="mydiv"</span> 表示这个元素使用 <span class="textRed">#mydiv</span> 选择器制定的样式来渲染（呈现）自己。这就是CSS和HTML标签（元素）的对应关系。我们需要注意的是，相同一个页面里，HTML标签的 <span class="textRed">id 是唯一的</span>，就像我们每一个人的身份证（id）一样不能有雷同。下面的HTML代码，第二个 div 是非法的，因为它的 id 第一个 div 已经使用：</p>
<div class="hE"><pre>
<div id="tiezi">第一个div合法</div>
<div id="tiezi">第二个div非法</div>
</pre></div>
<p>CSS选择器除了 id选择器 外，常用的还有类选择器，术语叫做 <mark>class选择器</mark>，它以点号 <mark>.</mark> 开头，后面紧跟上名称，然后也是用花括号组织HTML元素的属性代码，试看：</p>
<div class="hE"><pre>
<style>
.textRed {
color: red;
}
</style>
<div class="textRed">我是div标签</div>
<p class="textRed">我是p标签</p>
</pre></div>
<p>上面，CSS代码仅一个选择器，<span class="textRed">.textRed</span>，它就是class选择器，用来规定一个类别的标签的样式，它定义了文本颜色（术语称为前景色）为红色（red）。接着，HTML代码中有两个标签，一个是div标签，另一个是p标签，它们都通过 class="textRed" 表明自己使用 <span class="textRed">.textRed</span> 这个类选择器来设定自己的样式。结果如下：</p>
<blockquote>
<div class="textRed">我是div标签</div>
<p class="textRed">我是p标签</p>
</blockquote>
<p>id选择器也好，class选择器也好，它们的名称都是我们自命名的，命名规则没有严格要求，一般来说在兼顾合法（比如不能用数字开头，但可以使用中文命名）的基础上尽可能地语义化，以便修改、维护代码时能一目了然、轻松自如。而有些选择器我们不能自由命名，它们的名称是固定的，直接使用HTML的元素名称命名，术语称为<mark>元素选择器</mark>，做帖时用到的不多，但有必要了解一下。看代码：</p>
<div class="hE"><pre>
<style>
p {
font-size: 20px; /* 字体大小 */
color: #000; /* 前景色 */
}
video {
position: absolute; /* 定位 */
width: 100%; /* 宽度 */
height: 100%; /* 高度 */
}
</style>
</pre></div>
<p>这里，定义了两个选择器的样式，一个是 <mark>p</mark>选择器，将对应HTML的p标签即段落标签，另一个是 video选择器，将对应于 video标签即视频标签；p标签和视频标签是HTML固有的标签，还有很多，例如 div、audio、img 等等等等。这样定义之后，默认情况下，页面所有的 p标签 和 video标签 将使用各自的CSS选择器样式来呈现自己。但是，元素选择器可以被 id选择器 和 class 选择器更改样式，就是说，以 p标签 为例，如果我们还定义了一个 #myp 或 .myp 选择器，那么，当 p标签 使用了 id="myp" 或 class="myp"，这个p标签将优先使用 #myp 或 .myp 来渲染自己，具体是，重叠的属性，使用 #myp 或 .myp 选择器定义的样式（p选择器定义的属性被覆盖），不重叠的部分继续使用 p选择器 定义的属性样式——CSS有这么一个特性：后面定义的属性会覆盖前面定义的属性，还有，通用设置的属性会被特定设置的属性覆盖。</p>
<p>CSS选择器的内容还有很多，分法也很细致，不过我们暂时用不到的我们先不介绍，将来需要用了我们再去学习也不迟。</p>
<p>本讲主要讲解常用的CSS选择器以及它们和HTML标签的对应关系，理解这些将有助于音画帖的制作。</p>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307&extra=page%3D1">返回目录</a></p>
</div>
本帖最后由 马黑黑 于 2024-7-23 20:00 编辑 <br /><br /><style>
.wrap { position: relative; width: 605px; height: 400px; border: 1px solid gray; margin: auto;}
.wrap > img { position: relative; }
</style>
<h2>第三讲：帖子容器背景、尺寸与定位</h2>
<div class="artbox">
<p>帖子容器一般指的是帖子自身的元素，通常是一个 div，来装载我们要发布的内容，里面可能有文本、图像、音频、视频等，所以称作容器，也叫帖子主元素、帖子父元素。帖子容器自身最好有一个 id，一来便于在CSS中给它定义CSS样式，二来，将来需要使用JS对它或内部子元素操纵时有个操作标识，例如 id="papa" 或 id="mama" 等等都可以，这回我们用 mama 吧——mama可不是一般的存在是不是？那么，对应的 CSS 选择器就是 <mark>#mama {}</mark> 了，具体内容和解释如下：</p>
<div class="hE"><pre>
<style>
#mama {
width: 1280px; /* 帖子宽度 */
height: 720px; /* 帖子高度 */
background: url('图片地址') no-repeat center / cover; /* 帖子背景图及设置 */
}
</style>
</pre></div>
<p>帖子宽、高的设置无需解释，这里要做的是记下两个属性名称， <span class="textRed">width</span> 和 <span class="textRed">height</span>，分别用来表示宽度和高度。CSS属性名称用来描述HTML元素某个特性，名称是固有的，常用到的要一一记住。此外，这里也应了解一下CSS注释的写法，<mark>/* 注释内容 */</mark>，这是CSS注释唯一的写法。注释的作用主要是做标记、对代码进行解释或说明。背景属性是我们要重点讨论的知识点，属性 <span class="textRed">background</span> 表示背景，这是 id="mama" 元素的背景属性，首先用 <mark>url('图片地址')</mark> 这样的固定方式将图片作为元素的背景图片，接着用 <mark>no-repeat</mark> 参数表明背景图片不重复，最后用 <mark>center / cover</mark> 表示：图片位置居中，即居于帖子元素的中央，图像的大小是 cover，cover有封面之意，cover 用来表示背景图像的尺寸是封面式尺寸，它可以保证封面女郎不被压缩变形，就是对审美活动没有影响的意思，但是要观赏全身嘛……这个以后再说吧。background 属性的值信息量有点大，今后我们会有一讲甚至更多讲专门讨论它。这里要特别注意的是关于 background 的背景图片的尺寸和帖子实际宽高尺寸的关系问题，一般来说，尽可能让图片的尺寸和帖子的实际尺寸相一致，如若不能一致，二者间的差距也不应太大，否则，上面的 cover 背景尺寸设置方案虽然可以保证图片不会变形扭曲，但可能会有过多的内容被裁切掉。</p>
<p>下面谈谈帖子的定位问题。帖子要定位于合理的地方，CSS里<span class="textRed"> ① </span>需要用到一个<span class="textRed">position</span> 属性，position 是“位置”的意思，我们做帖会用到的有两个可选值，一个是 <mark>relative</mark>，相对之意，表示相对定位，另一个是 <mark>absolute</mark>，绝对之意，表示绝对定位。帖子容器应使用相对定位，因为相对定位的元素它占据页面应分派给它的实际空间，空间的大小就是它的宽高尺寸，且其地盘不会被其他元素挤占，而绝对定位的元素，虽然可以拥有自己的宽高尺寸，但它在页面元素群中不实际占据空间，处于游离状态，随时可能被挤占或覆盖。试看以下的演示，点击图片下方的按钮可以切换镁铝图片的相对定位和绝对定位这两种定位方式，看看会发生什么：</p>
<div class="wrap">
<img id="img1" src="https://638183.freep.cn/638183/small/400.jpg" alt="" />
<img src="https://638183.freep.cn/638183/small/780.png" alt="" />
</div>
<p class="textMid"><button id="btnChg" value="0">将第一张图片改为绝对定位</button></p>
<p>从演示中应该可以感受到：相对定位时，戴眼镜的菇凉的地盘是神圣不可侵犯的，绝对定位时，花朵就去霸占了她的位置。还好是花朵，人美花来助，结局皆大欢喜，但是呀请尊贵的小童鞋认真地想一想，如果花朵不是花朵而是一只癞蛤蟆呢？</p>
<p>感谢花菇凉让我们明白了帖子容器要使用 <mark>position: relative;</mark> 的相对定位方式，但这还不够，所以接着介绍<span class="textRed"> ② margin</span> 属性。这是元素的外边距属性，定义元素上、右、下、左四个边缘和外部拉开的距离，我们将利用 margin 这个外边距属性来调整帖子在论坛框架下的位置，使得帖子基于水平方向居中。千山论坛的布局，帖子所在的“黑板”存在 90px 的向右偏移量，所以，我们这么设置 margin 属性：</p>
<div class="hE"><pre>
<style>
#mama {
position: relative; /* 帖子相对定位 */
margin: 230px 0 30px calc(50% - 730px); /* 外边距设置使得帖子处在合适的位置 */
width: 1280px;
height: 720px;
background: url('图片地址') no-repeat center / cover;
}
</style>
</pre></div>
<p><mark>position: relative;</mark> 必须，这是帖子通过外边距或其他方式进行定位的基础，也是将来帖子顺利收拢其下诸多子元素的依赖。代码中，margin 属性我们设置了四个值，第一个是 230px，指上外边距，说的是 id="mama" 的 div 上边缘的外边距是 230px，这么设置的作用是让帖子容器的上边缘留空230个像素，以便令帖子不覆盖发帖用户的头像；第二个值是 0，是右变的外边距，值为0才能确保最后一个值即左外边距的设置不受挤占、影响；第三个是 30px，指下边的外边距，这样帖子和底部也拉开一定距离，不会紧贴着评分区域而导致评委评分困难；第四个是左边的外边距，它用上了CSS的计算函数 <mark>calc(...)</mark>，小括号里面的是算式，加减乘除符号两头一定要留有一个空格，然后，算式里面的 50% 指左外边距的值是 50%，但要减去 730px，这样帖子就在水平方向绝对居中。那这个 730px 又是如何得来的？这是有依据的，计算公式是 <span class="textRed">1280÷2+90</span> 而得，其中 1280 是我们设置的帖子的宽度，90是帖子在论坛框架下的向右偏移量（注意不同的论坛偏移量不一样）。这里，知道 calc() 函数是这么用的就好，里面的算式能理解最好，不能理解的照着做就行，小括号里减去多少个px能够准确无误计算出来就行了。</p>
<p>本节，帖子的定位略为复杂，它需要 <mark>position: relative;</mark> 的支持，通过 <span class="textRed">margin</span> 外边距属性对四个方向按 <span class="textRed">上、右、下、左</span> 的顺序一一设定对应值，左外边距值用到 calc 计算函数，根据帖子宽度和论坛右偏移量确定小括号里 50% - <span class="textRed">多少</span>px，这是重点也是难点，理解不了也要强记计算与设置方法。</p>
<p>最后给出一个实例代码，它可以在千山论坛当下的布局状况下水平居中，大家可以找个地方试一试，并思考margin属性设置中， calc() 计算函数里小括号内的算式中 50% 减去的为什么是 630px（代码在第四行）：</p>
<div class="hE"><pre>
<style>
#mama {
position: relative;
margin: 230px 0 30px calc(50% - 630px);
width: 1080px;
height: 720px;
background: url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat center/cover;
}
</style>
<div id="mama"></div>
</pre></div>
<p>以上代码可以存为本地 .html 文档然后双击运行以查看效果，也可以复制到 <a href="http://mhh.52qingyin.cn/api/pccc/" target="_blank">pencil code</a> 直接运行。本地独立文件和 pencil code 运行环境都不存在右偏移量，所以 calc() 函数里减去的是帖子的一半，上外边距则设为 30px 即可。</p>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307&extra=page%3D1">返回目录</a></p>
</div>
<script>
btnChg.onclick = () => {
let val = btnChg.value;
img1.style.position = ['absolute','relative'][+val];
btnChg.innerText = ['恢复第一张图片为相对定位', '将第一张图片改为绝对定位'][+val];
btnChg.value = val === '0' ? '1' : '0';
}
</script>
求原链接地址 音画小白的福音，
从做贴结构开始，一段一段的进行讲解。。
每一句代码的含义都清清楚楚。。{:4_199:}{:4_173:} 这些基础的东西，经常学习和复习，收获很大{:4_199:} 手把手教小白制作音画贴子。。{:4_199:}
这个教程应该是全网唯一，开先河的系统音画教程贴。。
必定成为经典。。。。。 起个网名好难 发表于 2024-7-23 20:11
求原链接地址
难难在这里看也是一样的，黑黑都会发的。论坛下还有黑黑网站的链接，难难更应该去黑黑那看看。{:4_187:} 本帖最后由 马黑黑 于 2024-7-24 13:23 编辑
起个网名好难 发表于 2024-7-23 20:11
求原链接地址
尚未备案，低调玩玩：
本帖最后由 马黑黑 于 2024-7-24 13:23 编辑
马黑黑 发表于 2024-7-23 20:59
尚未备案，低调玩玩：
这个居然无备案。。。{:4_173:} 本帖最后由 马黑黑 于 2024-7-24 13:23 编辑
马黑黑 发表于 2024-7-23 20:59
尚未备案，低调玩玩：
谢谢！
难怪搜索不到{:5_102:} 红影 发表于 2024-7-23 20:54
难难在这里看也是一样的，黑黑都会发的。论坛下还有黑黑网站的链接，难难更应该去黑黑那看看。
只是想去见识下那论坛{:5_117:}
现在不太耐烦看长篇帖子（帖文），能看个开头就差不多了{:5_102:} 起个网名好难 发表于 2024-7-23 21:17
谢谢！
难怪搜索不到
{:4_191:} 先收藏着，慢慢学习。谢谢黑黑老师辛苦！{:4_187:} 梦江南 发表于 2024-7-24 11:42
先收藏着，慢慢学习。谢谢黑黑老师辛苦！
{:4_190:} 本帖最后由 马黑黑 于 2024-7-24 12:12 编辑 <br /><br /><h2>第四讲：给帖子添加子元素并定位</h2>
<div class="artbox">
<p>前面我们已经学会了设置帖子父元素尺寸、给帖子添加背景图片以及定位帖子等内容，现在，我们来看看如何给帖子添加必要的元素，例如一幅小图片。下面，帖子容器我们继续使用上一节的，但为了便于现场展示，我们可能会修改包括选择器名称在内的相应数据。下面，为了给帖子添加小图片，我们在CSS代码里额外设计一个id选择器 <span class="textRed">#mypic</span>，并将图片标签作为帖子父元素的子元素放到HTML代码里：</p>
<div class="hE" id="hE1"><pre>
<style>
/* 帖子父容器id选择器 */
#mama {
position: relative;
margin: 20px auto;
width: 760px;
height: 450px;
background: url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat center/cover;
}
/* 子元素小图片id选择器 */
#mypic {
position: absolute; /* 绝对定位 */
left: 10px; /* 左边位置 */
top: 10px; /* 上边位置 */
width: 160px;
height: 160px;
}
</style>
<!-- HTML代码 ：父元素包裹一个子元素 -->
<div id="mama">
<img id="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
</div>
</pre></div>
<p><button id="btnShow1" value="btn1">点击查看效果</button></p>
<div id="showDiv1"></div>
<p>请对照代码和效果，领会图片绝对定位、左边和上边位置、宽高尺寸的代码设置对图片的直接作用。注意，子元素使用绝对定位 <mark>position: absolute;</mark> 依赖于父元素的相对定位 <mark>position: relative;</mark>设置，只有父元素设置了相对定位，子元素的绝对定位才真正有效、可控。left 属性用来设定元素的左方位值，10px 的 left 值表示图片作为子元素，它将位于离主元素左边缘 10px 的地方，而 top 用来设定上边位置，这里也是 10px，表示图片处在离主元素上边缘 10px 的地方，left 和 top 合起来共同决定了图片的具体位置：在主元素的左上角，离主元素上边缘、左边缘各10个像素。</p>
<p>设置元素位置，除了用 left、top 表示方位，还可以使用 right、bottom，right 是右边方位，表示离主元素右边缘的距离，bottom 是底边方位，表示离主元素底边边缘的距离。一横一纵的两两组合可以快捷定位子元素的具体位置，但是必须留意，两个横向的不能在一起使用，两个纵向的也不能在一起使用。</p>
<p>同时注意一下 img 标签的HTML代码，它的id属性 <mark>id="mypic"</mark> 指向CSS选择器 <span class="textRed">#mypic</span>；<span class="textRed">alt</span> 属性 alt="" 是为了代码合法需要：图片标签要求，当图片不能显示时应该有一个文本说明，你可以在引号里加入相应的文本，比如 alt="四叶草"，留空也可以；<span class="textRed">src</span> 属性必须，用来表达图片地址，地址正确的话这个标签代码显示出来的就是该地址指向的图片。img标签是一个自闭合标签，它的收尾符直接就是 <mark>/></mark>，所有自闭合标签都是使用这个符号收尾。</p>
<p>我们可以给父元素添加很多子元素，例如三张相同的图片。下例，帖子父元素 id 改为 papa，因为前面的讲义提到过，一个页面里不能有相同的 id，此外我们使用类选择器即 <mark>.选择器名称</mark> 统一制定图片的样式，并通过 <mark>nth-of-type()</mark> 伪类选择器设定每一张图片的具体位置：</p>
<div class="hE" id="hE2"><pre>
<style>
/* 帖子父容器id选择器 */
#papa {
position: relative;
margin: 20px auto;
width: 760px;
height: 450px;
background: url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat center/cover;
}
/* 子元素小图片class选择器 */
.mypic {
position: absolute; /* 绝对定位 */
width: 160px;
height: 160px;
}
.mypic:nth-of-type(1) {
left: 10px;
top: 10px;
}
.mypic:nth-of-type(2) {
right: 10px;
bottom: 10px;
}
.mypic:nth-of-type(3) {
left: calc(50% - 80px);
top: calc(50% - 80px);
}
</style>
<div id="papa">
<img class="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
<img class="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
<img class="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
</div>
</pre></div>
<p><button id="btnShow2" value="btn2">点击查看效果</button></p>
<div id="showDiv2"></div>
<p>我们之前提到过关于CSS的设置特色，后面设置的属性会覆盖前面的设置，不雷同的属性设置则继续使用前面的设置。利用这一特点，我们先将图片的共同属性设置在 .mypic 选择器里，这一部分的设置的属性只要后来不被覆盖，那么，将是三张图片共同使用的，因为三张图片的HTML代码都使用了 <span class="textRed">class="mypic"</span> 这个class类属性值。然后，我们又使用了 <span class="textRed">.mypic:nth-of-type(N)</span> 这样的伪类选择器来逐一设定各自不同的属性设置，比如 left 或 right、top 或 bottom 等等。伪类选择器是CSS一个伟大的创意，它的出现使得CSS的灵活性大大加强，这里我们仅需要知道怎么用 :nth-of-type(N) 就行，它很简单，只需留意两点：一是伪类选择器为谁工作——冒号前面的是什么选择器它就为那个选择器工作，上例中，它们为 .mypic 选择器工作；二是它具体指哪一个HTML元素——N是多少就对应于HTML代码中相应标签按顺序自上往下的第几个，例中，1 对应第一个 class="mypic" 的img标签，2 对应于第二个，3 对应于第三个。</p>
<p>最后留一个小作业：在上述代码基础上，请再加上两个相同的小图片，第四个小图片放在帖子元素的左下角、第五个小图片放在右上角，这两张图片，每一张图片离帖子主元素最近的边缘都是10px。提示：CSS代码中，需要再添加两个 :nth-of-type() 伪类选择器，在HTML代码中，同样需要添加两个img标签。你可以将代码拿到 <a href="http://mhh.52qingyin.cn/api/pccc/" target="_blank">pencil code</a> 中进行修改并预览效果。</p>
<p>【附】position相对定位与绝对定位</p>
<p>CSS的 position 属性用于设定元素的定位方式。当一个元素定设定为绝对定位，<mark>position: absolute;</mark>，虽然其默认（属性缺省，即不设置有left、top等方位定位属性时） left 和 top 均为 0，但是，它是否处在父元素的左上角并不确定，这将依赖于其父元素是否设置有的 position 属性，有，则子元素默认在它的左上角，没有，则子元素会去寻找更上一级的父辈元素即爷爷、太爷爷、太太爷爷等等，直到找到一个设置有 position 属性的祖先元素，就待在该元素的左上角。换言之，一个设置了绝对定位的元素，left 和 top 的方位设置以其父辈、祖父辈乃至年龄更大的某一代祖先为定位依据，按从小到大的顺序往上找，找到设置有 position 的第一个祖辈元素，以它的左上角作为自己的坐标参考。这就是为什么我们强调帖子元素设置 position 为 relative 的原因之一：这个设置对子元素具备约束力，其实就是给其下的子元素提供坐标依据。</p>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307&extra=page%3D1">返回目录</a></p>
</div>
<script>
const runMyCode = (target,source) => {
const pre = source.querySelector('pre');
target.innerHTML = pre.innerText;
};
btnShow1.onclick = () => {
runMyCode(showDiv1, hE1);
btnShow1.disabled = true;
}
btnShow2.onclick = () => {
runMyCode(showDiv2, hE2);
btnShow2.disabled = true;
}
</script>
学习了。{:4_190:} 梦江南 发表于 2024-7-24 15:52
学习了。
这个教程应该不会太难懂吧 马黑黑 发表于 2024-7-24 16:47
这个教程应该不会太难懂吧
嗯，这个教程基本能看懂。谢谢老师辛苦！