制作“用户中心”——盒子模型

最新推荐文章于 2024-08-20 17:17:06 发布

原创最新推荐文章于 2024-08-20 17:17:06 发布 · 2.2k 阅读

10 ·

CC 4.0 BY-SA版权

网页设计与制作专栏收录该内容

5 篇文章

订阅专栏

本博客通过VSCode创建了一个名为06user.html的网页文件，制作了用户中心的页面。首先将title标签设置为'用户中心'，接着在body内添加div盒子，并在其中放入两个子div，分别用于展示图像和四个段落。然后，定义了div的class并在css文件夹中创建了06user.css来添加样式。最后，引入css文件到html的<head>标签中完成页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运用盒子模型划分网页模块

1、打开VSCode，在自己的文件夹中新建网页文件，文件名06user.html

2、具体步骤

2.1 将title标签内容改为“用户中心”

<title>用户中心</title>

2.2 在 < body > 内添加 < div > 的盒子

<body>
    <div class="box"> 
    </div>
</body>

2.3 在 < div > 中添加两个盒子 < div >，分别放置图像标签和4个段落标签

<body>
    <div> 
        <div>
        </div>
        <div>
        </div>
    </div>
</body>

2.4 设置 < div > 的class值，在css文件夹中新建文件06user.css

<body>
    <div class="box"> 
        <div>
            <img src="06user.jpg" alt="用户头像">
        </div>
        <div class="info">
            <p>用户姓名：</p>
            <p>学习进度：</p>
            <p>兴趣爱好：</p>
            <p>参与的群：</p>
        </div>
    </div>
</body>
    </div>

2.5 在06user.html的 < head > 标签中引入css文件

<link rel="stylesheet" href="06user.css">

3、代码

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心</title>
    <link rel="stylesheet" href="06user.css">
</head>
<body>
    <div class="box"> 
        <div>
            <img src="06user.jpg" alt="用户头像">
        </div>
        <div class="info">
            <p>用户姓名：</p>
            <p>学习进度：</p>
            <p>兴趣爱好：</p>
            <p>参与的群：</p>
        </div>
    </div>
</body>

在这里插入图片描述

CSS代码：

*{
    padding: 0;
    margin: 0;
    border: 0;
}
.box{
    font-family: "微软雅黑";
    font-size: 16px;
    width: 150px;
    height: 274px;
    margin: 50px auto;
}
.info p{
    width: 138px;
    height: 33px;
    line-height: 33px;
    border: 1px solid #2e3138;
    margin-top: 2px;
    padding-left: 10px;
}
.box img{
    display: block;
}

在这里插入图片描述