1. 项目概述：从零到一，打造你的个人数字名片

还在为课程作业、实习申请或者个人展示发愁吗？一个简洁、专业、能体现你个人特色的静态网页，就是你在数字世界里的第一张名片。对于大学生来说，掌握HTML和CSS基础，亲手搭建一个个人介绍网站，不仅是完成作业的捷径，更是踏入前端开发世界最扎实的第一步。这个项目，就是为你量身定制的：一个使用纯DIV进行布局、结构清晰、代码规范的个人静态网页模板。它不依赖任何复杂的框架，核心就是HTML5和CSS3，你甚至可以直接用记事本编写，当然，用Dreamweaver这类可视化工具来辅助布局和预览会更高效。我将带你从最基础的 <!doctype html> 声明开始，一步步拆解每个DIV的职责，详解CSS如何让页面“活”起来，最终得到一个可以直接下载、修改并提交的“成品”。无论你是零基础的文科生，还是正在夯实基础的计科同学，这篇内容都能让你避开我当年踩过的坑，快速拥有一个拿得出手的作品。

2. 核心设计思路与DIV布局规划

2.1 为什么选择“DIV+CSS”布局？

在网页设计的远古时代，表格（ <table> ）曾被广泛用于布局，但那会导致代码臃肿、语义不清且难以维护。现代网页设计的基石是“结构与样式分离”，而 <div> 元素正是实现这一理念的核心容器。它是一个无语义的块级元素，就像乐高积木中的基础方块，我们可以通过CSS赋予它任何我们想要的样式和位置。

选择DIV布局的核心优势在于：

  1. 灵活性极高 ：通过CSS的 display 、 float 、 position 以及现代的 flex 和 grid 属性，可以轻松实现任何你能想象到的版面。
  2. 代码语义化 ：虽然 <div> 本身无语义，但我们可以通过为其添加有意义的 id 或 class 名称（如 #header , .nav-item ）来提升代码可读性。
  3. 便于维护和协作 ：样式都集中在CSS文件中，要修改网站的整体风格（如颜色、字体），通常只需改动一个CSS文件，而不是在成千上万个 <table> 标签中寻找属性。
  4. 对搜索引擎友好 ：清晰的HTML结构有助于搜索引擎理解页面内容。

对于学生作品而言，掌握DIV布局意味着你理解了现代网页的骨架搭建方式，这是比直接使用现成模板或拖拽工具更底层、更重要的能力。

2.2 页面结构拆解：五大部分构建个人门户

一个标准的个人介绍网页，其结构可以抽象为几个关键部分。我们将用不同的DIV来承载这些部分，并为它们起好名字。

  1. 页头区域 ：通常包含网站Logo和主导航菜单。这个区域需要固定在页面顶部，或者在滚动时保持醒目。
  2. 横幅/英雄区域 ：这是用户打开网页第一眼看到的区域，用于展示最核心的个人信息，如姓名、一句酷炫的座右铭、一张专业的头像或背景图。这里需要强烈的视觉冲击力。
  3. 主体内容区 ：这是页面的核心，可以进一步细分为多个子DIV，例如：
    • 关于我 ：详细的个人简介、教育背景、技能树。
    • 作品集/项目展示 ：用图文或卡片形式展示你的课程设计、实习项目等。
    • 技能清单 ：以进度条、图标列表等形式直观展示你的技术栈。
    • 联系我 ：提供邮箱、社交媒体链接（如GitHub、LinkedIn）的表单或链接。
  4. 页脚区域 ：放置版权信息、备案号、额外的导航链接或回到顶部的按钮。

我们的布局规划就是用一个外层的“包裹”DIV来容纳所有这些部分，并控制整个页面的最大宽度和居中。这种结构清晰明了，后续无论是用 float 、 flex 还是 grid 来实现，都只是手段的不同。

注意 ：在开始写代码前，强烈建议在纸上或设计工具（如Figma、墨刀）中画出简单的线框图。明确每个区块的大小、位置和包含的内容，这能节省你大量在代码中反复调试布局的时间。

3. HTML骨架搭建与语义化实践

3.1 从 <!DOCTYPE html> 开始：标准的起手式

每一个HTML文档都必须以文档类型声明开头。 <!DOCTYPE html> 告诉浏览器这是一个HTML5文档，浏览器会以此为标准来解析和渲染页面。省略或写错它可能会导致浏览器进入“怪异模式”，使你的CSS样式表现不一致。

