如何写出这个界面（草稿图
这样的界面，大概就是边框和边框内的文字居中，这是一个网站界面
https://chengai77a6b.github.io/ANDROID.html
这是GitHub库
https://github.com/chengai77a6b/chengai77a6b.github.io
感谢大家帮忙了，我的码如果有问题也麻烦各位指正，谢谢
写了大致的结构
<!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;
}
.main {
width: 1200px; /* 容器宽度 */
margin: 0 auto;
}
.main .top,
.main .search {
text-align: center;
}
.main .search {
margin: 20px 0;
}
.main .catagory > li {
display: inline-block;
width: 49%;
border: 1px solid #666;
text-align: center;
}
.main .version-wrap .sub-title {
width: 50%;
border: 1px solid #666;
margin: 10px auto;
text-align: center;
}
.version-list__latest {
text-align: center;
}
.version-list__latest .version-item {
display: inline-block;
width: 200px;
border: 1px solid #666;
}
.version-list__latest .version-item + .version-item {
margin-left: 10px;
}
.version-list__latest .version-item .label {
border-bottom: 1px solid #666;
}
.version-list__latest .version-item .desc {
text-align: left;
padding: 10px;
}
.version-list__history {
width: 50%;
margin: 0 auto;
}
.version-list__history .version-item {
border: 1px solid #666;
padding: 10px;
}
.version-list__history .version-item + .version-item {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="main">
<div class="top">
<h1>标题</h1>
</div>
<div class="search">
<input type="text">
<button type="button">搜索</button>
</div>
<ul class="catagory">
<li>Android</li>
<li>IOS</li>
</ul>
<div class="version-wrap">
<div class="latest">
<h2 class="sub-title">最新版本</h2>
<div class="version-list__latest">
<div class="version-item">
<p class="label">共存版</p>
<div class="desc">
<p>版本号：</p>
<p>版本信息：</p>
<div class="button-area">
<button>下载</button>
</div>
</div>
</div>
<div class="version-item">
<p class="label">光影版</p>
<div class="desc">
<p>版本号：</p>
<p>版本信息：</p>
<div class="button-area">
<button>下载</button>
</div>
</div>
</div>
<div class="version-item">
<p class="label">原版</p>
<div class="desc">
<p>版本号：</p>
<p>版本信息：</p>
<div class="button-area">
<button>下载</button>
</div>
</div>
</div>
<div class="version-item">
<p class="label">破解版</p>
<div class="desc">
<p>版本号：</p>
<p>版本信息：</p>
</div>
<div class="operation">
<button>下载</button>
</div>
</div>
</div>
</div>
<div class="history">
<h2 class="sub-title">历史版本</h2>
<div class="version-list__history">
<div class="version-item">
<p class="version-number">0.0.1</p>
<div class="desc">
<p>更新内容：</p>
</div>
<div class="operation">
<a href="">更多详情</a>
<button>下载</button>
</div>
</div>
<div class="version-item">
<p class="version-number">0.0.1</p>
<div class="desc">
<p>更新内容：</p>
</div>
<div class="operation">
<a href="">更多详情</a>
<button>下载</button>
</div>
</div>
<div class="version-item">
<p class="version-number">0.0.1</p>
<div class="desc">
<p>更新内容：</p>
</div>
<div class="operation">
<a href="">更多详情</a>
<button>下载</button>
</div>
</div>
<div class="version-item">
<p class="version-number">0.0.1</p>
<div class="desc">
<p>更新内容：</p>
</div>
<div class="operation">
<a href="">更多详情</a>
<button>下载</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
要不你用文字描述下需求吧，画图看不清你的需求
草图你都画出来了, 代码不会写吗 ? 记住一点 html 结构就是 玩俄罗斯方块, 或者垒墙 , 跟着你的草图去垒墙就行了 , 如有帮助给个采纳谢谢
页面做的不错
可以试试用bootstrap的一些模板，可以在模板上进行修改，这样比较快。