真的需要一些帮助造型html

时间:2018-01-23 11:10:51

标签: html styling

我似乎无法弄清楚为什么我的风格属性对我的div没有影响。似乎唯一有用的是body标记。

这是我目前正在做的课程。我觉得我已经尝试了所有的东西,但却无法让它发挥作用。我很确定这是一件很小的东西,我很想念,但这真让我感到沮丧。



body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  float: left;
}

PageBanner {
  margin: 0;
  width: 100%;
  float: none;
  width: 50px;
}

NavBar {
  background: #FD0C10;
}

Header {
  text-align: center;
  margin-bottom: 20px;
}

Subheading {
  text-align: center;
}

Content {}

Footer {}

body>
<div wrapper="Mainwrapper">

  <div class="PageBanner"><img src="../images/banner.jpg" alt="PageBanner"></div>

  <div class="Navbar">
    <ul>
      <li>

      </li>
      <li>

      </li>
    </ul>
  </div>

  <div class="Header">
    <h1>The Club Site</h1>

  </div>

  <div class="SubHeading">
    <h2>Members Prices</h2>

  </div>

  <div class="Content">

  </div>

  <div class="Footer">

  </div>

</div>
<!--Mainwrapper-->

</body>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:2)

.PageBanner之类的css类定义与您期望的一样PageBanner引用名称为PageBanner的标记。 #PageBanner是指ID为PageBanner

的元素

&#13;
&#13;
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  float: left;
  background: color: red;
}

.PageBanner {
  margin: 0;
  width: 100%;
  float: none;
  width: 50px;
  background:red;
}

.NavBar {
  background: #FD0C10;
}

.Header {
  text-align: center;
  margin-bottom: 20px;
}

.Subheading {
  text-align: center;
}

.Content {}

.Footer {}
&#13;
<div wrapper="Mainwrapper">

  <div class="PageBanner"><img src="../images/banner.jpg" alt="PageBanner">
  </div>

  <div class="Navbar">
    <ul>
      <li>

      </li>
      <li>

      </li>
    </ul>
  </div>

  <div class="Header">
    <h1>The Club Site</h1>

  </div>

  <div class="SubHeading">
    <h2>Members Prices</h2>

  </div>

  <div class="Content">

  </div>

  <div class="Footer">

  </div>

</div>
<!--Mainwrapper-->
&#13;
&#13;
&#13;

答案 1 :(得分:2)

您需要设置 CSS选择器 让你的风格发挥作用。

Selector     Example                 Example description
.class       .Header                Selects all elements with class="Header" 
                                    <div class="Header">

#id          #firstname             Selects the element with id="firstname"
                                    <input id="firstname">

请阅读此链接以获取有关CSS Selector Reference的更多信息。

https://www.w3schools.com/cssref/css_selectors.asp

答案 2 :(得分:0)

答案已经给出。但请务必密切注意您编写CSS的方式,因为这种情况下您尝试定义一个类但忽略了点.class,但您也可以执行定义#class的ID。你有一个很好的方法,你只是错过了指示选择器。