尝试将“阴影”应用于页眉和页脚。页脚看起来正确，页眉不

问题描述 投票：0回答：3

我正在尝试在页眉和页脚中同时添加阴影。我试图使它看起来像内容区域在后台，而页眉和页脚有点“跳出来”。页脚和页眉的代码是相同的，但只有页脚像我想要的那样应用它。

/* All pages layout */

html {
  background-color: #0294ea;
}

body {
  font-family: helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0294ea;
}

.container {
  max-width: 100%;
  margin: 0 auto;
}

header {
  background-color: transparent;
  color: #FFF;
  margin-top: 20px;
}

header h1 {
  text-align: center;
}

header p {
  text-align: center;
}

.main-head {
  display: block;
  border-bottom: 2px solid #414141;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
}

.main-body {
  background-color: #FFF;
}

.content-area {
  background-color: #FFF;
  margin-left: 60px;
  margin-right: 60px;
}

.main-foot {
  background-color: transparent;
  display: block;
  border-top: 2px solid #414141;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
}

footer {
  font-size: 60%;
  text-align: center;
  color: #fff;
}


/* Site navigation */

.navigation {
  margin-top: 20px;
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  display: inline-block;
  list-style: none;
  margin-right: 5px;
}

.navigation a {
  display: block;
  text-decoration: none;
  font-weight: normal;
  font-size: 87%;
  color: #FFF;
  padding: 5px 10px;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #a14b56;
}

.navigation a:hover {
  color: #FFF;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #414141;
}


/* Universal float fix */

.fix {
  clear: both;
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
}


/* Index specific */

.sidebar {
  max-width: 33.33%;
}

.main-body {
  max-width: 66.66%;
}
<header>
  <div class="container">
    <div class="main-head">
      <h1>Welcome to My Page</h1>
      <p>For a Viking lifestyle</p>

      <nav class="navigation">
        <ul class="fix">
          <li><a href="index.html">Home</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

<div class="content-area group">
  <div class="container">
    <div class="main-body">

      <h1>Article 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

    <aside class="sidebar">

      <h1>This is the sidebar</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </aside>
  </div>
</div>

<footer>
  <div class="main-foot">
    <p>Copyright &copy; 2019 - Marcus Tarang | Learning HTML/CSS</p>
  </div>
</footer>
html css
3个回答
2
投票

通过将其位置更改为relative（请参见此answer），将标题绘制在主要区域上方：

/* All pages layout */

html {
  background-color: #0294ea;
}

body {
  font-family: helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0294ea;
}

.container {
  max-width: 100%;
  margin: 0 auto;
}

header {
  position: relative;
  background-color: transparent;
  color: #FFF;
  margin-top: 20px;
}

header h1 {
  text-align: center;
}

header p {
  text-align: center;
}

.main-head {
  display: block;
  border-bottom: 2px solid #414141;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
}

.main-body {
  background-color: #FFF;
}

.content-area {
  background-color: #FFF;
  margin-left: 60px;
  margin-right: 60px;
}

.main-foot {
  background-color: transparent;
  display: block;
  border-top: 2px solid #414141;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
}

footer {
  font-size: 60%;
  text-align: center;
  color: #fff;
}


/* Site navigation */

.navigation {
  margin-top: 20px;
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  display: inline-block;
  list-style: none;
  margin-right: 5px;
}

.navigation a {
  display: block;
  text-decoration: none;
  font-weight: normal;
  font-size: 87%;
  color: #FFF;
  padding: 5px 10px;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #a14b56;
}

.navigation a:hover {
  color: #FFF;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #414141;
}


/* Universal float fix */

.fix {
  clear: both;
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
}


/* Index specific */

.sidebar {
  max-width: 33.33%;
}

.main-body {
  max-width: 66.66%;
}
<header>
  <div class="container">
    <div class="main-head">
      <h1>Welcome to My Page</h1>
      <p>For a Viking lifestyle</p>

      <nav class="navigation">
        <ul class="fix">
          <li><a href="index.html">Home</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

<div class="content-area group">
  <div class="container">
    <div class="main-body">

      <h1>Article 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

    <aside class="sidebar">

      <h1>This is the sidebar</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </aside>
  </div>
</div>

<footer>
  <div class="main-foot">
    <p>Copyright &copy; 2019 - Marcus Tarang | Learning HTML/CSS</p>
  </div>
