css与html制作
CSS与HTML制作基础
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页的核心技术。HTML负责内容结构，CSS负责样式设计。
HTML基础结构
一个基本的HTML文档结构如下：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>CSS基础语法
CSS通过选择器为HTML元素添加样式：
h1 {
color: blue;
font-size: 24px;
}
p {
color: green;
text-align: center;
}布局与定位
盒模型
CSS盒模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成：
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}Flexbox布局
Flexbox是一种现代布局方式，适合构建一维布局：
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
}Grid布局
CSS Grid适合构建二维布局：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
.grid-item {
background-color: #f0f0f0;
}响应式设计
媒体查询
媒体查询允许根据设备特性应用不同样式：
@media (max-width: 600px) {
body {
background-color: lightblue;
}
.menu {
display: none;
}
}视口单位
使用视口单位创建响应式尺寸：
.header {
height: 100vh;
width: 100vw;
}
.text {
font-size: 4vw;
}动画与过渡
CSS过渡
创建平滑的状态变化：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ff9900;
}CSS动画
定义关键帧动画：
@keyframes slidein {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.slide {
animation: slidein 1s forwards;
}实用技巧
变量
使用CSS变量实现主题切换：
:root {
--primary-color: #4285f4;
--secondary-color: #34a853;
}
.button {
background-color: var(--primary-color);
}伪类与伪元素
利用伪类和伪元素增强交互：
a:hover {
text-decoration: underline;
}
p::first-letter {
font-size: 150%;
}现代CSS特性
使用现代CSS简化代码：
.card {
aspect-ratio: 16/9;
object-fit: cover;
backdrop-filter: blur(5px);
}
