前端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>