diff --git "a/\345\272\267\345\273\272\346\242\205/20241104--\345\274\271\346\200\247\347\233\222\345\255\220\357\274\210flex-direction\343\200\201flex-wrap\357\274\211\345\274\271\346\200\247\345\205\203\347\264\240\357\274\210justify-content\343\200\201align-items\357\274\211\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\343\200\201\345\252\222\344\275\223\346\237\245\350\257\242.md" "b/\345\272\267\345\273\272\346\242\205/20241104--\345\274\271\346\200\247\347\233\222\345\255\220\357\274\210flex-direction\343\200\201flex-wrap\357\274\211\345\274\271\346\200\247\345\205\203\347\264\240\357\274\210justify-content\343\200\201align-items\357\274\211\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\343\200\201\345\252\222\344\275\223\346\237\245\350\257\242.md" new file mode 100644 index 0000000000000000000000000000000000000000..7cba11e5568650e9bb8db343fc221b8ecf9c6338 --- /dev/null +++ "b/\345\272\267\345\273\272\346\242\205/20241104--\345\274\271\346\200\247\347\233\222\345\255\220\357\274\210flex-direction\343\200\201flex-wrap\357\274\211\345\274\271\346\200\247\345\205\203\347\264\240\357\274\210justify-content\343\200\201align-items\357\274\211\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\343\200\201\345\252\222\344\275\223\346\237\245\350\257\242.md" @@ -0,0 +1,129 @@ +## 弹性盒子 + +### 声明定义 +使用 `display:flex` 或 display:inline-flex 声明一个**父容器**为弹性盒子 + +### flex-direction属性 +用于设置盒子元素中**子元素**的排列方向 + +属性值： +- row 从左到右水平排列子元素（默认） +- column 从上到下垂直排列子元素 +- row-reverse 从右向左排列 +- column-reverse 从下到上垂直排列子元素 + +### flex-wrap属性 +控制子元素溢出时的换行处理 + +### justify-content属性 +控制子元素在主轴上的排列方式 + + +## 弹性元素 + +### justify-content属性 +设置子元素在主轴上的对齐方式 + +属性值： +- `flex-start` 从主轴的起点对齐（默认值） +- `flex-end` 从主轴的终点对齐 +- `center` 居中对齐 +- `space-around` 在父盒子里平分 +- `space-between` 两端对齐 平分 + +```js +justify-content: flex-start; 设置子元素在**主轴上的对齐方式**。属性值可以是： + + （1）flex-start 从主轴的起点对齐（默认值）-- 一条轴的开始端 ` · · · ` + + （2）flex-end 从主轴的终点对齐 -- 一条轴的末尾端 ` · · ·` + + （3）center 居中对齐 + + （4）space-around 在父盒子里平分（两边留白） -- 一条轴上子元素平分距离 ` · · · · ` + + （5）space-between 两端对齐 平分（两边不留白） -- 一条轴上子元素最左和最右边靠两边 ` · · ` + +``` + +### align-items属性 +设置子元素在侧轴上的对齐方式 + +属性值： +- `flex-start` 从侧轴开始的方向对齐 +- `flex-end` 从侧轴结束的方向对齐 +- `baseline` 基线 默认同flex-start +- `center` 中间对齐 +- `stretch` 拉伸 + +```js +align-items：设置子元素在**侧轴上的对齐方式**。属性值可以是： + （1）flex-start 从侧轴开始的方向对齐 + eg: ` + · · · + + + ` + + （2）flex-end 从侧轴结束的方向对齐 + eg: ` + + + · · · + ` + + （3）baseline 基线 默认同flex-start + eg: ` + · · · + + + ` + + （4）center 中间对齐 + eg: ` + + · · · + + ` + （5）stretcz 拉伸 + eg: ` + · · · + · · · + · · · + · · · + ` +``` + +## 响应式布局 +1. flex +2. grid +3. 列布局 +4.媒体查询 + +## 媒体查询 +根据设备的类型或特定特征和参数（例如屏幕分辨率和浏览器窗口宽度）来应用不同的样式 + +通常通过@media和@import at-rules在CSS中使用，或者通过HTML元素的media=属性来指定特定的媒体类型 + +```css +/* 应用于屏幕的样式 */ +@media screen { +/* 样式代码 */ +} +``` + +例如 +```css +/* 当屏幕宽度小于等于600px时应用此样式 */ +@media screen and (max-width: 600px){ + body{ + background-color: pink; + } +} +/* 当屏幕宽度大于600px时应用此样式 */ +@media screen and (min-width: 601px){ + body{ + background-color: red; + } +} +``` \ No newline at end of file diff --git "a/\345\272\267\345\273\272\346\242\205/20241106--\344\272\254\344\270\234\343\200\201\346\220\272\347\250\213\346\227\205\350\241\214.md" "b/\345\272\267\345\273\272\346\242\205/20241106--\344\272\254\344\270\234\343\200\201\346\220\272\347\250\213\346\227\205\350\241\214.md" new file mode 100644 index 0000000000000000000000000000000000000000..510577a0159a587542f060a348eb6a9eef636b55 --- /dev/null +++ "b/\345\272\267\345\273\272\346\242\205/20241106--\344\272\254\344\270\234\343\200\201\346\220\272\347\250\213\346\227\205\350\241\214.md" @@ -0,0 +1,957 @@ +## 京东 + +1. 效果图 +![](./图片/京东.gif) + +2. 代码如下 +```html + + + + + + + 京东 + + + + + + +
+
+ +
打开京东APP，购买更轻松
+
立即打开
+
+
+
+
+
+ +
+
+
+ + 登录 +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+ 京东秒杀 + 18 + + 更多秒杀 + +
+
+ + + + ￥25 +
+
+ + + + ￥2568 +
+
+ + + + ￥28.8 +
+
+ + + + ￥19.7 +
+
+ + + + ￥420 +
+
+ + + + ￥42.9 +
+
+
+
+
+
+
+ 首页 + 分类 + 惊喜 + 购物车 + 未登录 +
+
+ + + +``` + +## 携程旅行 +1. 效果图 +![](./图片/携程旅行.gif) +2. 代码如下 +```html + + + + + + + + Document + + + + +
+ +
+
+
+ +
+
+
+ 我的 +
+
+ +
+ +
+
+
+ 景点•玩乐 +
+
+
+ 景点•玩乐 +
+
+
+ 景点•玩乐 +
+
+
+ 景点•玩乐 +
+
+
+ 景点•玩乐 +
+
+ +
+
+ 海外酒店 +
+
海外酒店
+
海外酒店
+
特价酒店
+
特价酒店
+
+ +
+
+ 海外酒店 +
+
海外酒店
+
海外酒店
+
特价酒店
+
特价酒店
+
+ +
+
+ 海外酒店 +
+
海外酒店
+
海外酒店
+
特价酒店
+
特价酒店
+
+ +
+
电话费
+
电话费
+
电话费
+
电话费
+
电话费
+
电话费
+
电话费
+
电话费
+
电话费
+
电话费
+
+ +
+
+ 获得更多福利 > +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` \ No newline at end of file diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\344\272\254\344\270\234.gif" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\344\272\254\344\270\234.gif" new file mode 100644 index 0000000000000000000000000000000000000000..bba5b3b66c90108c09601e54655be3944a2f8e61 Binary files /dev/null and "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\344\272\254\344\270\234.gif" differ diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\346\220\272\347\250\213\346\227\205\350\241\214.gif" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\346\220\272\347\250\213\346\227\205\350\241\214.gif" new file mode 100644 index 0000000000000000000000000000000000000000..e916245c694487bac6c44f592514ea9f2f67c696 Binary files /dev/null and "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\346\220\272\347\250\213\346\227\205\350\241\214.gif" differ diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/fish.png" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/fish.png" similarity index 100% rename from "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/fish.png" rename to "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/fish.png" diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/shark2.png" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/shark2.png" similarity index 100% rename from "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/shark2.png" rename to "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/shark2.png" diff --git "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\347\206\212.png" "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\347\206\212.png" similarity index 89% rename from "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\347\206\212.png" rename to "\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\347\206\212.png" index 5100a19f692cc06c4cdc5007aa3248a155d807c2..8f6b1c490e5515a58f5fddc2f54fe100b020c69d 100644 Binary files "a/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\347\206\212.png" and "b/\345\272\267\345\273\272\346\242\205/\345\233\276\347\211\207/\350\277\207\345\216\273\345\274\217/\347\206\212.png" differ