Question

我正在尝试使用页面左侧的导航按钮显示此网页。我的网页在之前的作业中运行得很好但是因为我现在更新了我的css表，所以页面显示所有搞砸了。任何帮助都是极好的！

＆＃13;

* {
  box-sizing: border-box;
}

body {
  background-color: #3f2860;
  color: #3f2860;
  font-family: Veranda, Arial, sans-serif;
}

header {
  background-color: #9bc1c2;
  background-image: url(lilyheader.jpg);
  background-position: right;
  background-repeat: no-repeat;
  height: 150px;
}

h1 {
  padding-top: 50px;
  padding-left: 2em;
}

nav {
  font-weight: bold;
  float: left;
  width: 160px;
  padding: 1em;
}

nav a {
  text-decoration: none;
  font-weight: bold;
  padding: 1em;
  display: block;
  text-align: center;
  border: 3px outset #CCCCCC;
  margin-bottom: 1em;
}

nav a:link {
  color: #3F2860;
}

nav a:visited {
  color: #497777;
}

nav a:hover {
  color: #A26100;
  border: 3px inset #333333;
}

nav ul {
  list-style-type: none;
  padding-left: 0
}

main {
  margin-left: 170px;
  padding-top: 1em;
  padding: 2em;
  display: block;
}

floatleft {
  float: left;
  margin-right: 4em;
}

.studio {
  font-style: italic;
}

.company {
  font-style: italic;
}

footer {
  background-color: #9bc1c2;
  font-size: .60em;
  font-style: italic;
  text-align: center;
  padding: 1em;
}

clear {
  clear: both;
}

#wrapper {
  background-color: #f5f5f5;
  min-width: 1200px;
  max-width: 1480px;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}

header,
nav,
main,
footer {
  display: block;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Path of Light Yoga Studio</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="yoga.css">
  <!-- [if it IE 9]>
    <script src="html5shiv.js>
    </script>
    <![endif]-->
</head>

<body>
  <div id="wrapper">
    <header>
      <h1>Path of Light Yoga Studio</h1>
    </header>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>;
        <li><a href="classes.html">Classes</a></li>;
        <li><a href="schedule.html">Schedule</a></li>;
        <li><a href="contact.html">Contact</a></li>;
      </ul>

    </nav>
    <main>
      <img class="floatleft" src="yogadoor2.jpg" alt="Door to yoga studio" width="220" height="370">
      <h2>Find Your Inner Light</h2>
      <p><span class="company">Path of Light Yoga Studio</span> provides all levels of yoga practice in a tranquil, peaceful environment. Whether you are new to yoga or an experienced practitioner, our dedicated instructions can develop a practice to meet
        your needs. Let your inner light shine at the <span class="company">Path Of Light Yoga Studio</span>.
      </p>
      <ul>
        <li>Hatha, Vinyasa, and Restorative Yoga classes</li>
        <li>Drop-ins welcome</li>
        <li>Mats, blocks, and blankets provided</li>
        <li>Relax in our Serenity Lounge before or after your class</li>
      </ul>
      <div class="clear">
        <span class="company">Path of Light Yoga Studio</span><br> 612 Serenity Way<br> El Dorado, CA 96162<br><br> 888-555-5555
        <br><br>
      </div>
    </main>
    <footer>
      Copyright &copy; 2016 Path of Light Yoga<br>
      <a href="mailto:Brittany@Tracy.com">Brittany@tracy.com</a><br><br>
    </footer>
  </div>
</body>

</html>

＆＃13;

Link to what the page is supposed to look like

HTML5瑜伽工作室页面无法正常显示

0 个答案: