我正在 freeCodeCamp 上应对一些挑战。具体来说，挑战是针对您选择的主题制作一个简短的“致敬页面”。我一直在 CodePen 工作，但已经开始使用 Brackets，因为它看起来更加用户友好。
我的问题是我的 CSS 样式在我的独立 html 文件中没有做任何事情，而在 CodePen 中它可以工作。我确定我在某个地方犯了一个愚蠢的错误。 想法？感谢您的任何建议/帮助!
代码:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron" style="margin-top:20px" >
<h1 style="color: black" class="text-center">Gord Downie</h1>
<div class="row center">
<img src="http://i.huffpost.com/gen/4541188/thumbs/o-GORD-DOWNIE-TRAGICALLY-HIP-570.jpg?5" class="center">
</div>
<p class="caption text-center"> "He Who Walks Among The Stars" </p>
<p class="text-center"> Gord Downie is a Canadian musician, most well known for his role as the lead singer of the Tragically Hip. More recently in his career, he has also been a spokesperson for the welfare of First Nations communities across Canada. Since 2016, Gord has been battling incurable brain cancer, but has been able to continue writing and performing. As a true artist, Gord has never let fame change him, always maintaining his focus on his music and philanthropy.</p>
<div class="text-center">
<h3 class="text-center"> <strong>Musical Works </strong></h3>
<h5>As a member of the Tragically Hip:</h5>
<ul class="text-center">
<li>The Tragically Hip (Self-Titled) - <em>1987</em></li>
<li>Up To Here - <em>1989</em></li>
<li>Road Apples - <em>1991</em></li>
<li>Fully Completely - <em>1992</em></li>
<li>Day for Night - <em>1994</em></li>
<li>Trouble at the Henhouse - <em>1996</em></li>
<li>Phantom Power - <em>1998</em></li>
<li>Music @ Work - <em>2000</em></li>
<li>In Violet Light - <em>2002</em></li>
<li>In Between Evolution - <em>2004</em></li>
<li>World Container - <em>2006</em></li>
<li>We Are the Same - <em>2009</em></li>
<li>Now for Plan A - <em>2012</em></li>
</ul>
<h5>Solo Work</h5>
<ul>
<li>Coke Machine Glow - <em>2001</em></li>
<li>Battle of the Nudes - <em>2003</em></li>
<li>The Grand Bounce - <em>2010</em></li>
<li>Secret Path - <em>2016</em></li>
</ul>
</div>
</body>
</html>最佳答案
看起来您正在使用 Bootstrap 类，因此您需要将 Bootstrap 样式表添加到您的页面。您可以使用我放在 HTML 中的这个 CDN 链接，或者您可以下载文件并将它们上传到您的站点/元素 https://getbootstrap.com/ .
Bootstrap 很可能融入了您的 codepen 元素，但 bootstrap 不是 HTML 或 CSS 的基本组成部分，因此如果您想在自定义元素中使用它，则必须包含它。您还希望在您自己的任何样式之前包含 Bootstrap 样式表，以便应用基本 Bootstrap 样式，然后您可以根据需要使用随后加载的样式覆盖特定样式表， Bootstrap 不会干扰。
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.center {
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron" style="margin-top:20px" >
<h1 style="color: black" class="text-center">Gord Downie</h1>
<div class="row center">
<img src="http://i.huffpost.com/gen/4541188/thumbs/o-GORD-DOWNIE-TRAGICALLY-HIP-570.jpg?5" class="center">
</div>
<p class="caption text-center"> "He Who Walks Among The Stars" </p>
<p class="text-center"> Gord Downie is a Canadian musician, most well known for his role as the lead singer of the Tragically Hip. More recently in his career, he has also been a spokesperson for the welfare of First Nations communities across Canada. Since 2016, Gord has been battling incurable brain cancer, but has been able to continue writing and performing. As a true artist, Gord has never let fame change him, always maintaining his focus on his music and philanthropy.</p>
<div class="text-center">
<h3 class="text-center"> <strong>Musical Works </strong></h3>
<h5>As a member of the Tragically Hip:</h5>
<ul class="text-center">
<li>The Tragically Hip (Self-Titled) - <em>1987</em></li>
<li>Up To Here - <em>1989</em></li>
<li>Road Apples - <em>1991</em></li>
<li>Fully Completely - <em>1992</em></li>
<li>Day for Night - <em>1994</em></li>
<li>Trouble at the Henhouse - <em>1996</em></li>
<li>Phantom Power - <em>1998</em></li>
<li>Music @ Work - <em>2000</em></li>
<li>In Violet Light - <em>2002</em></li>
<li>In Between Evolution - <em>2004</em></li>
<li>World Container - <em>2006</em></li>
<li>We Are the Same - <em>2009</em></li>
<li>Now for Plan A - <em>2012</em></li>
</ul>
<h5>Solo Work</h5>
<ul>
<li>Coke Machine Glow - <em>2001</em></li>
<li>Battle of the Nudes - <em>2003</em></li>
<li>The Grand Bounce - <em>2010</em></li>
<li>Secret Path - <em>2016</em></li>
</ul>
</div>
</body>
</html>关于html - CSS 样式似乎没有任何效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44523765/