前端css制作网页
使用CSS制作网页的基础方法
CSS（层叠样式表）用于控制网页的布局和样式。通过CSS可以实现颜色、字体、间距、响应式设计等效果。
基础语法结构 选择器用于指定样式应用的元素，属性和值定义样式规则。
选择器 {
属性: 值;
}常用选择器类型
- 元素选择器：
p { color: blue; } - 类选择器：
.classname { font-size: 16px; } - ID选择器：
#idname { background: #fff; } - 伪类选择器：
a:hover { text-decoration: underline; }
布局与盒模型
CSS盒模型是布局的基础，包含内容(content)、内边距(padding)、边框(border)和外边距(margin)。
常用布局属性
.box {
width: 300px;
height: 200px;
padding: 20px;
border: 1px solid #000;
margin: 10px;
}Flexbox布局 Flexbox适合一维布局，通过容器和项目属性控制排列方式。
.container {
display: flex;
justify-content: center;
align-items: center;
}响应式设计
媒体查询是实现响应式设计的关键，根据不同屏幕尺寸应用不同样式。
媒体查询示例
@media (max-width: 768px) {
body {
font-size: 14px;
}
}视口单位 使用vw/vh单位实现相对于视口的尺寸调整。
.header {
height: 10vh;
width: 100vw;
}动画与过渡效果
CSS支持动画和过渡效果，增强用户体验。
过渡效果
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #f00;
}关键帧动画
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.element {
animation: slide 2s infinite;
}预处理器与框架
CSS预处理器如Sass/Less提供变量、嵌套等功能，框架如Bootstrap提供现成的组件。
Sass变量示例
$primary-color: #333;
body {
color: $primary-color;
}Bootstrap栅格系统
<div class="container">
<div class="row">
<div class="col-md-6">左栏</div>
<div class="col-md-6">右栏</div>
</div>
</div>
