pink老师html5+css3day04
文章目录
- 弹性盒子
- 单行
- 多行
- 百度图片案例
- 小兔鲜案例
- 定位布局
- 相对定位
- 绝对定位
- 案例猫咪
- 固定定位
- 粘性定位
- 层叠顺序
- 定位总结
弹性盒子
单行
flex写在孩子身上，gap写在父亲身上
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {display: flex;width: 80%;border: 1px solid red;gap: 20px;margin: 0 auto;}.box .item {flex: 1;width: 80px;height: 100px;background-color: pink;border-radius: 10px;}.box .item:nth-child(odd) {background-color: purple;}/* .box .item:nth-child(3) {flex: 2;} */</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>
</body></html>
多行
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {display: flex;width: 80%;border: 1px solid red;margin: 0 auto;flex-wrap: wrap;}.box .item {width: 80px;height: 120px;background-color: pink;border-radius: 10px;flex: 1;min-width: calc(16.66666667% - 16px);max-width: calc(16.66666667% - 16px);margin: 0 8px 16px;}</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div><div class="item">10</div><div class="item">11</div><div class="item">12</div><div class="item">13</div><div class="item">14</div><div class="item">15</div><div class="item">16</div><div class="item">17</div><div class="item">18</div><div class="item">19</div><div class="item">20</div></div>
</body></html>
百度图片案例
横向用 flex 排列列；列内部不需要 flex，靠 a{display:block} 的默认纵向流把图片一张张往下叠。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.col-flex {display: flex;width: 1180px;margin: 20px auto;border: 1px solid red;gap: 16px;}.col-flex .item {flex: 1;}.item a {display: block;width: 100%;border-radius: 18px;overflow: hidden;margin-bottom: 15px;}.item a img {width: 100%;vertical-align: bottom;border: 1px solid pink;}</style>
</head><body><div class="col-flex"><div class="item"><a href=""><img src="img/c1.webp" alt=""></a><a href=""><img src="img/c2.webp" alt=""></a><a href=""><img src="img/c3.webp" alt=""></a><a href=""><img src="img/c4.webp" alt=""></a><a href=""><img src="img/c5.webp" alt=""></a><a href=""><img src="img/c6.webp" alt=""></a><a href=""><img src="img/c7.webp" alt=""></a><a href=""><img src="img/c8.webp" alt=""></a><a href=""><img src="img/c9.webp" alt=""></a><a href=""><img src="img/c10.webp" alt=""></a></div><div class="item"><a href=""><img src="img/c2-1.webp" alt=""></a><a href=""><img src="img/c2-2.webp" alt=""></a><a href=""><img src="img/c2-3.webp" alt=""></a><a href=""><img src="img/c2-4.webp" alt=""></a><a href=""><img src="img/c2-5.webp" alt=""></a><a href=""><img src="img/c2-6.webp" alt=""></a><a href=""><img src="img/c2-7.webp" alt=""></a><a href=""><img src="img/c2-8.webp" alt=""></a></div><div class="item"><a href=""><img src="img/c3-1.webp" alt=""></a><a href=""><img src="img/c3-2.webp" alt=""></a><a href=""><img src="img/c3-3.webp" alt=""></a><a href=""><img src="img/c3-4.webp" alt=""></a><a href=""><img src="img/c3-5.webp" alt=""></a></div><div class="item"><a href=""><img src="img/c4-1.webp" alt=""></a><a href=""><img src="img/c4-2.webp" alt=""></a><a href=""><img src="img/c4-3.webp" alt=""></a><a href=""><img src="img/c4-4.webp" alt=""></a><a href=""><img src="img/c4-5.webp" alt=""></a><a href=""><img src="img/c4-6.webp" alt=""></a><a href=""><img src="img/c4-7.webp" alt=""></a></div><div class="item"><a href=""><img src="img/c5-1.webp" alt=""></a><a href=""><img src="img/c5-2.webp" alt=""></a><a href=""><img src="img/c5-3.webp" alt=""></a><a href=""><img src="img/c5-4.webp" alt=""></a><a href=""><img src="img/c5-5.webp" alt=""></a><a href=""><img src="img/c5-6.webp" alt=""></a><a href=""><img src="img/c5-7.webp" alt=""></a><a href=""><img src="img/c5-8.webp" alt=""></a><a href=""><img src="img/c5-9.webp" alt=""></a><a href=""><img src="img/c5-10.webp" alt=""></a></div></div>
</body></html>
小兔鲜案例
定位布局
相对定位
绝对定位
案例猫咪
这段代码用一个 1000px 宽、相对定位且溢出隐藏的 .box 容器，放入 display:flex 的横向图片列表（每个 li 固定 200px 宽，图片自适应 100%）；上下用 ::before/::after 伪元素做成半圆提示条显示文案；CSS 隐藏滚动条并启用平滑滚动；JS 监听 wheel 事件，preventDefault() 后把垂直滚轮量 deltaY 转成对 scrollLeft 的加减，实现“用鼠标滚轮纵向操作 → 横向滚动浏览猫图”的效果。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猫咪效果</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}ol,ul {list-style: none;}.box {overflow: hidden;position: relative;width: 1000px;margin: 100px auto;}.box::before,.box::after {/* 属于行内元素，但是加了定位，则可以直接给宽度和高度 */position: absolute;left: 0;content: '';width: 100%;height: 100px;background-color: #fff;border-radius: 50%;text-align: center;color: #000;}.box::before {top: -50px;content: '可爱的小猫咪，滚动鼠标滚轮可以查看哦~~~';line-height: 120px;}.box::after {bottom: -50px;content: '你喜欢我们吗？ 点击可以查看哦！';line-height: 60px;}.box ul {display: flex;gap: 15px;/* 水平滚动条 *//* overflow-x: scroll; *//* 隐藏滚动条 */scrollbar-width: none;/* 平滑滚动 */scroll-behavior: smooth;}/* 让谷歌或者苹果浏览器隐藏滚动条 */.box ul::-webkit-scrollbar {display: none;}.box ul li {/* width: 200px; *//* 不拉伸， 不伸缩 初始值设置为200px */flex: 0 0 200px;}.box ul li img {width: 100%;}</style>
</head><body><div class="box"><ul><li><a href="#"><img src="./img/cat1.jpg" alt=""></a></li><li><a href="#"><img src="./img/cat2.jpg" alt=""></a></li><li><a href="#"><img src="./img/cat3.jpg" alt=""></a></li><li><a href="#"><img src="./img/cat4.jpg" alt=""></a></li><li><a href="#"><img src="./img/cat5.jpg" alt=""></a></li><li><a href="#"><img src="./img/cat6.jpg" alt=""></a></li><li><a href="#"><img src="./img/cat7.jpg" alt=""></a></li><li><a href="#"><img src="./img/cat8.jpeg" alt=""></a></li><li><a href="#"><img src="./img/cat9.jpeg" alt=""></a></li><li><a href="#"><img src="./img/cat10.jpeg" alt=""></a></li><li><a href="#"><img src="./img/cat11.jpeg" alt=""></a></li><li><a href="#"><img src="./img/cat12.jpeg" alt=""></a></li></ul></div><script>// 获取可滚动的容器const scrollContainer = document.querySelector('.box ul');// 监听鼠标滚轮事件scrollContainer.addEventListener('wheel', (e) => {// 阻止默认的垂直滚动行为e.preventDefault();// 根据滚轮的垂直滚动量（deltaY）调整横向滚动量（scrollLeft）// 乘以系数（如 1.5）可调整滚动灵敏度scrollContainer.scrollLeft += e.deltaY * 1.5;});</script>
</body></html>
固定定位
粘性定位
层叠顺序
定位总结
