微信小程序——【首页】

首页实现效果图

弹性盒子模型布局详细.

注：如若还有其他疑问可以查看前两篇章

第一部分 自动轮播图

.wxml

swiper ：滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为
子组件：
swiper-item是 swiper 的直接子节点，用于包裹每一张轮播的图片或内容。
indicator-dots 属性：是否显示面板指示点。
autoplay 属性：是否自动切换。
interval 属性：自动切换的时间间隔，单位为毫秒。
duration 属性：滑动动画时长，单位为毫秒。

查看详细信息

.wxss

第二部分滚动视图区域

.wxml

<scroll-view> 标签用于定义一个可滚动的视图区域。
scroll-x 和 scroll-y 属性：分别控制水平(横向)和垂直(纵向)方向上的滚动。

查看详细信息

.wxss

white-space: nowrap; 这将确保该 内的文本不进行换行，而是继续在一行中显示，直到内容超出容器宽度，这时可能会产生横向滚动条。阻止文本在容器宽度不足时换行。
flex-direction默认状态为排列横向(row)，column为纵向排列
flex-direction 是一个非常重要的 CSS 样式属性，用于确定弹性盒子（Flexbox）容器的主轴方向，从而控制子元素的排列方式。flex-direction 有四个可能的值：row, row-reverse, column, 和 column-reverse 。

1、row：子元素从左到右水平排列（这是 flex-direction 的默认值）
2、row-reverse：子元素从右到左反向水平排列。
3、column：子元素从上到下垂直排列。
4、column-reverse：子元素从下到上反向垂直排列。

第三部分 学员作品图片排列和更多跳转

第一块部分 ：作品标题部分

和头部底部一样都是自定义组件(就是公共部分)
######这段内容的自定义组件 点击详细信息

headtitle.wxml

text：文本
属性：
WebView 特有属性：decode 是否解码

navigator 组件用于实现页面间的跳转以及预览图片等功能。它可以非常方便地在不同的页面间进行导航。以下是 navigator 的一些属性：

url：目标页面的路径。相对路径是以当前页面目录为起点。

open-type：指定跳转的方式，可选值包括 navigate（默认，保留当前页面，跳转到应用内的某个页面）、redirect（关闭当前页面，跳转到应用内的某个页面）、switchTab（跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面），等等。

hover-class：指定按下去的样式类。当鼠标按下时，给 .navigator 标签添加 hover-class 类。默认是 navigator-hover。

点击详细信息
headtitle.wxss


基本的伪元素如 ::before 和 ::after 是可以使用的。这些伪元素允许你在不改变HTML结构的情况下向元素添加额外的内容或装饰。

1. ::before 和 ::after
   ::before 和 ::after 伪元素允许你插入内容到一个元素的开始或结束处。这通常用于添加图标、装饰符号，或者进行简单的视觉修饰。

headtitle.js

index.josn (第一块部分完成)

第二块 图片部分

index.wxml

.wxss

flex-wrap 属性。默认情况下，flex 容器的子元素会尝试在一行内显示，但如果添加了 flex-wrap: wrap;，则当一行的空间不足以容纳所有子元素时，它们会自动换行。
注意事项
1、当使用 flex-wrap: wrap; 时，你可能还需要考虑 justify-content 和 align-items 或 align-content 这些属性来控制子元素在行内以及跨行的对齐方式。

2、换行行为也受到子元素的尺寸和容器的尺寸影响。确保你的子元素尺寸（如宽度和高度）以及容器的尺寸（如 width 和 height）设置合理，以便达到预期的布局效果。

3、在某些情况下，你可能需要给子元素设置固定宽度或使用百分比宽度，以确保它们能正确地换行并填充容器。
justify-content 是一个非常重要的 CSS 属性，用于在弹性盒子（Flex）容器中沿主轴（由 flex-direction 属性定义的方向）分配子元素的空间。这意味着你可以控制子元素在容器内的水平对齐方式（如果 flex-direction 是 row 或 row-reverse）或垂直对齐方式（如果 flex-direction 是 column 或 column-reverse）。

justify-content 有以下几种值：

flex-start：子元素靠在主轴的起始端对齐。
flex-end：子元素靠在主轴的末端对齐。
center：子元素在主轴上居中对齐。
space-between：子元素在主轴上均匀间隔，第一个和最后一个子元素分别靠在主轴的起始端和末端。
space-around：子元素在主轴上均匀间隔，每个子元素两侧的空间相等，但总的空间可能比 space-between 少，因为两边不会有额外的空间。
space-evenly：子元素之间以及与容器边缘之间的空间相等。

第四部分

第一块 行业动态自定义组件

和第三部分第一块一样

第二块 图片剪映部分

.wxml

.wxss

overflow: hidden;是一个常用的 CSS 属性，用于控制当一个元素的内容超过其框体大小时的行为。当设置为 hidden，该元素会裁剪任何超出其边界的内容，不让其显示在元素框之外 。这在网页布局和设计中非常有用，尤其是在处理动态内容或需要严格控制元素大小和布局的情况。

注：如若还有其他疑问可以查看前两篇章