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>
固定定位
粘性定位
层叠顺序
定位总结
码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践
更多推荐
7
0- 0
已为社区贡献6条内容
所有评论(0)