diff --git "a/\350\222\213\347\276\244/20241104-flex\345\270\203\345\261\200.md" "b/\350\222\213\347\276\244/20241104-flex\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..39da616b9d243a304d6ad98805dd3e70d4c5c9cc --- /dev/null +++ "b/\350\222\213\347\276\244/20241104-flex\345\270\203\345\261\200.md" @@ -0,0 +1,35 @@ +### flex-direction 属性 +flex-direction:用于设置盒子中子元素的排列方向 + +属性值可以是： +1. row 从左到右水平排列子元素 +2. row-reverse 从右到左排水平列子元素 +3. column 从上到下垂直排列子元素 +4. column-reverse 从下到上垂直排列子元素 + +注意：如果不给父级容器写flex-direction这个属性，那么子元素默认从左向右排列。 + +### flex-wrap属性 +flex-wrap:控制元素溢出时的换行处理 + +### justify-content属性 +justify-content ：控制子元素在主轴上的排列方式 + +### 弹性元素 +justify-content属性 + justify-content：flex-start:设置子元素在主轴上的对齐方式 +属性值可以是： +1. flex-start 从主轴的起点对齐（默认值） +2. flex-end： 从主轴的终点对齐 +3. center：居中对齐 +4. space-around:在父盒子里平分 +5. space-between:两端对齐平分 + +### align-items属性 +设置子元素在侧轴上的随其方式 +属性值可以是 +1. flex-start：从侧轴开始的方向对齐 +2. flex-end:从侧轴结束的方向对齐 +3. baseline:基线 默认同flex-start +4. center：中间对齐 +5. stretch：拉伸 diff --git "a/\350\222\213\347\276\244/20241106-\345\270\203\345\261\200\350\256\262\350\247\243.md" "b/\350\222\213\347\276\244/20241106-\345\270\203\345\261\200\350\256\262\350\247\243.md" new file mode 100644 index 0000000000000000000000000000000000000000..37cf10efc263e19926d8f50926dbf3ff03115cc6 --- /dev/null +++ "b/\350\222\213\347\276\244/20241106-\345\270\203\345\261\200\350\256\262\350\247\243.md" @@ -0,0 +1,499 @@ +### 作业1 +音乐效果图：![GIF 2024-11-10 16-18-52](sjt78aar6.hn-bkt.clouddn.com/GIF 2024-11-10 16-18-52.gif) +核心代码： +```html + + + +
+ +
+ + +
+ +
2444.0万 +
催眠：Delta脑波音乐减压深度睡眠
+
+ +
+
+ +
2444.0万 +
催眠：Delta脑波音乐减压深度睡眠
+
+ +
+
+ +
2444.0万 +
催眠：Delta脑波音乐减压深度睡眠
+
+ +
+
+ +
2444.0万 +
催眠：Delta脑波音乐减压深度睡眠
+
+
+ +
+ + +
+
+ +
2444.0万 +
催眠：Delta脑波音乐减压深度睡眠
+
+ +
+
+ +
2444.0万 +
催眠：Delta脑波音乐减压深度睡眠
+
+ +
+
+ +
2444.0万 +
催眠：Delta脑波音乐减压深度睡眠
+
+ +
+
+ +
2444.0万 +
催眠：Delta脑波音乐减压深度睡眠
+
+ +
+ +
+
+ +``` +### 作业2 +效果图： +热门视频核心代码： +```html + + + +
+ +
+
+
+ 热门视频 +
+ +
+ 换一换 +
+ +
+
+ +
+
+ + +
+
无论做什么鱼:最忌放盐
和料酒调制
+
1万评论
+ + 148万观看     司马南频道 + +
+
+
+ + +
+
无论做什么鱼:最忌放盐
和料酒调制
+
1万评论
+ + 148万观看     司马南频道 + +
+
+
+ + +
+
无论做什么鱼:最忌放盐
和料酒调制
+
1万评论
+ + 148万观看     司马南频道 + +
+
+
+ + +
+
无论做什么鱼:最忌放盐
和料酒调制
+
1万评论
+ + 148万观看     司马南频道 + +
+
+ + + + +
+ + +
+ +``` +### 作业3 +经典亚圣杯效果图：![GIF 2024-11-10 16-10-10](sjt78aar6.hn-bkt.clouddn.com/GIF 2024-11-10 16-10-10.gif) +核心代码： +```html + + + +
+
一天到晚到处游的鱼
+
+
左侧
+
中间
+
右侧
+
+
今晚我要早点睡觉
+ +
+ +``` +### 作业4 +布局效果图：![20241110161733](sjt78aar6.hn-bkt.clouddn.com/20241110161733.png) +核心代码： +```html + + + +
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` diff --git "a/\350\222\213\347\276\244/20241108-\346\220\272\347\250\213+\344\272\254\344\270\234\345\270\203\345\261\200.md" "b/\350\222\213\347\276\244/20241108-\346\220\272\347\250\213+\344\272\254\344\270\234\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..1e5ed50bf0290f04decfc5e078d7d12d3b099c42 --- /dev/null +++ "b/\350\222\213\347\276\244/20241108-\346\220\272\347\250\213+\344\272\254\344\270\234\345\270\203\345\261\200.md" @@ -0,0 +1,1203 @@ +### 作业1 携程页面 +效果图：![GIF 2024-11-10 16-27-53](sjt78aar6.hn-bkt.clouddn.com/GIF 2024-11-10 16-27-53.gif) +核心代码： +```html + + + + + + +
+
+ + +
+
+ 我的 +
+ +
+
+
+
+
+ 景点·玩乐 +
+
+
+ 景点·玩乐 +
+
+
+ 景点·玩乐 +
+
+
+ 景点·玩乐 +
+
+
+ 景点·玩乐 +
+ +
+
+
+
海外酒店
+
+
海外酒店
+
特价酒店
+
+
+
海外酒店
+
特价酒店
+
+
+
+
海外酒店
+
+
海外酒店
+
特价酒店
+
+
+
海外酒店
+
特价酒店
+
+
+
+
海外酒店
+
+
海外酒店
+
特价酒店
+
+
+
海外酒店
+
特价酒店
+
+
+
+ + + +
+ +
+
+
+ 电话费 +
+ +
+
+ 电话费 +
+
+
+ 电话费 +
+
+
+ 电话费 +
+
+
+ 电话费 +
+ +
+ +
+
+
+ 电话费 +
+ +
+
+ 电话费 +
+
+
+ 电话费 +
+
+
+ 电话费 +
+
+
+ 电话费 +
+ +
+ + + + +
+
+
热门活动
+
获取更多福利>
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+ + +
+ + + +
+ + +``` +### 作业2 京东页面 +效果图：![GIF 2024-11-10 16-30-28](sjt78aar6.hn-bkt.clouddn.com/GIF 2024-11-10 16-30-28.gif) +核心代码： +```html + + + +
+
+
+
+
+
打开京东APP，购物更轻松
+
+ +
立即打开
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
登录
+ +
+
+
+
+
+
+
+
+
+
+
+ 京东超市 +
+
+
+ 京东超市 +
+
+
+ 京东超市 +
+
+
+ 京东超市 +
+
+
+ 京东超市 +
+
+
+
+
+ 京东超市 +
+
+
+ 京东超市 +
+
+
+ 京东超市 +
+
+
+ 京东超市 +
+
+
+ 京东超市 +
+
+ + +
+
+
+
+
京东秒杀     18
+
+
更多秒杀
+ + +
+
+ +
+
+
+
+
+
+
+
+
+
+
￥25
+
￥2568
+
￥28.8
+
￥19.7
+
￥420
+
￥42.9
+
+
+
+
+
+
+
+
首页
+
分类
+
京喜
+
购物车
+
未登录
+
+ + +
+ + +``` +