我无法更改html部分的背景颜色

时间：2017-10-17 11:52:10

标签： html css background-color

我在使用html创建的3个部分中添加背景颜色时遇到了一些问题。你能看一下，让我知道我编码的错误吗？当我用html style =＆＃34; background-color： 任何颜色 ＆＃34;时，我只能看到背景颜色。看起来CSS没有应用我一遍又一遍尝试的更改。

＆＃13;
＆＃13; 
* {
  margin: 0px;
  padding: 0px;
}

.container {
  margin: auto;
  width: 80%;
  overflow: hidden;
}

header {
  border-bottom: 1px solid green;
  background-color: #e7e7e7;
}

#logo {
  float: left;
  margin-top: 20px;
}

nav {
  float: right;
  margin-top: 20px;
}

nav li {
  float: left;
  display: inline;
  list-decoration: none;
  padding: 20px 20px 20px 20px;
}

nav li a {
  color: #333333;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
}

--------- #firstpart {
  margin-top: 40px;
  height: 300px;
  background-color: fuchsia;
}

.cajaslider {
  margin-top: 20px;
  margin-bottom: 20px;
  float: left;
  border: 1px solid navy;
  height: 400px;
  width: 55%;
}

#twitter {
  padding-top: 5px;
  margin-left: 40px;
  float: right;
  height: 300px;
  width: 38%;
}

#columns {
  width: 65%;
}

#secondpart {
  padding-top: 20px;
  height: 425px;
  background-color: #e44d26;
}

#secondpart h3 {
  font-size: 20px;
  text-align: left;
}

.text {
  float: left;
  width: 30%;
  padding-right: 25px;
  text-align: justify;
}

.text a {
  text-decoration: none;
  color: white;
}

.text1 {
  float: left;
  width: 30%;
  padding-right: 10px;
  border-right: 1px solid maroon;
  text-decoration: none;
}

.text1 a {
  text-decoration: none;
  color: white;
}

.text1 p {
  text-align: left;
  color: white;
}

.text p {
  text-align: left;
  color: white;
}

.button1 {
  padding: 5px;
  margin-top: 5px;
  border-bottom-color: maroon;
}

#formright {
  float: right;
  width: 32%;
  height: 350px;
  padding: 15px 10px 15px 10px;
  background-color: #666666;
  color: white;
  margin-right: -45px;
  border-radius: 5%;
  border-right: 5%;
}

#entries {
  margin-left: 15px;
  margin-top: -25px;
}

#entries input[type=name] {
  padding: 4px;
  height: 25px;
  width: 250px;
}

#hr1 {
  margin-top: -40px;
}

------- footer {
  margin-top: 20px;
}

#socialmedia {
  margin-left: 250px;
  margin-top: 30px;
}

#socialmedia li {
  float: left;
  list-style: none;
  display: inline;
  width: 20%;
  padding: 20px 5px 20px 5px;
}

<!------------------------About page--------------------->#aboutsect {
  height: 300px;
  background-color: yellow;
}

.caja {
  margin-top: 20px;
  height: 550px;
  border-bottom: 1px solid green;
}

#mainimg {
  float: left;
  width: 35%;
  background-color: white;
}

#content {
  float: right;
  width: 45%;
  background-color: white;
}

-------- section h2 {
  margin-top: 20px;
  margin-bottom: 20px;
}

section .button1 {
  margin-top: 20px;
}

.caja2 {
  margin-top: 20px;
  padding-left: 150px;
  margin-bottom: 20px;
}

.person {
  float: left;
  margin-left: 30px;
  width: 30%;
  margin-bottom: 40px;
}

section img {
  border-radius: 50%;
  height: 100px;
  width: 100px;
}

section h3 {
  font-size: 15px;
  margin-left: 10px;
  margin-top: 20px;
}

section p.centrado {
  font-size: 15px;
  margin-left: 5px;
  margin-top: 20px;
}

section p {
  font-size: 15px;
  margin-left: -40px;
  margin-top: 20px;
}

------- #clients {
  height: 200px;
  background-color: yellow;
}

