当前位置：首页 > CSS

制作css页面教程

2026-04-01 21:49:26CSS

CSS页面制作基础

使用HTML和CSS创建网页需要掌握基础结构和样式规则。HTML负责页面结构，CSS控制视觉呈现。

新建HTML文件并添加基础结构：

<!DOCTYPE html>
<html>
<head>
    <title>我的页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>欢迎标题</h1>
    </header>
    <main>
        <p>这里是主要内容</p>
    </main>
    <footer>
        <p>版权信息</p>
    </footer>
</body>
</html>

创建CSS样式文件

在同目录下创建styles.css文件，添加基本样式规则：

制作css页面教程

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #333;
}

header {
    background: #35424a;
    color: white;
    padding: 20px;
    text-align: center;
}

main {
    padding: 20px;
}

footer {
    background: #35424a;
    color: white;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

响应式布局设计

使用媒体查询实现不同屏幕尺寸适配：

@media (max-width: 768px) {
    header h1 {
        font-size: 24px;
    }

    main {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 20px;
    }

    body {
        font-size: 14px;
    }
}

常用CSS属性应用

掌握核心样式属性：

制作css页面教程

/* 盒模型 */
.box {
    width: 300px;
    padding: 20px;
    border: 1px solid #ddd;
    margin: 10px auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 弹性布局 */
.flex-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* 过渡效果 */
.button {
    background: #4CAF50;
    transition: background 0.3s ease;
}
.button:hover {
    background: #45a049;
}

CSS预处理器使用

Sass/Less等预处理器可提升开发效率：

$primary-color: #3498db;

.container {
    width: 80%;
    margin: 0 auto;

    .box {
        padding: 20px;
        background: lighten($primary-color, 40%);

        &:hover {
            background: lighten($primary-color, 30%);
        }
    }
}

@mixin border-radius($radius) {
    border-radius: $radius;
    -webkit-border-radius: $radius;
}

.card {
    @include border-radius(5px);
}

浏览器兼容性处理

处理不同浏览器渲染差异：

/* 前缀处理 */
.transform {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 重置默认样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}