html
复制代码
<!DOCTYPE html>
<html>
<head>
<style>
/* 表格样式 */
table.css-properties {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-family: 'Segoe UI', Tahoma, sans-serif;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* 表头样式 */
table.css-properties th {
background: #3498db;
color: white;
text-align: left;
padding: 12px 15px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
/* 单元格样式 */
table.css-properties td {
padding: 10px 15px;
border-bottom: 1px solid #e0e0e0;
vertical-align: top;
}
/* 偶数行背景色 */
table.css-properties tr:nth-child(even) {
background: #f8f9fa;
}
/* 鼠标悬停时的样式*/
table.css-properties tr:hover {
background: #fae5ee;
}
/* 代码样式 */
.code {
font-family: 'Courier New', monospace;
background: #f5f5f5;
padding: 2px 4px;
border-radius: 3px;
color: #c7254e;
}
</style>
</head>
<body>
<table class="css-properties">
<thead>
<tr>
<th>属性类别</th>
<th>属性</th>
<th>描述</th>
<th>示例值</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="6">字体属性</td>
<td><span class="code">font-family</span></td>
<td>设置字体系列</td>
<td><span class="code">"Arial", sans-serif</span></td>
</tr>
<tr>
<td><span class="code">font-size</span></td>
<td>设置字体大小</td>
<td><span class="code">16px</span>, <span class="code">1.2em</span></td>
</tr>
<tr>
<td><span class="code">font-weight</span></td>
<td>设置字体粗细</td>
<td><span class="code">bold</span>, <span class="code">700</span></td>
</tr>
<tr>
<td><span class="code">font-style</span></td>
<td>设置字体样式</td>
<td><span class="code">italic</span></td>
</tr>
<tr>
<td><span class="code">font-variant</span></td>
<td>小型大写字母</td>
<td><span class="code">small-caps</span></td>
</tr>
<tr>
<td><span class="code">line-height</span></td>
<td>设置行高</td>
<td><span class="code">1.5</span></td>
</tr>
</tbody>
</table>
</body>
</html>
html
复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景与字体属性综合案例</title>
<style>
/* 基础重置与全局字体设置 */
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: #333;
}
/* 全屏英雄区域 - 背景图与字体组合 */
.hero {
height: 100vh;
background:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
url('https://images.unsplash.com/photo-1518655048521-f130df041f66?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 20px;
color: white;
}
.hero h1 {
font-size: 4rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
letter-spacing: 2px;
font-family: 'Playfair Display', serif;
}
.hero p {
font-size: 1.5rem;
max-width: 800px;
margin-bottom: 40px;
font-weight: 300;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}
/* 内容区块 - 渐变背景与字体对比 */
.content-block {
padding: 80px 20px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.content-block h2 {
font-size: 2.5rem;
color: #2c3e50;
font-weight: 600;
margin-bottom: 30px;
text-align: center;
font-family: 'Montserrat', sans-serif;
}
.content-block p {
font-size: 1.1rem;
max-width: 800px;
margin: 0 auto 30px;
color: #34495e;
line-height: 1.8;
}
/* 特色卡片 - 背景图案与字体组合 */
.features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
padding: 50px 20px;
background-color: #fff;
background-image:
radial-gradient(circle at 10% 20%, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.02) 90%),
radial-gradient(circle at 90% 80%, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.02) 90%);
}
.feature-card {
flex: 1 1 300px;
max-width: 350px;
padding: 40px 30px;
border-radius: 10px;
background: white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
}
.feature-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
background: #3498db;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
font-weight: bold;
}
.feature-card h3 {
font-size: 1.5rem;
color: #2c3e50;
margin-bottom: 15px;
font-weight: 600;
}
.feature-card p {
color: #7f8c8d;
font-size: 1rem;
line-height: 1.7;
}
/* 引用区块 - 背景纹理与特殊字体 */
.quote-section {
padding: 100px 20px;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" opacity="0.05"><path d="M30,20 Q50,0 70,20 T90,50 Q70,80 50,100 T10,50 Q30,20 50,0 Z"/></svg>'),
linear-gradient(to right, #ff758c, #ff7eb3);
background-size: 150px, cover;
color: white;
text-align: center;
}
/* 引用样式 */
.quote {
max-width: 800px;
margin: 0 auto;
font-size: 1.8rem;
font-weight: 300;
font-style: italic;
line-height: 1.6;
font-family: 'Georgia', serif;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
/* */
.quote-author {
margin-top: 30px;
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 1px;
}
/* 响应式调整 */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.2rem;
}
.content-block h2 {
font-size: 2rem;
}
.quote {
font-size: 1.4rem;
}
}
</style>
</head>
<body>
<!-- 英雄区域 -->
<section class="hero">
<h1>探索设计的无限可能</h1>
<p>通过精心设计的背景与字体组合，创造令人难忘的视觉体验</p>
</section>
<!-- 内容区块 -->
<section class="content-block">
<h2>背景与字体的完美结合</h2>
<p>在网页设计中，背景属性与字体属性的巧妙搭配能够创造出独特的视觉效果。通过使用渐变、图片背景与精心选择的字体，我们可以引导用户的注意力，传达品牌个性，并提升整体的用户体验。</p>
<p>从全屏英雄区域的震撼效果，到微妙的内容区块渐变背景，再到精致的卡片设计，每一个元素都经过精心调校，确保视觉上的和谐与功能上的实用性。</p>
</section>
<!-- 特色卡片 -->
<section class="features">
<div class="feature-card">
<div class="feature-icon">1</div>
<h3>背景渐变</h3>
<p>使用CSS线性渐变和径向渐变创建平滑的色彩过渡，为设计增添深度和维度。</p>
</div>
<div class="feature-card">
<div class="feature-icon">2</div>
<h3>字体层次</h3>
<p>通过字体大小、粗细和字体的组合，建立清晰的视觉层次结构，引导用户浏览内容。</p>
</div>
<div class="feature-card">
<div class="feature-icon">3</div>
<h3>响应式设计</h3>
<p>确保在不同设备上都能保持背景与字体的完美比例和可读性。</p>
</div>
</section>
<!-- 引用区块 -->
<section class="quote-section">
<blockquote class="quote">
"好的设计是显而易见的，而伟大的设计是透明的。背景与字体的和谐搭配应该让内容自然呈现，而不是分散注意力。"
</blockquote>
<div class="quote-author">--- 用户体验设计师</div>
</section>
</body>
</html>
2、案例中重点应用的背景与字体属性