这张图的html怎么做
div+flex布局，一个大div，四个小的，给大的加display:flex 和margin:0 uato;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
display: flex;
margin: 0 auto;
width:800px;
}
.box div{
width: 100px;
height: 100px;
border: 1px solid red;
margin: 0 40px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
你看着两行4列，像不像一个table
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.box{
width: 100%;
display: flex;
justify-content: center;
padding-top: 30px;
}
.item{
display: flex;flex-direction: column;align-items: center;justify-content: center;
}
.item:not(:last-child){
margin-right: 10px;
}
.item-img{
width: 100px;height:80px;border:1px solid #000;
}
</style>
</head>
<body>
<div class="box">
<div class="item">
<div class="item-img">
<img src="">
</div>
<span>公开课</span>
</div>
<div class="item">
<div class="item-img">
<img src="">
</div>
<span>视频库</span>
</div>
<div class="item">
<div class="item-img">
<img src="">
</div>
<span>云课堂</span>
</div>
<div class="item">
<div class="item-img">
<img src="">
</div>
<span>传智特刊</span>
</div>
</div>
</body>
</html>有帮助，请采纳
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
width: 100%;
height: 400px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.childBox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 10px;
}
.childBox_img {
width: 100px;
height: 100px;
border: 1px solid #f999;
padding: 10px;
}
.childBox_name {
text-align: center;
}
</style>
</head>
<body>
<div class="container" id="box"></div>
<script>
let box = document.getElementById("box");
const testData = [
{
img: "https://profile.csdnimg.cn/2/3/D/4_m0_58867854",
name: "第一个",
},
{
img: "https://profile.csdnimg.cn/2/3/D/4_m0_58867854",
name: "第二个",
},
{
img: "https://profile.csdnimg.cn/2/3/D/4_m0_58867854",
name: "第三个",
},
{
img: "https://profile.csdnimg.cn/2/3/D/4_m0_58867854",
name: "第四个",
},
];
function createdEle(data) {
let childBox = document.createElement("div");
let childBox_img = document.createElement("img");
let childBox_name = document.createElement("span");
childBox.classList.add("childBox");
childBox_img.classList.add("childBox_img");
childBox_name.classList.add("childBox_name");
childBox_img.src = data.img;
childBox_name.innerText = data.name;
childBox.appendChild(childBox_img);
childBox.appendChild(childBox_name);
box.appendChild(childBox);
}
window.onload = function () {
testData.forEach((item) => {
createdEle(item);
});
};
</script>
</body>
</html>
如果对您有帮助，请您点赞 + 采纳，这是对我最大的鼓励