紧接着是 <html> 根元素，我们通常为其指定语言属性 lang="zh-CN" ，这对搜索引擎和屏幕阅读器等辅助工具非常重要。 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张三的个人主页 | 前端初学者</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <!-- 所有页面内容将在这里编写 -->
</body>
</html>

关键点解析 ：

  • <meta charset="UTF-8"> ：设置字符编码为UTF-8，确保中文等字符正常显示。
  • <meta name="viewport" ...> ： 移动端适配的基石 。它控制视口的宽度和缩放比例，没有它，网站在手机上看可能就是缩小的桌面版，体验极差。
  • <title> ：显示在浏览器标签页上的标题，也是搜索引擎结果中显示的主要标题，应包含你的名字和关键信息。
  • <link rel="stylesheet"> ：引入外部CSS文件，实现样式分离。
  • <link rel="icon"> ：为网站添加一个小图标（favicon），提升专业感。

3.2 用DIV搭建主体结构

现在，我们在 <body> 内部，用DIV搭建起我们规划好的结构。注意，我给每个主要的DIV都赋予了唯一的 id ，用于在CSS中进行精确的样式控制。 

<body>
    <!-- 1. 页头 -->
    <div id="header">
        <div class="container">
            <div id="logo">张三</div>
            <ul id="nav">
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我</a></li>
                <li><a href="#portfolio">作品集</a></li>
                <li><a href="#contact">联系我</a></li>
            </ul>
        </div>
    </div>

    <!-- 2. 英雄横幅区 -->
    <div id="hero">
        <div class="container">
            <h1>你好，我是 <span class="highlight">张三</span></h1>
            <p>一名热爱技术与设计的大学生，正在前端开发的道路上探索。</p>
            <a href="#portfolio" class="btn">查看我的作品</a>
        </div>
    </div>

    <!-- 3. 主体内容容器 -->
    <div id="main-content" class="container">
        <!-- 关于我 -->
        <section id="about" class="content-section">
            <h2>关于我</h2>
            <div class="about-wrapper">
                <img src="images/avatar.jpg" alt="张三的头像" class="avatar">
                <div class="about-text">
                    <p>我是XX大学软件工程专业的大三学生...</p>
                    <!-- 更多内容 -->
                </div>
            </div>
        </section>

        <!-- 技能清单 -->
        <section id="skills" class="content-section">
            <h2>我的技能</h2>
            <div class="skill-item">
                <span>HTML/CSS</span>
                <div class="skill-bar"><div class="skill-level" style="width: 90%;"></div></div>
            </div>
            <!-- 更多技能项 -->
        </section>

        <!-- 作品集 -->
        <section id="portfolio" class="content-section">
            <h2>作品集</h2>
            <div class="portfolio-grid">
                <div class="portfolio-item">项目一</div>
                <div class="portfolio-item">项目二</div>
                <!-- 更多项目 -->
            </div>
        </section>
    </div>

    <!-- 4. 页脚 -->
    <div id="footer">
        <div class="container">
            <p>© 2023 张三. 保留所有权利。</p>
            <a href="#" id="back-to-top">返回顶部</a>
        </div>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="js/main.js"></script>
</body>

实操心得 ：

  • id vs class ： id 具有唯一性，用于标识页面中唯一的元素（如 #header , #footer ）。 class 具有可复用性，用于定义一组具有相同样式的元素（如 .content-section , .portfolio-item ）。命名时尽量使用英文，且语义清晰。
  • 使用 <section> 等语义化标签 ：虽然我们强调DIV布局，但在HTML5中，像 <section> , <article> , <header> , <footer> , <nav> 这样的语义化标签能更好地描述内容结构。在上面的代码中，我在主体内容区使用了 <section> ，这比全部用DIV更佳。你可以理解为： DIV是万能的容器，而语义化标签是带有特定含义的专用容器 。在保证兼容性的前提下，合理使用语义化标签是加分项。
  • 容器 .container 模式 ：注意我在 #header 、 #hero 、 #main-content 、 #footer 内部都嵌套了一个 class="container" 的DIV。这是一个非常经典的实践，用于限制内容的最大宽度并使其居中，从而在大屏幕下保持内容不会过宽而难以阅读。

4. CSS样式设计：从零到精美的魔法

4.1 重置样式与基础设置

不同的浏览器对HTML元素有各自的默认样式（如 <body> 的边距、 <h1> 的字体大小）。为了确保我们的设计在所有浏览器中起点一致，第一步通常是进行“CSS重置”。 

