HTML CSS制作
HTML与CSS基础结构
HTML用于定义网页内容结构，CSS负责样式设计。基础HTML文档需包含<!DOCTYPE html>声明、<html>根元素、<head>（存放元信息和CSS链接）和<body>（页面内容）。CSS可通过内联、内部或外部文件引入。
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>段落内容。</p>
</body>
</html>CSS选择器与样式规则
CSS通过选择器定位HTML元素并设置样式。常见选择器包括标签名（如p）、类（.class）、ID（#id）和伪类（如:hover）。样式属性需写在{}内，多属性用分号分隔。
/* 标签选择器 */
p {
color: blue;
font-size: 16px;
}
/* 类选择器 */
.highlight {
background-color: yellow;
}
/* ID选择器 */
#header {
border: 1px solid black;
}盒模型与布局
CSS盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。通过display属性控制元素布局方式（如block、inline、flex）。Flexbox和Grid是现代响应式布局的核心工具。
.box {
width: 200px;
padding: 20px;
border: 2px solid #333;
margin: 10px;
display: flex;
justify-content: center;
}响应式设计
使用媒体查询（@media）适配不同屏幕尺寸。设定断点（如max-width: 768px）调整布局或样式。
@media (max-width: 768px) {
.box {
width: 100%;
flex-direction: column;
}
}动画与过渡
CSS支持通过transition平滑过渡属性变化，或通过@keyframes创建复杂动画。
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ff0000;
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.slide-element {
animation: slide 2s infinite;
}
