type
status
date
slug
summary
tags
category
icon
password
  • 技术选型
    • html+css+js
      • 原因：简单方便能快速实现测试效果
  • 详细的制作过程与步骤
    • html初始设置
      • 这一步只需要注意两点
        • 1.js文件要放在body最底层 以防止 js读取不到元素信息
        • 2.html文件的类名和css js的类名和结构一定要匹配 建议多使用复制 而不是手动输入来添加类名 如果出现效果应用不上 建议强制刷新浏览器 或者使用控制台调试工具 检查样式应用情况
    • css初始设置 normalize
      • 关键功能与步骤
        • 1.全局盒子计算模型
        • 2.body 列表和超链接默认样式移除
      • 实现代码与方法
        • 1.对于盒子模型 我们可以用全局选择器和全局之前之后伪类选择器 将所有的元素的盒子模型计算方式从content-size 变成border-sizing 其中操作代码如下：
            • notion image
        • 2.对于列表和超链接
        • 首先移除body的margin和padding 让容器内容能够无缝和网页边缘贴合
            • notion image
        • 然后移除ul和list-item的默认样式 把li的list-style改为none 并移除ul自带的padding还有margin
            • notion image
        • 最后移除超链接的默认样式 将下划线text-decoration还有color自定义一下
            • notion image
      • 代码原理 为啥要这么做
        • 1.使用盒子模型可以让宽高直接等于设定的宽高 不会出现误差 节省了手动设置尺寸的时间
        • 2.移除默认样式就更别说了 就是把原先自带的一些内外填充还有样式重置一下 避免后续制定样式的时候出现偏差
    • css样式设计
      • 响应式布局设计
        • 关键功能与步骤
          • 默认大小 900px的情况下 让flex-box 水平均匀分布每个对象
          • 小屏幕 414
            • 汉堡图标
            • 纵向均匀分布每个对象
          • 中等 700
            • 元素调整
          • 大屏幕 1200
            • 元素调整
          • 特大屏幕
            • 使用container max-width+margin auto限制宽度并居中navbar
        • 代码实现与方法
        • 代码原理 为啥要这么做
          • 基础知识(重要):1.flex-box 一种适用于多项目对齐的布局方式 常用于管理navbar等无序列表
            • flex 容器属性
              • 对齐
                • 对齐方向
                  • row
                  • column
                • 主轴对齐
                  • start
                  • end
                  • center
                  • baseline
                  • space
                • 交叉轴对齐
                  • same
              • 折叠
                • wrap
              • 间距
                • padding
                • gap
              • 多对象对齐
                • warp align-content
            • flex item属性
              • 对齐
                • jus self
                • align self
              • 填充
                • flex:1/flex-grow:1
              • 顺序
                • order
              • 收缩 shriks
              • 覆盖 basics
            • 教程链接
          • 基础知识2(重点)：margin和padding的区别
            • margin
              • 侧重点 margin侧重调整元素位置
              • 对元素的影响
                • 不影响元素本身的大小
              • 适合领域
                • 适合在不影响元素本身大小的情况下调整固定比例的图片 icon 文本段落的具体位置
            • padding
              • 侧重点
                • padding侧重让通过填充内部 让内容变得更美观好看
              • 对元素的影响
                • padding的填充会影响到自身的大小
              • 适合领域
                • 所以padding适合一些表单按钮的填充
                • 适合一些hover按钮的填充
                • 适合一些需要内部间距 又不改变卡片背景的新闻卡片
                • 还有一些flex和grid的均匀布局
          • 基础知识3：单位 rem em % vh px
          • 基础知识4：position relative absolute static fix top left right bottom
          • 基础知识5： border: size,style,color;
          • 基础知识6：border-ridus:xxpx;
          • 基础知识7：居中元素的方法
            • flex grid的对齐属性
            • 文本对齐属性 text-align
              • 水平方向时只对 内联元素和行内块级元素有效 所以 当使用text-align水平对齐文本的时候 需要将文本元素对象设置为内联块级元素
            • 视觉上的居中
              • 标准流使用 margin padding
              • 定位元素使用top等定位
            • 使用container居中并限制元素宽度 max-width+margin auto限制宽度并居中navbar
            • 注意:除了脱离了文档流的元素 其他元素要想居中 需要有充足的空间
        • 难点攻克
          • 遇到的问题
            • 1.列表横向排布问题
            • 2.列表纵向排布和居中对齐的问题
            • 3.容器在响应式变换中出现填不满背景的现象
          • 如何解决
            • 1.分清楚flex模型的容器属性 在navbar ul等容器上添加flex属性 让他沿着row方向水平展开
            • 2.使用column竖向展开每一个flex容器 nav和ul 注意 让flex-box对象居中 可以使用flex容器属性自带的对齐方式 也可以使用text-align来居中
              • 值得注意的是 1.注意容器宽度 无论使用text-align还是flex 对齐 都需要保证每个flex-container的宽度有足够的活动空间 建议把navbar还有ul的宽度都设置为100% 或者flex-grow:1;
              • 2.text-align的特殊性
                • 在水平方向上 text-align的只作用于内联元素还有内联块级元素 所以我们需要将每个list-item对象设置为内联对象才能用 如果是垂直方向 则没有这个顾虑 块级元素也能用text-align居中对齐
            • 3.由于子元素本身自带了大小属性 当容器大小无法容纳子元素的时候 即使父元素设置了填满宽度
          • 如何避免
            • 补足相关基础知识 理解代码原理
        • 优化改进
      • 基本交互
        • 悬停效果
          • 普通文本变色悬停 .classname:hover{}
          • 手机纵向导航居中与悬停效果 注意悬停对象的盒子大小就可以了
      • 细节优化
        • 响应式空间微调
          • 目的
            • 各种屏幕元素比例和空间划分是否合理
            • 是否 对齐与居中
            • 视觉中心有主有次
            • 元素是否有设计美感
        • 交互效果微调与提升
          • 目的
            • 动画效果是否恰到好处 多了就减 少了就加 不符合网站风格就换
          • 效果添加
            • 下划线悬停效果
            • 彩虹灯光glow发光效果
            • 这一步 为了避免重复造轮子 可以使用以前的积累和动画库 但事后一定得明白他的原理
    • js交互
      • 按钮开关
        • 关键 使用classlist.toggle 类名切换
      • canvas粒子星空
        • 关键：使用canvas时要将画布放在body最底层 且css的属性也要在最底层 所以设置成static最为合适不过
    • 综上所诉
      • 关键思维
        • 迭代思维 从粗糙到精致 好的东西都不是一蹴而就的 一开始的东西一定很丑 途中一定会出现九九八十一难 我们一定要不断解决问题 将产品一步步的进行完整迭代 才有可能能做好一个东西
        • 整体思维 从整体到局部 保证每一步的视觉效果都是完整的
        • 以结果为导向的思维 从最开始直接确定最终目标效果 不达目的誓不罢休 不断的查漏补缺 才能真正的有所收获
      • 优化方向
        • 完成一个项目后 一定要多注释和重构代码 追求更好的结果
  • 注释与重构
    • 注释
      • html部分
      • 其他部分
    • 重构
      • 探索更多的优化方向 追求更少 更快 效果更好的代码
【奇淫巧计】如何实现blender与c4d的互导？4.13日 热门产品快报