</footer>
1
投票

只需将框阴影放在header上，并给它position: relative;：

header {
  box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
  position: relative;
}


/* All pages layout */

html {
  background-color: #0294ea;
}

body {
  font-family: helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0294ea;
}

.container {
  max-width: 100%;
  margin: 0 auto;
}

header {
  background-color: transparent;
  color: #FFF;
  margin-top: 20px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
  position: relative;
}

header h1 {
  text-align: center;
}

header p {
  text-align: center;
}

.main-head {
  display: block;
  border-bottom: 2px solid #414141;
  max-width: 100%;
  box-sizing: border-box;
}

.main-body {
  background-color: #FFF;
}

.content-area {
  background-color: #FFF;
  margin-left: 60px;
  margin-right: 60px;
}

.main-foot {
  background-color: transparent;
  display: block;
  border-top: 2px solid #414141;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
}

footer {
  font-size: 60%;
  text-align: center;
  color: #fff;
}


/* Site navigation */

.navigation {
  margin-top: 20px;
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  display: inline-block;
  list-style: none;
  margin-right: 5px;
}

.navigation a {
  display: block;
  text-decoration: none;
  font-weight: normal;
  font-size: 87%;
  color: #FFF;
  padding: 5px 10px;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #a14b56;
}

.navigation a:hover {
  color: #FFF;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #414141;
}


/* Universal float fix */

.fix {
  clear: both;
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
}


/* Index specific */

.sidebar {
  max-width: 33.33%;
}

.main-body {
  max-width: 66.66%;
}
<header>
    <div class="container">
      <div class="main-head">
        <h1>Welcome to My Page</h1>
        <p>For a Viking lifestyle</p>

        <nav class="navigation">
          <ul class="fix">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Placeholder</a></li>
            <li><a href="#">Placeholder</a></li>
            <li><a href="#">Placeholder</a></li>
            <li><a href="#">Placeholder</a></li>
            <li><a href="#">Placeholder</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <div class="content-area group">
    <div class="container">
      <div class="main-body">

        <h1>Article 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </div>

      <aside class="sidebar">

        <h1>This is the sidebar</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </aside>
    </div>
  </div>

  <footer>
    <div class="main-foot">
      <p>Copyright &copy; 2019 - Marcus Tarang | Learning HTML/CSS</p>
    </div>
  </footer>
0
投票

将position: relative;添加到.main-head CSS类中>

这是固定结果

/* All pages layout */

html {
  background-color: #0294ea;
}

body {
  font-family: helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0294ea;
}

.container {
  max-width: 100%;
  margin: 0 auto;
}

header {
  background-color: transparent;
  color: #FFF;
  margin-top: 20px;
}

header h1 {
  text-align: center;
}

header p {
  text-align: center;
}

.main-head {
  display: block;
  border-bottom: 2px solid #414141;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
}

.main-body {
  background-color: #FFF;
}

.content-area {
  background-color: #FFF;
  margin-left: 60px;
  margin-right: 60px;
}

.main-foot {
  background-color: transparent;
  display: block;
  border-top: 2px solid #414141;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
}

footer {
  font-size: 60%;
  text-align: center;
  color: #fff;
}


/* Site navigation */

.navigation {
  margin-top: 20px;
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  display: inline-block;
  list-style: none;
  margin-right: 5px;
}

.navigation a {
  display: block;
  text-decoration: none;
  font-weight: normal;
  font-size: 87%;
  color: #FFF;
  padding: 5px 10px;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #a14b56;
}

.navigation a:hover {
  color: #FFF;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #414141;
}


/* Universal float fix */

.fix {
  clear: both;
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
}


/* Index specific */

.sidebar {
  max-width: 33.33%;
}

.main-body {
  max-width: 66.66%;
}
<header>
  <div class="container">
    <div class="main-head">
      <h1>Welcome to My Page</h1>
      <p>For a Viking lifestyle</p>

      <nav class="navigation">
        <ul class="fix">
          <li><a href="index.html">Home</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

<div class="content-area group">
  <div class="container">
    <div class="main-body">

      <h1>Article 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

    <aside class="sidebar">

      <h1>This is the sidebar</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </aside>
  </div>
</div>

<footer>
  <div class="main-foot">
    <p>Copyright &copy; 2019 - Marcus Tarang | Learning HTML/CSS</p>
  </div>
</footer>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.