/* css/reset.css 或 style.css 的开头部分 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 超级重要的属性！ */
}

body {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

.container {
    width: 100%;
    max-width: 1200px; /* 根据常见屏幕尺寸设定 */
    margin: 0 auto; /* 水平居中 */
    padding: 0 20px; /* 左右留出一些内边距，避免在窄屏上贴边 */
}

核心原理 ：

  • * { box-sizing: border-box; } ：这是现代CSS布局的 黄金法则 。它将元素的 width 和 height 属性设置为包含内容、内边距和边框的总和。这意味着当你设置一个DIV的 width: 300px; padding: 20px; 时，它的总宽度仍然是300px，内容区会自动缩小以适应。如果不设置 border-box ，总宽度会变成 300px + 20px*2 = 340px ，在复杂布局中极易导致错位。

4.2 实现经典布局：Flexbox vs Grid

如何让我们的DIV们按照设计图排列？这里介绍两种最强大的现代布局工具。

方案一：使用Flexbox实现导航栏和关于我区域 Flexbox擅长于一维布局（沿水平或垂直方向排列项目）。 

/* 导航栏：水平排列Logo和菜单 */
#header .container {
    display: flex; /* 启用Flex布局 */
    justify-content: space-between; /* 主轴（水平）对齐：两端对齐 */
    align-items: center; /* 交叉轴（垂直）对齐：居中对齐 */
    height: 70px;
}

#nav {
    display: flex; /* 将ul也变成flex容器，使其中的li水平排列 */
    list-style: none; /* 去掉列表默认的圆点 */
}

#nav li {
    margin-left: 30px; /* 菜单项之间的间距 */
}

#nav a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    transition: color 0.3s ease; /* 添加颜色过渡动画 */
}

#nav a:hover {
    color: #007bff; /* 鼠标悬停时变色 */
}

/* 关于我区域：左侧头像，右侧文字 */
.about-wrapper {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    gap: 40px; /* 子项之间的间隙，非常方便的属性 */
}

.avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%; /* 圆形头像 */
    object-fit: cover; /* 保证图片在容器内完整显示且不变形 */
}

方案二：使用CSS Grid实现作品集网格 Grid擅长于二维布局（同时处理行和列），非常适合画廊、卡片网格。 

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 核心魔法 */
    gap: 30px; /* 网格项之间的间隙 */
}

.portfolio-item {
    background: white;
    border-radius: 10px;
    overflow: hidden; /* 防止子元素（如图片）的圆角溢出 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-item:hover {
    transform: translateY(-10px); /* 悬停时向上轻微移动 */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 详解 ： 这是实现响应式网格的经典语句。它的意思是：尽可能多地创建列，每列的最小宽度是300px，最大是 1fr （等分剩余空间）。当容器宽度足够时，会排满300px宽的列；当宽度不足时，会自动减少列数；当宽度很大时，列会等分变宽，但不会小于300px。这比用媒体查询断点手动调整要灵活得多。

4.3 美化细节：字体、颜色与渐变

视觉吸引力来自细节。我们可以使用CSS变量来统一管理主题色，方便日后修改。 

:root {
    --primary-color: #007bff; /* 主色调 */
    --secondary-color: #6c757d; /* 次要色调 */
    --text-color: #333;
    --light-bg: #f8f9fa;
    --shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.highlight {
    color: var(--primary-color);
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 30px; /* 胶囊按钮 */
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
    background-color: #0056b3; /* 主色调的深色变体 */
    transform: scale(1.05); /* 悬停时轻微放大 */
}

CSS字体渐变效果 ： 为英雄区域的标题添加一个渐变色，能立刻提升视觉冲击力。 

#hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, var(--primary-color), #ff6b6b); /* 从左到右的渐变 */
    -webkit-background-clip: text; /* 关键属性：将背景裁剪到文字 */
    background-clip: text;
    color: transparent; /* 将文字颜色设为透明，以显示背景渐变 */
}

注意 ： background-clip: text 的浏览器支持度很好，但为了兼容旧版Webkit内核浏览器（如一些老版本的Safari），通常需要加上 -webkit- 前缀。

5. 交互功能实现与JavaScript点睛

5.1 平滑滚动与导航高亮

当用户点击导航栏的锚点链接（如 #about ）时，默认的跳转会非常生硬。我们可以用一小段JavaScript实现平滑滚动。同时，在滚动时，高亮显示当前所在区域的对应导航项，能极大提升用户体验。 

// js/main.js
document.addEventListener('DOMContentLoaded', function() {
    // 1. 平滑滚动
    const navLinks = document.querySelectorAll('#nav a[href^="#"]');
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault(); // 阻止默认的锚点跳转
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            if(targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 70, // 减去页头高度，避免被遮挡
                    behavior: 'smooth' // 关键！启用平滑滚动
                });
            }
        });
    });

    // 2. 滚动时高亮导航
    const sections = document.querySelectorAll('section[id]');
    function highlightNavOnScroll() {
        const scrollY = window.pageYOffset;
        sections.forEach(section => {
            const sectionHeight = section.offsetHeight;
            const sectionTop = section.offsetTop - 100; // 提前100px触发高亮
            const sectionId = section.getAttribute('id');
            const correspondingNavLink = document.querySelector(`#nav a[href="#${sectionId}"]`);

            if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
                correspondingNavLink.classList.add('active');
            } else {
                correspondingNavLink.classList.remove('active');
            }
        });
    }
    window.addEventListener('scroll', highlightNavOnScroll);
});

