很Gooood的《javaweb》课程

博主今年大三，爽透的课表，看这空的慌，javaweb 是本学期选修的课程之一，因为对后端和web安全学习需要，选择了该课程。

逆天idea开发。

在之前的课程java的学习中，老师用的 eclipes 这东西仁者见仁智者见智吧，大佬们可能比较喜欢，我不怎么感冒，那上课呢老师说用的idea 来开发，我这不就来劲了嘛，主要这玩意有点跟见大熊猫一样。还有呢 java24 此处省略10个感叹号，有些只能意会呢，因为我没有讲清楚前因后果，反正总得来说呢，事情开始变得有趣了。

开学第一课

。。。想了一下还是省略了，待我期末补充；

总结一下复习课程

因为老师让我们课后学习h5，博主就下来写了这个小网页。因为博主很早就学过html 这里就找了黑马的一个课程速通了一下来复习。这里的话就总结梳理一下知识。
网页链接就放这了现在就PC版 没有自适应

奥来来商城H5 小作业

项目结构

all_shop_pc/
├── CSS/
│ ├── base.css # 基础样式文件
│ ├── common.css # 公共样式文件
│ └── index.css # 首页专用样式文件
├── iconfont/
├── images/
├── uploads/
├── favicon.ico
└── index.html

css

base.css 定义了基础的文字 大小颜色，然后去处了默认样式，如li ol 标签的 a 标签的。
common.css 共同的样式，头部和 页脚样式 然后就是，一些公共栏如标题和版心。
index.css 就是首页样式，学习写也没有讲究这么多，
提到的这个其实我也是想学习写文档，只有受过伤的让，才懂的文档的重要性，后面也会做一个document网，记录项目的 或者上github ,文档写的好，能守护很多自己爱的人！这不得不提**魔方的v10！

HTML

html 就提几个我忘记的 ，
1、flex  布局，这个平时使用还是多，用多了就会比较熟悉，

Flex 布局 30 秒速记卡（一张图就能画完）

┌─ 容器（display:flex） ─┐
│ ① 方向: row | column  +  reverse        │
│ ② 换行: wrap | nowrap                   │
│ ③ 主轴对齐: justify-content  (↔)        │
│ ④ 交叉对齐: align-items  (↕ 单行)       │
│ ⑤ 多行对齐: align-content  (↕ 多行)     │
└─────────────────────────────────────────┘
        ↓ 项目（子元素）
┌─ 项目属性 ─┐
│ flex: 1 1 auto   ← grow shrink basis    │
│ align-self  单独覆盖交叉轴对齐          │
│ order  数字越小越靠前                   │
└────────────────────────────────────────┘

口诀
“容方换主交，项长顺自序”
（容器：方向、换行、主轴、交叉；项目：flex、align-self、order）

一行居中秒杀

父：display:flex; justify-content:center; align-items:center;

flex 容器

哎这里就附上一个博客圆的文章讲的挺好的。

一文搞懂flex（弹性盒布局）

2、第二就是定位position
这个较为好记一点，也挺好用。
CSS 定位（position）知识框架一句话口诀：  

“一个基准、两类偏移、四种模式、五组对比、六大场景”。

1. 一个基准
   所有定位都参考 包含块（Containing Block）——不一定是父元素！

2. 两类偏移

   • 轴偏移：top / right / bottom / left
   • 层叠偏移：z-index（仅对定位元素生效）

3. 四种模式（记忆顺序：静相绝固）

   模式	是否脱标	包含块	特性关键词
   static	否	正常	默认值，不能用偏移
   relative	否	正常	占位保留，视觉偏移
   absolute	是	最近已定位祖先或初始包含块	完全放飞，宽度收缩
   fixed	是	视口（viewport）	滚动不动
   sticky *	特殊	最近滚动祖先	滚动范围内“相→固”切换

4. 五组对比

   • 脱标 vs 占位
   • 层叠上下文新建规则（z-index 生效范围）
   • 宽度表现（自动收缩 vs 撑满）
   • 百分比偏移参考（包含块尺寸）
   • 移动端兼容差异（fixed 软键盘、iOS 底部安全区）

5. 六大高频场景

   1. 子绝父相 —— 图标角标、悬浮按钮
   2. fixed 头尾 —— 导航/工具栏
   3. sticky 表头 —— 长列表吸顶
   4. 居中组合拳 —— 绝对定位 + 负 margin / transform
   5. 层叠控制 —— 下拉菜单、模态框 z-index 管理
   6. 滚动视差 —— fixed 背景图缓慢移动

30 秒回顾：
“静相绝固粘，脱标看包含；偏移四属性，层叠用 z-index；子绝父相最常用，fixed 视口 sticky 滚。”

代码

扯淡

前端学起来很容易上手，就会给很多人假象，一看就会，但是一写就废了。多写是学习很多语言的技巧，慢慢使用框架以后，可以减轻很多重复的工作，都有一个过程慢则是快！