这样子的页面怎么写 html css

你题目的解答代码如下：（如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
body {
    background-color: #eee;
}
.box {
    display: flex;
    flex-flow: row wrap;
    width: 570px;
    margin: 0 auto;
}
.box > div {
    width: 150px;
    height: 110px;
    background-color: #fff;
    margin: 20px;
    padding: 20px 0px;
    text-align: center;
    border-radius: 20px; 
}
.box > div:hover {
        box-shadow: 0px 0px 15px #999;

}
.box h4 {
    font-size: 20px;
    margin: 5px 0px;
}
.box p {
    font-size: 12px;
    margin: 5px 0px;
}

</style>
</head>
<body>

<div class="box">
    <div class="ch">
        <img src="1.jpg" width="50" height="50" alt="" />
        <h4>标题</h4>
        <p>内容内容内容内容</p>
    </div>
    <div class="ch">
        <img src="1.jpg" width="50" height="50" alt="" />
        <h4>标题</h4>
        <p>内容内容内容内容</p>
    </div>
    <div class="ch">
        <img src="1.jpg" width="50" height="50" alt="" />
        <h4>标题</h4>
        <p>内容内容内容内容</p>
    </div>
    <div class="ch">
        <img src="1.jpg" width="50" height="50" alt="" />
        <h4>标题</h4>
        <p>内容内容内容内容</p>
    </div>
    <div class="ch">
        <img src="1.jpg" width="50" height="50" alt="" />
        <h4>标题</h4>
        <p>内容内容内容内容</p>
    </div>
    <div class="ch">
        <img src="1.jpg" width="50" height="50" alt="" />
        <h4>标题</h4>
        <p>内容内容内容内容</p>
    </div>
</div>

</body>
</html>

一个div里面嵌套6个小div。每个小div里面是ul li布局。

<ul>
      <li>
        <div class="img"><img src=""/></div>
        <div class="title">问题库</div>
        <p>分类问题</p>
      </li>
      <li>
        <div class="img"><img src=""/></div>
        <div class="title">问题库</div>
        <p>分类问题</p>
      </li>
      <li>
        <div class="img"><img src=""/></div>
        <div class="title">问题库</div>
        <p>分类问题</p>
      </li>
      <li>
        <div class="img"><img src=""/></div>
        <div class="title">问题库</div>
        <p>分类问题</p>
      </li>
      <li>
        <div class="img"><img src=""/></div>
        <div class="title">问题库</div>
        <p>分类问题</p>
      </li>
      <li>
        <div class="img"><img src=""/></div>
        <div class="title">问题库</div>
        <p>分类问题</p>
      </li>
    </ul>

css自己写

很简单，只要完成一个小div就可以了，这6小div个代码都一样，无非就是实现卡片的效果而已，很多前端UI框架都封装了这种风格，比如bootstarp,ElementUI等等，我们只需要拿来用就行了，只要你有点html+css+js基础即可
elementUI官方文档
Element - The world's most popular Vue UI framework Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 https://element.eleme.cn/#/zh-CN/component/card
小案例
常见卡片布局_jason_lyp的博客-CSDN博客_卡片布局效果如图需求：卡片左右两端对齐，间距相同，默认换行，卡片增减不影响布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <scrip https://blog.csdn.net/jason_lyp/article/details/106432280
bootstrap可以参考这篇文档
Bootstrap4 卡片 | 菜鸟教程 Bootstrap4 卡片简单的卡片我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片，实例如下: 实例 [mycode3 type='html'] 简单的卡片 [/mycode3] 尝试一下 » Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。头部和底部 .card-heade.. https://www.runoob.com/bootstrap4/bootstrap4-cards.html

你就写6个小div,然后文字照片居中,鼠标移上去加hover事件

div+flex布局

1个ul包裹6个li，用上flex布局