对应的CSS需要添加一个 .active 样式： 

#nav a.active {
    color: var(--primary-color);
    font-weight: bold;
}

5.2 “一键返回顶部”按钮实现

当页面较长时，提供一个返回顶部的按钮是贴心的设计。我们可以在页脚添加一个按钮，并控制其显示和隐藏。

首先，在HTML页脚部分添加按钮： 

<a href="#" id="back-to-top" title="回到顶部">↑</a>

然后，用CSS将其固定在右下角，并默认隐藏： 

#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
    font-size: 1.5rem;
    box-shadow: var(--shadow);
    opacity: 0; /* 默认透明 */
    visibility: hidden; /* 默认隐藏 */
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

最后，用JavaScript控制它的显示逻辑和点击事件： 

// 接上面的js/main.js
const backToTopButton = document.getElementById('back-to-top');

// 监听滚动事件
window.addEventListener('scroll', function() {
    // 当垂直滚动超过500像素时显示按钮
    if (window.pageYOffset > 500) {
        backToTopButton.classList.add('show');
    } else {
        backToTopButton.classList.remove('show');
    }
});

// 点击按钮返回顶部
backToTopButton.addEventListener('click', function(e) {
    e.preventDefault();
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});

实操心得 ：在实现交互功能时，务必考虑 渐进增强 。即确保在没有JavaScript的情况下，核心内容（如导航跳转到对应章节）依然可用（通过原生锚点）。我们添加的JS只是增强了体验（平滑滚动、高亮），而不是创造了功能。

6. 响应式设计：让网站在所有设备上完美呈现

6.1 理解视口与媒体查询

响应式设计的核心工具是CSS媒体查询。它允许我们根据设备的特性（如屏幕宽度）来应用不同的CSS样式。

我们之前设置的 <meta name="viewport"> 标签是这一切的前提。常见的断点（breakpoint）参考如下： 

/* 基础样式（移动设备优先） */

/* 平板设备及以上 (768px 及以上) */
@media (min-width: 768px) {
    .about-wrapper {
        flex-direction: row; /* 在平板上，关于我区域改为水平排列 */
    }
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr); /* 平板上显示2列 */
    }
}

/* 桌面设备及以上 (992px 及以上) */
@media (min-width: 992px) {
    #hero h1 {
        font-size: 4rem; /* 在大屏幕上使用更大的标题 */
    }
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr); /* 桌面上显示3列 */
    }
}

/* 大桌面设备 (1200px 及以上) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px; /* 可以调整最大宽度 */
    }
}

6.2 移动端导航栏改造

在手机等小屏幕设备上，水平导航栏会显得拥挤。一个常见的做法是将其折叠成一个“汉堡包”菜单。

首先，修改HTML的导航部分，添加汉堡包按钮： 

<div id="header">
    <div class="container">
        <div id="logo">张三</div>
        <button id="menu-toggle" aria-label="切换导航菜单">☰</button> <!-- 汉堡按钮 -->
        <ul id="nav">
            <!-- ... 导航项 ... -->
        </ul>
    </div>
</div>

然后，通过CSS控制其在移动端的显示： 

#menu-toggle {
    display: none; /* 默认在桌面端隐藏 */
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #333;
}

