Question

这是我目前的代码，现在的问题是image3，这是第二个框没有显示正确的高度...以下是我的style.css的更新代码：

body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', 'serif';
}

.nav {
   background-color: #ffffff;
   color: #000000;
   list-style: none;
   text-align: right;
   padding: 20px 0 0 0;
}

.nav > li {
    display: inline-block;
    padding-right: 50px;
    font-size: 12px;
}

.nav > li > a {
    text-decoration: none;
    color: #000000;
}

.nav > li > a:hover {
    color: #c1c1c1;
}

.logo {
    color: black;
    float: left;
    padding-left: 25px;
    font-size: 12px;
    font-weight: bold;
}

.logo > a {
   text-decoration: none;
   color:black;
}

.banner {
    width: 100%;
    display:block;
}

.banner > .banner-image {
    width: 100%;
    display: block;
    height: 700;
}

.service1 {
    width: 298px;
    border: 1px solid #c1c1c1;
    margin: 20px 10px;
    padding: 0 5px;
    float: left;
}

.service1 > p {
    font-size: 14px;
    color: #636363;
    max-width: 200px;
    text-align: justify;

}

.services {
    width: 1500px;
    margin:0 auto;
}

h1 {
    font-size: 16px;
    font-weight: bold;
    background-color: #c1c1c1;
    color: #ffffff;
    padding: 10px 0;
    margin: 0 -6px;
}

.image {
    max-width: 135px;
    margin: 15px 0 0 0;
}

.heading {
    text-align:center;
    font-size: 25px;
    color: #000000;
    margin:100px 0 50px 0;
    font-weight: bold;
}

.service1 > image1 {
    max-width: 120;
    margin: 15px 0 0 0;
}

.service1 > image3 {
    max-width: 120;
    margin: 15px 0 15px 0;
}


.image:hover {
    opacity: 0.2;
    max-width: 200px;
     margin-top:15px;
}

.image1:hover {
    opacity: 0.2;
    max-width: 200px;
    margin-top:15px;
 }

.message {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}


.message ul {
    text-align: center;
    list-style-position: inside;
}

这是我的index.html代码：

<!DOCTYPE>
<html>
<head>
   <link rel="stylesheet" type ="text/css" href="style.css">
<title>Pianocourse101</title>
</head>
<body>



   <ul class="nav">

      <div class="logo">
         <a href="index.html">Pianocourse101</a>
      </div>



  <li><a href="http://localhost/pianocourse101/register.php">Register</li> 
      </a>
  <li><a href="http://localhost/pianocourse101/login.php">Login</li></a>

  <li><a href="">About Me</li></a> 
  <li><a href="">Contact Us</li></a>

   <div class="banner">
      <img class="banner-image" src="images/mervin.gif">
   </div>

   <br></br>
   <br></br>
   <div class="message">
      <p> At Pianocourse101, you will learn the following</p>
         <ul>
            <li>Basic hand positions</li>
            <li>Posture</li>
            <li>Rhythm</li>
            <li>Finger numbers</li>
            <li>Letter names</li>
         </ul>
   </div>


   <div class="heading">Services</div>
      <div align="center" class="services">
         <div class="service1">  
            <h1>Download Section: Primer Level</h1>
            <a href=""><img class="image1" src="images/treble.png"></a>
            <p>Access full contents for just <strong>$50!</strong> Learn the 
 basic hand positions, finger numbers and letter names!</p>
         </div>


    <div class="service1">  
        <h1>Download Section: Level 1</h1>
        <a href=""><img class="image3" src="images/bass.jpg"></a>
        <p>Access full contents for just <strong>$100!</strong> Learn some 
    advanced pieces, slurs and staccatos!</p>

      </div>


     <div class="service1">  
        <h1>Download Section: Level 2</h1>
        <a href=""><img class="image" src="images/crotchet.png"></a>
        <p>Access full contents for just <strong>$150!</strong> Progress and 
    play some more advanced pieces hands together!</p>
     </div>

      <div class="service1">  
        <h1>Download Section: Level 3</h1>
        <a href=""><img class="image2" src="images/bass.jpg"></a>
        <p>Access full contents for just <strong>200!</strong> Feeling more 
     confident and need a challenge? Level 3 will provide you with more 
        challenging pieces!</p>
         </div>
       </div>

   <section>

   </section>
   <footer>

   </footer>
</body>
</html>

我不知道为什么我要添加更多评论但我无法弄清楚为什么我的第二个盒子没有正确排列...

/ * CSS对齐方式读作top，left，bottom，right * /

无法让我的图片在CSS

0 个答案: