挑战：样式化个人简介页面
在本挑战中，您将样式化一个简单的个人简介页面，测试您在过去几课中学到的技能，包括编写选择器、设置背景颜色和文本样式。我们还将鼓励您查找一些我们尚未涵盖的基本 CSS 功能，以测试您的研究技能。
起始点
开始之前，请点击下方代码面板中的“运行”按钮，在 MDN Playground 中打开提供的示例。然后，您将按照后续各节中的说明对页面进行适当的样式化。
html
<h1>Jane Doe</h1>
<div class="job-title">Web Developer</div>
<p>
Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
right at the coast of the Semantics, a large language ocean.
</p>
<p>
A small river named Duden flows by their place and supplies it with the
necessary regelialia. It is a paradisematic country, in which roasted parts of
sentences fly into your mouth.
</p>
<h2>Contact information</h2>
<ul>
<li>Email: <a href="mailto:jane@example.com">jane@example.com</a></li>
<li>Web: <a href="http://example.com">http://example.com</a></li>
<li>Tel: <a href="tel:12345678">123 45678</a></li>
</ul>
css
html {
background-color: white;
}
body {
font: 1.2em / 1.5 system-ui;
}
项目简介
按照下面的说明为个人简介页面添加样式。尝试在 MDN CSS 参考 中查找您需要的功能。
框体样式
- 为
<body>元素设置所有边距为20px，宽度为500px。 - 为
<body>元素设置背景颜色为#efefef（一种浅灰色<hex-color>值）。 - 通过将上下边距设置为
0，左右边距设置为auto，将<body>元素居中放置在视口内。 - 为用于联系方式的
<ul>设置白色背景颜色，以及 5px 实心紫色边框。为<ul>设置所有边距为30px，将内容推离边框。 - 为
<ul>设置20px的圆角。
文本样式
- 将一级标题设置为暗灰色，使用 CSS 颜色关键字
darkslategray，并为标题设置10px的虚线下边框，使用 CSS 颜色关键字purple。 - 将二级标题设置为斜体。
- 为一级标题设置
2rem的字体大小，为二级标题设置1.5rem的字体大小。 - 使用类选择器选中
<div>，并设置其颜色为darkslategray，字体粗细为粗体。 - 将链接设置为
green。 - 当鼠标指针悬停或通过键盘聚焦链接时，将链接设置为
darkgreen（您需要为此使用几个伪类）。 - 在鼠标悬停或聚焦链接时，移除链接下划线。
提示和技巧
- 使用 W3C CSS Validator 来捕捉 CSS 中可能被忽略的意外错误，以便您进行修复。
- 尝试查找一些更高级的 CSS 功能（同样，MDN CSS 参考在此会很有帮助），并为您的解决方案添加更多样式。大胆尝试！
- 请记住，在这个学习阶段没有错误答案——您可以尽情玩乐。
示例
您完成的示例应该看起来像这样
点击此处显示解决方案
应用于最终实时示例的 CSS 如下所示
css
html {
background-color: white;
}
body {
font: 1.2em / 1.5 system-ui;
padding: 20px;
width: 500px;
background-color: #efefef;
margin: 0 auto;
}
h1 {
color: darkslategray;
border-bottom: 10px dotted purple;
font-size: 2rem;
}
h2 {
font-style: italic;
font-size: 1.5rem;
}
.job-title {
color: darkslategray;
font-weight: bold;
}
ul {
background-color: white;
border: 5px solid purple;
padding: 30px;
border-radius: 20px;
}
a {
color: green;
}
a:hover,
a:focus {
color: darkgreen;
text-decoration: none;
}
我们用于解决此挑战的 CSS 属性如下 — 每个属性都链接到 MDN 上的属性页面，其中提供了更多使用示例。
background-colorborder或相关的长属性。colorfont-sizefont-stylefont-weightmargin或相关的长属性。padding或相关的长属性。text-decorationwidth