HTML结构解析
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS基础练习</title><style>body {font-family: 'Microsoft YaHei', sans-serif;background-color: #f0f2f5;margin: 0;padding: 25px;line-height: 1.7;}.container {background-color: white;border-radius: 10px;box-shadow: 0 3px 10px rgba(0,0,0,0.15);padding: 30px;margin: 0 auto 30px;max-width: 700px;}.page-title {color: #2c3e50;text-align: center;margin-bottom: 35px;border-bottom: 2px solid #3498db;padding-bottom: 10px;}.demo-img {border-radius: 6px;margin: 15px 0;transition: transform 0.4s ease;}.demo-img:hover {transform: scale(1.02);}.form-group {margin-bottom: 20px;}label {display: block;margin-bottom: 8px;color: #34495e;font-weight: 500;}input, select {width: 100%;padding: 10px;border: 1px solid #bdc3c7;border-radius: 4px;box-sizing: border-box;transition: border-color 0.3s;}input:focus, select:focus {border-color: #3498db;outline: none;box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);}.action-btn {background-color: #2ecc71;color: white;border: none;padding: 12px 24px;border-radius: 5px;cursor: pointer;font-size: 16px;transition: all 0.3s;}.action-btn:hover {background-color: #27ae60;}.action-btn:active {transform: scale(0.98);}.feature-list {list-style-type: none;padding: 0;}.feature-list li {background-color: #f8f9fa;padding: 12px 15px;margin-bottom: 10px;border-left: 4px solid #3498db;border-radius: 0 4px 4px 0;}.feature-list li:hover {background-color: #ecf0f1;}</style>
</head>
<body><div class="container"><h1 class="page-title">CSS交互效果练习</h1><h2>图片缩放效果</h2><p>鼠标悬停在图片上会有轻微放大效果：</p><img src="https://via.placeholder.com/600x300" alt="演示图片" class="demo-img"><h2>表单元素</h2><form><div class="form-group"><label for="username">用户名</label><input type="text" id="username" placeholder="请输入用户名"></div><div class="form-group"><label for="gender">性别</label><select id="gender"><option value="">请选择</option><option value="male">男</option><option value="female">女</option></select></div><button type="submit" class="action-btn">提交信息</button></form><h2>CSS特性列表</h2><ul class="feature-list"><li>过渡动画（transition）</li><li>表单聚焦效果（:focus）</li><li>元素变换（transform）</li><li>盒子模型（box-sizing）</li></ul></div>
</body>
</html>结构解析
1. 文档基础结构
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS基础练习</title><style>/* 样式内容 */</style>
</head>
<body><!-- 页面内容 -->
</body>
</html><!DOCTYPE html>：声明为 HTML5 文档<html lang="zh-CN">：根元素，指定页面语言为中文<meta charset="UTF-8">：设置字符编码，确保中文正常显示<meta name="viewport">：实现响应式设计，使页面在移动设备上正确显示<title>：设置浏览器标签页标题<style>：内嵌 CSS 样式，用于定义页面元素的显示效果
2. 页面内容结构
<div class="container"><h1 class="page-title">CSS基础练习</h1><h2>图片缩放效果</h2><img src="..." class="demo-img"><h2>表单元素</h2><form><div class="form-group"><label>...</label><input type="text"></div><button class="action-btn">提交信息</button></form><h2>CSS特性列表</h2><ul class="feature-list"><li>...</li></ul>
</div><div class="container">：页面主容器，用于统一管理页面内容的布局<h1 class="page-title">：页面主标题，应用了自定义标题样式<img class="demo-img">：示例图片，添加了悬停缩放效果<form>：表单容器，包含输入框、下拉选择器和提交按钮<ul class="feature-list">：特性列表，使用自定义列表样式
3. CSS 样式解析
基础选择器：
- 标签选择器（如
body、label）：统一设置同类型元素的样式 - 类选择器（如
.container、.action-btn）：为特定元素应用自定义样式
- 标签选择器（如
交互效果：
:hover伪类：实现鼠标悬停时的样式变化（如按钮颜色变化、图片缩放）:focus伪类：定义表单元素获得焦点时的样式（如输入框边框高亮）:active伪类：设置元素被点击时的效果（如按钮缩放）
过渡动画：
- 使用
transition属性实现平滑的样式变化（如按钮颜色渐变、图片缩放动画）
- 使用
布局与盒模型：
- 通过
box-sizing: border-box确保元素尺寸计算方式一致 - 使用
margin和padding调整元素间距 - 通过
border-radius实现圆角效果 - 使用
box-shadow添加阴影，增强页面层次感
- 通过