/* 移动端样式 */
@media (max-width: 767px) {
    #menu-toggle {
        display: block; /* 在移动端显示汉堡按钮 */
    }

    #nav {
        position: fixed;
        top: 70px; /* 位于页头下方 */
        left: 0;
        width: 100%;
        background-color: white;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        max-height: 0; /* 初始高度为0，隐藏 */
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    #nav.active { /* 当菜单被激活时 */
        max-height: 300px; /* 设置一个足够大的高度来显示所有项 */
        padding: 20px 0;
    }

    #nav li {
        margin: 15px 0; /* 垂直排列的间距 */
        margin-left: 0;
    }
}

最后，用JavaScript控制菜单的展开与收起： 

// 接上面的js/main.js
const menuToggle = document.getElementById('menu-toggle');
const nav = document.getElementById('nav');

menuToggle.addEventListener('click', function() {
    nav.classList.toggle('active');
    // 可选：点击菜单外区域关闭菜单
});

// 点击导航链接后，在移动端自动关闭菜单
navLinks.forEach(link => {
    link.addEventListener('click', function() {
        if (window.innerWidth <= 767) {
            nav.classList.remove('active');
        }
    });
});

7. 开发工具、调试与成品导出

7.1 工具选择：DW、VSCode还是在线编辑器？

  • Dreamweaver ：对于初学者，它的可视化设计视图（“设计”和“拆分”视图）非常友好，可以让你直观地看到代码变化如何影响布局，适合快速搭建静态页面原型。但注意不要过度依赖设计视图，理解生成的代码同样重要。
  • Visual Studio Code ：这是目前前端开发者的主流选择。它轻量、免费、插件生态极其丰富。安装 Live Server 插件后，可以启动一个本地服务器并实现保存后自动刷新浏览器，调试体验极佳。对于想深入学习开发的同学，强烈推荐从VSCode开始。
  • 在线编辑器 ：如CodePen、JSFiddle，适合做小型代码实验和分享片段，但不适合管理完整的项目文件。

我的建议 ：如果你是完成DW相关课程作业，可以先用DW熟悉流程。但从长远学习角度，尽快过渡到VSCode，并学会使用浏览器开发者工具（F12打开）进行调试，这才是真正的“硬技能”。

7.2 浏览器调试核心技巧

打开浏览器开发者工具（Chrome/Firefox/Edge均按F12）：

  • 元素检查 ：点击左上角箭头图标，然后点击页面元素，可以查看其对应的HTML和CSS，并可以实时修改，效果立即可见。这是调试布局和样式的神器。
  • 控制台 ：查看JavaScript错误和日志输出。如果交互功能失效，首先来这里看有没有报错（红色错误信息）。
  • 移动设备模拟 ：点击工具栏上的手机/平板图标，可以模拟不同设备的屏幕尺寸和触摸事件，是测试响应式设计不可或缺的工具。

7.3 项目整理与成品交付

完成所有开发后，你需要将项目整理成一个清晰的文件夹结构，方便自己管理或提交给老师。 

你的个人网站项目/
├── index.html          # 主页面文件
├── css/
│   ├── style.css       # 主样式文件
│   └── reset.css       # 重置样式文件（可选）
├── js/
│   └── main.js         # 主JavaScript文件
├── images/             # 存放所有图片（头像、项目截图等）
│   ├── avatar.jpg
│   └── project1.jpg
├── favicon.ico         # 网站图标
└── README.txt          # 项目说明文档（可选，可包含姓名、学号、简要介绍）

最终检查清单 ：

  1. [ ] 所有链接（CSS、JS、图片）路径是否正确？建议使用相对路径。
  2. [ ] 图片是否已优化？过大的图片会影响加载速度，可以使用在线工具压缩。
  3. [ ] 在不同的浏览器（Chrome、Firefox、Edge）和不同尺寸的设备上测试过吗？
  4. [ ] HTML代码通过W3C验证了吗？（可访问 validator.w3.org 检查）
  5. [ ] 是否清除了调试用的 console.log 语句和无效注释？

将整个文件夹压缩成ZIP包（如 zhangsan_personal_website.zip ），这就是你的“成品”，可以用于提交作业或部署到任何静态网站托管服务（如GitHub Pages, Vercel, Netlify）上，让全世界都能访问。

整个过程从一行 <!DOCTYPE html> 开始，到拥有一个功能完整、响应式的个人网站，你不仅完成了一个作品，更走通了一个前端开发者最基础的构建流程。记住，代码是写给人看的，清晰的结构和注释、语义化的命名、合理的样式组织，这些习惯的价值远大于某个炫酷特效的实现。

Logo
亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

avatar 亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

avatar 亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责

avatar 亚马逊云科技技术品牌专区