花飞飞 发表于 2024-9-6 19:55
谢花花不谢
花飞飞 发表于 2024-9-6 19:50
今天的拖曳到是很是新奇，稀罕得很
是不是啊
马黑黑 发表于 2024-9-6 20:45
谢花花不谢
花得 谢谢你{:4_170:}
马黑黑 发表于 2024-9-6 20:46
是不是啊
是啊，没有不是啊
花飞飞 发表于 2024-9-7 19:30
是啊，没有不是啊
没有不是也不好
<style>
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18px / 26px sans-serif; }
.artbox mark { color: black; background: lightblue; padding: 2px 4px; }
.textRed { color: red; }
.textMid { text-align: center; }
.showDiv { position: relative; }
</style>
<div class="artbox">
<h2 class="textMid">第二十九讲：帖子子元素布局技巧（二）</h2>
<p><mark>父元素相对定位+子元素绝对定位</mark>的方式对于做音画帖来说几乎可以满足布局需求，但这不等于说我们可以不学其他的定位知识和技巧。实际上，CSS3+HTML5这些年来陆续推出很多新特性，基于网页布局的元素定位，有很多新奇的技巧一经发布便很快得到各大浏览器的支持，比如现在业已成为布局标准的 flex 和 grid 布局，它们都是基于 display 定位层面的。我们先来看看grid布局，这是当下最为经典的网格布局，它是一个庞大而细节丰富的系统，不过我们只用到它的一点点功能。例如以下例子，我们使用 <mark>grid 布局+特定属性</mark> 主动约束子元素的定位：</p>
<div class="hE"><pre id="pre1">
<style>
/* 父元素使用网格定位类型的display属性 */
.ma {
display: grid; /* 网格布局 */
place-items: center start; /* 放置子元素属性 y=center, x=start */
width: 600px;
height: 200px;
border: 1px solid gray;
}
/* 子元素继承display属性值 用于约束自己的子元素 */
.son {
display: inherit; /* 继承网格布局 */
place-items: center; /* 单值表示 yx 方向同 */
width: 200px;
height: 100px;
background-color: gray;
}
</style>
<div class="ma">
<div class="son">子元素</div>
</div>
</pre></div>
<p><button id="btn1" type="button" value="1">点击查看效果</button></p>
<div id="sbox1" class="showDiv"></div>
<p>上例，父元素使用了grid网格布局，该布局有一个属性 place-items 放置项目，其值分xy两个方向，单值时xy方向一样定位，双值时是按 <span class="textRed">{y,x}</span> 的次序规范子元素的定位，例如上例的 .ma 选择器中，<mark>place-items: center start;</mark> 表示，纵向子元素居中，横向居左；再如，<mark>place-items: end end;</mark> 表示子元素纵向居下，横向居右。place-items 是放置元素的意思，用于约束子元素的定位，共三个关键字值，start 开始，即横左、竖上，center 中心，end 末尾，即横右、竖下。请再回头看看代码，子元素也使用了grid网格布局，display 属性值是 inherit，继承，即继承父元素的相同属性值；place-items 属性则用了单值 center 居中，xy方向都居中，这叫绝对居中；子元素设置这样的样式，是想让它的子元素——本例中的文本——绝对居中，其效果正是如此。居中在很多场合会用到，比如从中心出发的不同大小的粒子，使用 grid 布局技术可以大大简化设置工作；再比如LRC歌词同步中的歌词展示，我们希望它能水平居中，但由于歌词长短不一，处理起来比较麻烦，而grid布局能够很好解决这个问题，只需歌词父元素设置 grid 布局加上相应的 place-items 属性设置即可。</p>
<p>再看如下例子：父元素使用grid布局约束子元素绝对居中，单击子元素它会发生宽高的随机变化，但不论其如何变，它都永远绝对居中：</p>
<div class="hE"><pre id="pre2">
<style>
.ma1 {
display: grid;
place-items: center;
width: 600px;
height: 200px;
border: 1px solid;
}
#son {
display: inherit;
place-items: inherit;
width: 100px;
height: 100px;
background-color: silver;
user-select: none;
}
</style>
<div class="ma1">
<div id="son">点我</div>
</div>
<script>
/* 子元素点击事件 : 随机改变自身宽高 */
son.onclick = () => {
son.style.setProperty('width', `${Math.floor(Math.random() * 500) + 50}px`);
son.style.setProperty('height', `${Math.floor(Math.random() * 150) + 50}px`);
};
</script>
</pre></div>
<p><button id="btn2" type="button" value="2">点击查看效果</button></p>
<div id="sbox2" class="showDiv"></div>
<p>接下来讲一讲 flex 布局。flex 是基于二维的弹性布局，它比 grid 更早出现，我们来看看示例：</p>
<div class="hE"><pre id="pre3">
<style>
/* 父元素使用弹性布局定位类型的display属性 */
.ma2 {
display: flex; /* 弹性布局 */
gap: 8px; /* 规定子元素间距 */
alig-items: start; /* 纵向方向定位，值还有 center 和 end */
justify-content: center; /* 水平方向定位，值还有 start 和 end */
width: 600px;
height: 200px;
border: 1px solid;
}
/* 子元素继承display属性设置 */
.sons {
display: inherit;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
width: 100px;
height: 100px;
background-color: gray;
}
</style>
<div class="ma2">
<div class="sons">子元素1</div>
<div class="sons">子元素2</div>
<div class="sons">子元素3</div>
</div>
</pre></div>
<p><button id="btn3" type="button" value="3">点击查看效果</button></p>
<div id="sbox3" class="showDiv"></div>
<p>flex 弹性布局使用 justify-content 和 align-items 设置子元素的xy方向的定位，可选属性值也是 start、center 和 end 三个。这两个属性 grid 网格布局也可以使用但它有一个更简化的 place-items 属性可以做相同的工作。</p>
<p>以上是通过 flex 和 grid 布局，令父元素具备约束子元素基于对齐方式的具体定位的能力，主要用于网页或帖子布局。最后讲讲子元素自身的另外一种定位方法，通过 transform 属性实现。看例子加以领会：</p>
<div class="hE"><pre id="pre4">
<style>
.ma3 {
width: 600px;
height: 300px;
border: 1px solid gray;
position: relative;
}
.ball {
position: absolute;
width: 50px;
height: 50px;
background: linear-gradient(45deg, yellow, red);
border-radius: 50%;
display: grid;
place-items: center;
}
/* 1号球 ：原地不动（免设置）*/
/* 2号球 ：横向平移（translate单值时基于X轴） */
.ball:nth-of-type(2) { transform: translate(120px); }
/* 3号球 ：纵向平移 */
.ball:nth-of-type(3) { transform: translateY(120px); }
/* 4号球 ：横向+纵向平移 */
.ball:nth-of-type(4) { transform: translate(120px, 120px); }
/* 5号球 ：旋转*横向平移 */
.ball:nth-of-type(5) { transform: rotate(30deg) translateX(500px); }
/* 6号球 ：旋转+纵向平移 */
.ball:nth-of-type(6) { transform: rotate(-60deg) translateY(360px); }
</style>
<div class="ma3">
<div class="ball">1</div>
<div class="ball">2</div>
<div class="ball">3</div>
<div class="ball">4</div>
<div class="ball">5</div>
<div class="ball">6</div>
</div>
</pre></div>
<p><button id="btn4" type="button" value="4">点击查看效果</button></p>
<div id="sbox4" class="showDiv"></div>
<p>transform 是 CSS 的 2d 或 3d 的转换或曰变形的属性，其内容涵盖了平移（translate）、旋转（rotate）、缩放（scale）、扭曲（skew）等，其中平移可以是x方向或y方向或xy方向同时移动，rotate是旋转，可正向或逆向旋转，这取值与角度的正负值。一个元素可以同时设置多个转换属性值，有趣的是，元素旋转在先平移在后，则元素会环绕中心原点即元素最初所处的中心点运动——如果运动是持续的话。关于环绕运动，从上例的5号球和6号球应该能够看得出一点端倪，而下面的例子则真正直观地展示这个特效：</p>
<div class="hE"><pre id="pre5">
<style>
.ma4 {
width: 300px;
height: 300px;
border: 1px solid gray;
display: grid; /* 使用grid布局定位子元素 */
place-items: center; /* 令子元素绝对居中 */
position: relative;
}
.son1 {
width: 50px;
height: 50px;
background: linear-gradient(45deg, olive, red);
animation: go 6s linear infinite;
}
/* 关键帧动画 ：旋转+平移产生环绕运动 */
@keyframes go {
from { transform: rotate(0) translateX(125px); }
to { transform: rotate(-360deg) translateX(125px); }
}
</style>
<div class="ma4">
<div class="son1"></div>
</div>
</pre></div>
<p><button id="btn5" type="button" value="5">点击查看效果</button></p>
<div id="sbox5" class="showDiv"></div>
<p>即便是运动着的元素，我们也需要能够掌控其位置，不令其越界——除非越界是我们所希望的需求。所以，上面的示例，① 使用 grid 布局令子元素绝对居中，这样子元素的运动将环绕父元素的中心点进行；② 从 0 到 360deg 的旋转刚好是一个圆周的角度，这使得子元素在自转一周的同时环绕运动也能首尾无缝衔接；③ 横向平移是 125px 而不是别的数字，是因为父元素的半径为150px、子元素半径为25px，150-25=125，父元素半径减去子元素半径是为了让子元素刚好在父元素内最大化地绕圈圈。</p>
<p>除此之外，还有一些其他的布局技巧，这里就不一一讨论了，相信随着做帖经验的不断丰富，大家会慢慢接触到。</p>
<p><span class="textRed">作业</span>：参照最后的示例，做个<mark>一父三子</mark>的小东东，父元素为圆形空心用以模拟轨道、子元素球体实心用以模拟星球。要求：三个小星球中，每一个星球有一半在轨道内、另一半再轨道外，它们彼此间间隔一定距离，最终效果是三个小星球沿着轨道你追我赶地进行有序运动。【提示】小球错开运动可在 animation 属性中使用简写形式的属性值加入延时执行动画的时间属性，整体语句结构为 <mark>animation: 动画名称 运动周期时长 运动延时 linear infinite</mark>，后两个属性分别表示匀速运动、永不停歇。运动周期时长和运动延时均需要 s 或 ms 单位，延时支持负数值，负数值表示提前运行。</p>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307">返回目录</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);
var runCodes = (str,ele) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
ele.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
.forEach((btn,key) => {
var pres = ,
outs = ;
btn.onclick = () => {
runCodes(pres.innerText, outs);
btn.disabled = true;
}
});
</script>
本帖最后由 马黑黑 于 2024-9-7 19:51 编辑 <br /><br /><div class="artbox">
<h2 class="textMid">第三十讲：完结篇</h2>
<p>一个Web页的标准代码结构其实并不复杂，童鞋们在查看网页源码觉得头大，可能的原因是不了解网页的HTML代码结构。那些密密麻麻的代码，抽取出主干，无非就是如下这几行（可能存在一些细节差异，但标准结构一样）：</p>
<div class="hE"><pre>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>网页标题</title>
</head>
<body>
<!-- 这里是呈现在页面中的所有代码 -->
</body>
</html>
</pre></div>
<p>各行代码的意义对做帖来说无关紧要，大家只需知道帖子代码放在何处就行。实际上如果真不知道帖子代码放在什么地方也没什么问题，因为发布帖子时你的代码安插在何处论坛程序都包办了，我们这里列出网页代码结构是想从理论层面提升自己对Web世界的认知，最终达到看山是山看水是水的境界——即看源码不再头大头疼。Web页的body标签是Web页的躯体，我们帖子的代码会和其他要呈现在页面里的其他元素的代码一样安放在body标签之内。</p>
<p>如果你在自己的计算机里使用文本编辑器制作帖子，那么，你应该使用类似于上面代码的HTML模板，帖子的代码放在body标签<mark><body> ... </body></mark> 的省略号处。你应该将帖子名作为网页标题填写在 <mark><title>网页标题</title></mark> 里，这样查看帖子效果时浏览器对应标签栏的标题就是你帖子的名字。假如整个帖子页面只是你的帖子代码而没有网页标准的代码结构也不会出什么大事，你的帖子代码能够照常运行，但是，浏览器会非常不高兴，例如Firefox 火狐浏览器意见很大，会在控制台报告你的网页存在怪异的现象。</p>
<p>热衷于做帖的童鞋，应该拥有一个趁手的代码编辑器。Windows自带的记事本不理想，它既不能代码高亮，也没有排在各行代码前的行号，它天生就不是用来写代码的——就像它的名字一样它合适用了记事；Linux系统的文本编辑器可以一用，小巧但支持代码高亮、有行号。如果你的计算机系统是Windows，则建议安装一款第三方代码编辑软件，免费软件当中，大型的有微软的 Visual Studio Code，中等个儿的有国人出品的 Notepad--，袖珍的有老外制作的 MadEdit（多语言工作界面，自动支持中文界面）；收费软件当中，国产的 EverEdit 最值得推荐，性价比高功能还特齐全，日产的 EmEditor 和 EverEdit 功能类似但价位高得离谱。这里罗列的几个软件中，MadEdit 可以到 <a href="http://gxblk.ysepan.com/" target="_blank">马黑网盘</a> 下载，放在常用软件目录里，那里还有两个特别版的 Emeditor（使用时不要升级额，另外请注意操作系统是32位的就只能使用32位版本）；Viual Studio Code过于庞大，但它确实很厉害，可以大大提升编写工程的进度；Notepad-- 是对标台独程序员的 Notepad++ 而开发的，很好用（Notepad++ 很优秀，但由于将政治倾向注入软件中，现在已被抵制了，国人几乎都不再使用）；EverEdit不注册也可以全功能使用，就是每次打开软件会弹出关于子窗口，费用不高，注册后一年中可以激活5次，相当于你可以在五台机器中使用该正版软件。还有很多可选的非常优秀的代码编辑器，免费付费的都有，这里就不一一介绍了，感兴趣的朋友可以网搜一下。</p>
<p>可能有的童鞋除了Windows记事本不想去使用第三方代码编辑器，那也没啥问题，又不是做不出帖子来。不过呢，记事本功能确实太弱，不利于高效地编写代码，建议只用它来做些笔记。实在不愿意安装和使用第三方代码编辑器的，可以考虑使用在线编辑器，本人开发的 pencil code 可以一用，目前共三个版本，都有行号，最新的版本还支持代码高亮，可以在 <a href="http://mhh.52qingyin.cn/" target="_blank">马黑整站系统</a> 首页的右侧找到入口。网站中还提供直接对标做帖子的在线工具。这些工具（CSS doodle 支持版除外）能保存最新预览过的代码，下次相同浏览器打开它时代码还在，方便制帖作业。</p>
<p>不论以何种编辑器编写帖子代码，帖子的代码结构都会如下所示：</p>
<div class="hE"><pre>
<!-- 第一部分 ：CSS代码 -->
<style>
/* 这里是CSS代码 ：制定HTML元素样式 */
</style>
<!-- 第二部分 ：HTML代码 - 帖子核心骨架 -->
<div id="tz"> ... </div>
<!-- 第三部分 ：JS代码 -->
<script>
/* 这里是JS代码 ：动态操纵HTML元素 */
</script>
</pre></div>
<p>而做帖用到的知识和技巧则方方面面，本系列讲义通过前面29个章节介绍了一些常用到的知识与技能只是沧海一粟，但如果能充分掌握下来，那便是迈入了前端的门槛，日后随着坚持不懈的做帖实践可以慢慢积累经验、拓展新的知识层面——例如svg、画布canvas、JS API等等都将纳入自己的知识体系。扩展知识体系不要心急，碰上问题再去查找资料，一个一个地处理问题、一点一滴地积累知识，进步就会不等自来。</p>
<p>浏览器的选择也至关重要。网络发展到今天，浏览器五花八门，但归根结底，当下浏览器内核老大是谷歌维护的Chromium，就连微软的Edge 也早已投入 Chromium 的怀抱；此外，还有两个小众内核，一是火狐浏览器的 Gecko，二是苹果生态的 Webkit2。国内一众浏览器除华为新研制的浏览器外，均没有自己的内核，绝大多数都是封装了 Chromium 和已经过期的 IE Trident 内核。选用什么浏览器因人而异，但基于 Chromium 内核的浏览器是首选，且最好内核版本要靠谱，国产的建议使用百分浏览器，考虑兼容问题的可以加装一个双核浏览器（有IE内核，Chromium 版本偏低）备用，国外产品的，若使用的操作系统是win10或以上版本的建议使用 Edge；谷歌的 Chrome 浏览器也可以选择，它通用于各 Windows 版本，但因谷歌退出了中国市场，应考虑使用特殊的“国行版”；火狐（Firefox）是一款较为特别的浏览器，它致力于推崇w3c前端标准，有些方面做得很优秀，但有些方面有做的不到位；Opera过去有自己的内核，现在也转型 Chromium 内核了。不论使用哪一个浏览器，建议不能再使用IE，微软早已亲手将它亲生的IEv这个爱子宣判了死刑——微软家大业大，无视w3c标准，自创一套东东，最终积重难返，连自己都不愿意再维护了。</p>
<p>顺便提一下，主流浏览器都有Web源码检查机制，在打开的网页按F12，浏览器右侧或底部（位置可定制）会有 DevTools 栏目，上面的控制台（controls）选项卡对查找JS错误很有用，至少能知道自己的代码中哪一行出了问题，从而在做补救时不至于找不到方向。</p>
<p>本讲义就到此结束了。感谢大家的坚持与支持！</p>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307&extra=page%3D1">返回目录</a></p>
</div>
花飞飞 发表于 2024-9-7 19:29
花得 谢谢你
谢花
马黑黑 发表于 2024-9-7 19:43
没有不是也不好
那就是啊，也不是啊。{:4_173:}
花飞飞 发表于 2024-9-7 19:55
那就是啊，也不是啊。
都有了
马黑黑 发表于 2024-9-7 19:53
谢花
花不谢了花就谢你。谢花了花就不谢了。{:4_170:}
马黑黑 发表于 2024-9-7 19:55
都有了
看到标题都完结了。
花飞飞 发表于 2024-9-7 19:59
看到标题都完结了。
是的，完了
马黑黑 发表于 2024-9-7 20:00
是的，完了
该完结的完结了{:4_170:}
才上课就已经完结了啊
绿叶清舟 发表于 2024-9-7 20:33
才上课就已经完结了啊
30讲不少了，每一讲的价位一般起步价就是1w的
花飞飞 发表于 2024-9-7 20:23
该完结的完结了
意思是玩完了
马黑黑 发表于 2024-9-7 21:16
30讲不少了，每一讲的价位一般起步价就是1w的
1W还只是起步价啊
绿叶清舟 发表于 2024-9-7 21:25
1W还只是起步价啊
是的
马黑黑 发表于 2024-9-7 21:35
是的
那俺看了贴就赚到一W了