HTML/CSS网站仿制求助：无经验需快速修复代码并替换图片

嘿，我帮你排查了这段代码里的几个关键问题，都是新手容易踩的坑，现在把修复后的完整代码给你，顺便解释下哪里改了：

原代码的核心问题 #

• CSS媒体查询语法错误：你写的(min-width: 380px) { ... }缺少了@media前缀，浏览器根本识别不了这个响应式规则
• HTML标签未闭合：<body>、<h3>这些标签都没写闭合标签，会导致页面结构混乱
• Bootstrap布局类使用不当：比如在同一个列里同时用col-sm和col-md-4的写法不符合规范，还有col-md-12放在已经有列的row里会超出容器范围
• 缺少Bootstrap依赖：你用了container、row、col-*这些Bootstrap的布局类，但没引入Bootstrap的CSS文件，这些类根本不会生效

修复后的完整代码 #

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerência de Governança de TI</title>
    <!-- 引入Bootstrap CSS，确保布局类生效 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        img {
            margin: 0px 100px 100px 80px;
        }
        /* 修复媒体查询语法 */
        @media (min-width: 380px) {
            .container {
                width: 100%;
                margin: 0;
                padding: 0;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航/标题栏 -->
    <div class="container" id="c1">
        <div class="row align-items-center"> <!-- 添加align-items-center让内容垂直居中 -->
            <div class="col-md-4">
                <img src="../Site/logo.png" alt="Logo da Gerência de TI"> <!-- 添加alt文本，提升可访问性 -->
            </div>
            <div class="col-md-4 text-center"> <!-- 添加text-center让文本居中 -->
                <h2>Gerência de Tecnologia de Informação</h2> <!-- 用h2替代普通文本，语义更清晰 -->
            </div>
            <div class="col-md-4">
                <!-- 这里可以放右侧内容，比如登录按钮或联系方式 -->
            </div>
        </div>
    </div>

    <!-- 响应式容器修复 -->
    <div class="container" id="c2">
        <div class="row">
            <div class="col-12"> <!-- 用col-12替代错误的col-md-12嵌套 -->
                <h5 id="demo"></h5>
            </div>
        </div>
    </div>

    <!-- 主标题区域 -->
    <div class="container-fluid text-center my-4"> <!-- 添加my-4增加上下间距 -->
        <h1>Aço especial também é feito com informação !</h1>
        <div class="row mt-4">
            <div class="col-md-6 offset-md-3"> <!-- 用offset-md-3让列居中 -->
                <h3>A Gerência de Tecnologia de Informação</h3> <!-- 补全h3的内容并闭合标签 -->
            </div>
        </div>
    </div>

    <!-- 可选：引入Bootstrap JS（如果需要用到交互组件） -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关键修复说明 #

• 添加Bootstrap依赖：在<head>里引入了Bootstrap的CSS文件，这样container、row、col-*这些布局类才能正常工作
• 修复媒体查询：给响应式规则加上了@media前缀，现在浏览器能正确识别这个规则
• 闭合所有HTML标签：补全了<body>、<h3>等标签的闭合，避免页面结构错乱
• 优化布局类：调整了列的写法，用col-md-4单独定义响应式宽度，添加text-center、align-items-center等类优化排版，用offset-md-3让内容居中
• 提升可访问性：给图片添加了alt文本，用语义化的标题标签（h2、h3）替代普通文本

你只需要把../Site/logo.png替换成你自己的图片路径，就可以快速搭建出符合需求的页面啦！

内容的提问来源于stack exchange，提问作者Ruan Ferreira