深洋红色网页设计创意方案

CSS 示例代码

/* 定义深洋红色 */
:root {
    --dark-magenta: #8B008B;
}
body {
    background-color: var(--dark-magenta);
    color: white; /* 确保文字清晰可见 */
}

/* 互补配色的应用 */
.complementary-section {
    background-color: #8B008B;
    color: #008B8B;
}
.complementary-section h1 {
    color: #008B8B;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 类比配色的应用 */
.analogous-section {
    background-color: #8B008B;
    border: 5px solid #800080;
    color: #4B0082;
}
.analogous-section p {
    font-family: 'Georgia', serif;
    font-size: 1.2em;
}

/* 渐变效果的应用 */
.gradient-section {
    background: linear-gradient(135deg, #8B008B, #4B0082);
    color: white;
}
.gradient-section a {
    color: #FFD700; /* 使用金色链接，增加亮点 */
    text-decoration: none;
}