108 lines
3.7 KiB
HTML
108 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<!--
|
|
这是一个复杂的HTML测试文件
|
|
包含多层嵌套注释和复杂缩进结构
|
|
用于测试文件修改工具的准确性
|
|
-->
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>复杂结构测试页面</title>
|
|
<style>
|
|
/* 主要容器样式 - 第一层注释 */
|
|
.main-container {
|
|
/* 内部注释：设置最大宽度 */
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #ffffff;
|
|
/* 边框圆角设置 */
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* 修改后的导航栏样式 - 更新版本 */
|
|
.navbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 40px;
|
|
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
|
|
/* 更新为红色渐变主题 */
|
|
border-radius: 12px;
|
|
margin-bottom: 40px;
|
|
box-shadow: 0 6px 20px rgba(238, 90, 36, 0.3);
|
|
}
|
|
|
|
.navbar .nav-item {
|
|
/* 更新后的导航项样式 - 增强版本 */
|
|
color: white;
|
|
text-decoration: none;
|
|
padding: 12px 20px;
|
|
margin: 0 8px;
|
|
border-radius: 25px;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
font-weight: 500;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.navbar .nav-item:hover {
|
|
/* 悬停效果注释 */
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 主体内容区域 -->
|
|
<div class="main-container">
|
|
<!-- 导航栏开始 -->
|
|
<nav class="navbar">
|
|
<!-- 左侧导航项 -->
|
|
<div class="nav-left">
|
|
<a href="#" class="nav-item">首页</a>
|
|
<a href="#" class="nav-item">产品</a>
|
|
<a href="#" class="nav-item">服务</a>
|
|
</div>
|
|
<!-- 右侧导航项 -->
|
|
<div class="nav-right">
|
|
<a href="#" class="nav-item">关于我们</a>
|
|
<a href="#" class="nav-item">联系方式</a>
|
|
</div>
|
|
</nav>
|
|
<!-- 导航栏结束 -->
|
|
|
|
<!-- 内容区域 -->
|
|
<main class="content-area">
|
|
<!-- 标题部分 -->
|
|
<header class="content-header">
|
|
<h1 class="main-title">这是主要标题文本</h1>
|
|
<p class="subtitle">这是副标题文本内容</p>
|
|
</header>
|
|
|
|
<!-- 段落内容 -->
|
|
<section class="content-body">
|
|
<p class="text-paragraph">这是第一段测试内容，包含复杂的缩进结构。</p>
|
|
<p class="text-paragraph">这是第二段测试内容，用于验证修改准确性。</p>
|
|
<div class="nested-container">
|
|
<!-- 嵌套容器注释 -->
|
|
<p class="nested-text">这是嵌套容器内的文本内容。</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!--
|
|
更新后的页面底部注释
|
|
包含版权信息和联系方式
|
|
修改功能测试完成
|
|
-->
|
|
<footer class="page-footer">
|
|
<p>© 2024 修改测试页面. 版权所有.</p>
|
|
<p>文件修改工具测试成功！</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
|