设计一个css和html页面

请设计页面帮助gg爆（猪）相亲。
提交为三张截图。一张.css页面代码，一张.html页面代码，一张最后展示截图。
先谢谢你帮助我。但我的要求有点多:
1.请帮我选择一张帅气的自拍 .要有边框。若图片显示不出，则显示我的英文名。
2.请介绍我的个人信息，重点信息需要标注，生日需要使用time标签。自拍和个人信息之间用水平线分割一下,我觉得更好看一点。
3. 文字不大不小，不粗不细，一定堂堂正正,因为我是正直的猪猪，这部分使用font对字体样式进行综合设置
4.字和字，单词和单词，行和行之间一定要有间距,不要很挤呀。
5. 所有的样式都帮我放在css文件吧，不要太繁琐呀，多多利用它的层叠性和继承性。

您好，以下是根据您的需求设计的HTML和CSS页面。我假设您的自拍图片的文件名是"selfie.jpg"，英文名是"GGBao"。

CSS代码：

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.selfie {
    display: block;
    margin: 0 auto;
    border: 5px solid #ccc;
    width: 300px;
    height: auto;
}

.info {
    margin-top: 20px;
    border-top: 1px solid #ccc;
    padding-top: 20px;
}

.info h2, .info p {
    margin-bottom: 10px;
}

.info time {
    color: #ff0000;
    font-weight: bold;
}

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="container">
        <img class="selfie" src="selfie.jpg" alt="GGBao">
        <div class="info">
            <h2>GG爆</h2>
            <p>我是GG爆，一名正直的猪猪。</p>
            <p>生日：<time datetime="2000-01-01">2000年1月1日</time></p>
        </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 {
            padding: 12px;
        }

        .photo {
            width: 150px;
            height: 200px;
            border: 1px solid blue;
            padding: 12px;
            margin: 0 auto;
        }

        .photo img {
            width: 100%;
            height: 100%;
        }

        /* 分割线 */
        .divider {
            width: 100%;
            height: 1px;
            background: blue;
            margin: 12px 0;
        }

        .msg h1 {
            text-align: center;
        }

        .msg p {
            letter-spacing: 2px;
            /* 设置左右两字的间距为2 */
            line-height: 2;
            /* 设置行间距为2 */
        }

        .msg .emphasize {
            color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="photo">
            <!-- alt就是你的英文名 -->
            <img src="https://img0.baidu.com/it/u=2121652337,3810493438&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1694538000&t=7f632597a446a85797e4f63a5c84e642"
                alt="Jack">
        </div>
        <div class="divider"></div>
        <div class="msg">
            <h1>个人信息</h1>
            <p>
                我是正直的猪猪，<font class="emphasize">男</font>，<time datetime="2000-09-20">2000-09-20</time> 出生于河南省，今年<font
                    class="emphasize">23岁</font>。9999999999999999999999999999999999999999999999999999999999
            </p>
        </div>
    </div>
</body>

</html>

大致是这样。至于 css 外部引入你只需要新建一个css文件然后把 style里的内容复制进去即可。然后 style link方式引入（注意相对路径，路径不对的话样式显示不出来）。