「已注销」 2023-07-20 19:28 采纳率: 100%
浏览 122
已结题

如何写出这个界面（草稿图

img


这样的界面，大概就是边框和边框内的文字居中，这是一个网站界面
https://chengai77a6b.github.io/ANDROID.html
这是GitHub库
https://github.com/chengai77a6b/chengai77a6b.github.io
感谢大家帮忙了，我的码如果有问题也麻烦各位指正，谢谢

  • 写回答

5条回答 默认 最新

  • ZionHH 2023-07-21 10:07
    关注

    写了大致的结构

    <!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

问题事件

  • 系统已结题 7月29日
  • 已采纳回答 7月21日
  • 修改了问题 7月20日
  • 赞助了问题酬金15元 7月20日
  • 展开全部

悬赏问题

  • ¥100 需要跳转番茄畅听app的adb命令
  • ¥50 寻找一位有逆向游戏盾sdk 应用程序经验的技术
  • ¥15 请问有用MZmine处理 “Waters SYNAPT G2-Si QTOF质谱仪在MSE模式下采集的非靶向数据” 的分析教程吗
  • ¥50 opencv4nodejs 如何安装
  • ¥15 adb push异常 adb: error: 1409-byte write failed: Invalid argument
  • ¥15 nginx反向代理获取ip，java获取真实ip
  • ¥15 eda：门禁系统设计
  • ¥50 如何使用js去调用vscode-js-debugger的方法去调试网页
  • ¥15 376.1电表主站通信协议下发指令全被否认问题
  • ¥15 物体双站RCS和其组成阵列后的双站RCS关系验证