#clients h3 {
  margin-top: 60px;
}

#cajaotra {
  margin-top: 20px;
  height: 200px;
  border-bottom: 1px solid green;
  margin-left: 150px;
}

.client1 {
  margin-top: 30px;
  padding: 10px;
  margin-right: 70px;
}

------ <!------------------------Service page---------------------!>#services {
  height: 300px;
}

#cajafoto {
  height: 300px;
  border-bottom: 1px solid blue;
}

.equip {
  height: 200px;
  width: 80%;
  margin-left: 100px;
  margin-top: 20px;
}

----------------- #fraccion {
  height: 400px;
}

#cajaourservices {
  margin-top: 50px;
  height: 200px;
}

#ourservices {
  float: left;
  width: 60%;
}

#wantmore {
  float: right;
  width: 30%;
}

----------------- #serviceimages {
  height: 400px;
}

#cajaimagenes {
  height: 300px;
  margin-top: 30px;
}

.train {
  width: 25%;
  margin-left: 20px;
  padding: 30px;
  float: left;
}
＆＃13; 
<body>
  <header>
    <div class="container">
      <div id="logo">
        <a href="http://www.elpais.com">
          <img src="bottle2.jpg" title="bottle" height="50" width="50"></a>
        <p>Drink Me</p>
      </div>

      <nav>
        <ul>
          <li><a href="http://www.elmundo.es">Home</a></li>
          <li><a href="http://www.elmundo.es">About Us</a></li>
          <li><a href="http://www.elmundo.es">Our Wines </a></li>
          <li><a href="http://www.elmundo.es">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>


  <section id="aboutsect">
    <div class="container">
      <div class="caja">
        <div id="mainimg">
          <img src="circle.jpg" alt="the team">
        </div>

        <aside id="content">
          <h2>Title</h2>
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
            Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
          <button class="button1" type="submit">Read More</button>

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

  <section id="meet">
    <div class="container">
      <h3>MEET THE TEAM</h3>
      <hr>
      <div class="caja">

        <div class="caja2">


          <div class="person">
            <img src="rostro.jpg">
            <h3>James Keating</h3>
            <p class="centrado">Profile Description</p>
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
          </div>
          <div class="person">
            <img src="rostro.jpg">
            <h3>James Keating</h3>
            <p class="centrado">Profile Description</p>
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
          </div>
          <div class="person">
            <img src="rostro.jpg">
            <h3>James Keating</h3>
            <p class="centrado">Profile Description</p>
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
          </div>
        </div>

        <br>
        <br>
        <div class="caja2">

          <div class="person">
            <img src="rostro.jpg">
            <h3>James Keating</h3>
            <p class="centrado">Profile Description</p>
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
          </div>
          <div class="person">
            <img src="rostro.jpg">
            <h3>James Keating</h3>
            <p class="centrado">Profile Description</p>
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
          </div>
          <div class="person">
            <img src="rostro.jpg">
            <h3>James Keating</h3>
            <p class="centrado">Profile Description</p>
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="clients">
    <div class="container">
      <h3>OUR CLIENTS</h3>
      <div id="cajaotra">

        <img class="client1" src="client1.jpg">
        <img class="client1" src="client1.jpg">
        <img class="client1" src="client1.jpg">
        <img class="client1" src="client1.jpg">
        <img class="client1" src="client1.jpg">
      </div>
    </div>
  </section>

  <footer>
    <div class="container">
      <ul id="socialmedia">
        <li><a href="http:www.facebook.com">Facebook<img src="facebook.png" height="24" width="24"></a></li>
        <li><img src="facebook.png" height="24" width="24"><a href="http:www.facebook.com">Twitter</a></li>
        <li><img src="facebook.png" height="24" width="24"><a href="http:www.facebook.com">LinkedIn</a></li>
      </ul>
    </div>

  </footer>

</body>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

从CSS中删除所有----行和<!-- xxx -->行，因为这些行不是有效的CSS，可能会阻止您的CSS被正确应用。 CSS注释通常使用C语法（/* comment */）。

相关问题
最新问题