Nodejs新界面的两个头像并排设计，彰显了这是一个基情的社区

Nodejs新界面的两个头像并排设计，彰显了这是一个基情的社区

感觉LOGO 的node 快融进去背景了。

8 回复

Nodejs新界面的两个头像并排设计，彰显了这是一个基情的社区

在最新的Node.js社区界面上，我们采用了两个头像并排的设计，这不仅增加了页面的视觉吸引力，还象征着社区成员之间的紧密联系和互动。为了实现这一设计，我们使用了HTML、CSS以及一些JavaScript来动态地调整头像的位置和样式。

示例代码

首先，我们需要创建一个包含两个头像的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node.js 社区</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="avatar-container">
        <img src="avatar1.jpg" alt="用户1" class="avatar">
        <img src="avatar2.jpg" alt="用户2" class="avatar">
    </div>
</body>
</html>

接下来，我们通过CSS来设置这两个头像的样式，使其并排显示，并且具有一定的间距和圆角效果：

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

.avatar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 20px; /* 控制头像之间的间距 */
}

最后，为了让整个页面更加生动，我们可以使用JavaScript来添加一些动态效果。例如，当鼠标悬停在头像上时，头像可以稍微放大并改变边框颜色：

// script.js
document.querySelectorAll('.avatar').forEach(avatar => {
    avatar.addEventListener('mouseover', () => {
        avatar.style.transform = 'scale(1.1)';
        avatar.style.border = '3px solid blue';
    });

    avatar.addEventListener('mouseout', () => {
        avatar.style.transform = 'scale(1)';
        avatar.style.border = '';
    });
});

通过这些简单的HTML、CSS和JavaScript代码，我们可以轻松实现一个既美观又富有交互性的社区首页。这种设计不仅提升了用户体验，也突显了Node.js社区作为一个充满活力和互动精神的平台。


是不是应该把最后回复的那个人的头像缩小下！

卤煮这么一说，顿时有种前面的头像被后面的人轮流爆菊花的赶脚。

头像部分参考了 http://python-china.org/ 的一些, 貌似 Python-China 已经把两个头像给改了 - -!!

人家连头像都不显示了。。。

最后回复时间其实也蛮好的东西，建议留着

我最操心也是这个, 话题为了保持一行的简洁, 做取舍不容易

要实现一个Node.js界面中两个头像并排的设计，可以使用HTML、CSS和JavaScript来完成。下面是一个简单的示例代码，展示如何创建这样的布局。

示例代码

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node.js 社区界面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <img src="avatar1.jpg" alt="User Avatar 1" class="avatar">
        <img src="avatar2.jpg" alt="User Avatar 2" class="avatar">
    </div>
</body>
</html>

CSS (styles.css)

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    display: flex;
    gap: 20px; /* 调整两个头像之间的间距 */
}

.avatar {
    width: 100px; /* 设置头像宽度 */
    height: auto; /* 保持头像的宽高比 */
}

解释

  1. HTML部分：

    • 创建一个包含两个<img>标签的<div>容器。
    • 每个<img>标签都有一个class="avatar"，以便通过CSS进行样式设置。

  2. CSS部分：

    • body设置为display: flex，以使内容居中对齐。
    • .container也设置为display: flex，这样内部的两个<img>元素会并排显示。
    • 使用gap: 20px来调整两个头像之间的间距。
    • .avatar类设置了每个头像的宽度为100像素，并保持其原始宽高比。

结果

运行上述代码后，你会看到两个头像并排显示在一个居中的容器中。你可以根据需要调整CSS中的参数（如gap、width等），以适应你的具体需求。

希望这可以帮助到你！

回到顶部