/* 页面统一格式化 */
html {
font-family: 'Helvetica neue', Arial, 'sans serif';
font-size: 10px;
background-color: #ccc;
}
* {
margin: 0;
}
/* 名片基础样式 */
.card {
width: 35em;
height: 22em;
margin: 5em auto;
background-color: red;
border: 0.2em solid black;
border-radius: 1.5em;
}
/* 头部尾部背景和圆角 */
.card footer {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
border-radius: 0 0 1.5em 1.5em;
}
.card header {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
border-radius: 1.5em 1.5em 0 0;
}
/* 内容区域背景/图片样式 */
.card article {
height: 120px;
background: rgb(1 1 1 / 0.3);
color: white;
}
.card article img {
max-height: 100%;
float: right;
}
/* 文字样式 */
.card h2 {
font-size: 2em;
}
.card footer p {
font-size: 1.5em;
}
.card h2,
.card p {
padding: 15px;
}
.card header,
.card footer {
height: 50px;
;
}
/* 要与选择器匹配的规则集 */<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Fundamental CSS comprehension</title>
<link rel="stylesheet" href="style-resources.css">
</head>
<body>
<section class="card">
<header>
<h2>Chris Mills</h2>
</header>
<article>
<img src="chris.jpg" alt="A picture of Chris - a man with glasses, a beard, and a silly wooly hat">
<p>50 My Street<br>
The Town<br>
Gray Peach<br>
UK<br>
ZO50 1MU<br>
<strong>Tel</strong>: 01234 567 890<br>
<strong>Mail</strong>: chris@nothere.com
</p>
</article>
<footer>
<p>Editing, writing, and web development services</p>
</footer>
</section>
</body>
</html>