CSS图片无法使用代码

时间：2016-04-20 13:39:05

标签： html css

我的CSS代码无效，我需要帮助才能完成它。

我需要它，以便按钮会粘在我的图像下，但是当按钮代码放在图像下时，css会搞砸。

这是我的HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>English - Portfolio</title>
<link rel="stylesheet" type="text/css" href="styles/english.css"/>
</head>

<body>
  <header>
    <div class="nav">
      <ul>
        <li class="home"><a href="index.html">Home</a></li>
        <li class="about"><a href="science.html">Science</a></li>
        <li class="contact"><a href="hosptality & catering.html">Hosptality & Catering</a></li>
        <li class="contact"><a href="leisure & tourism.html">Leisure & Tourism</a></li>
        <li class="contact"><a href="bteccomputing.html">BTEC Computing</a></li>
        <li class="contact"><a href="btecbusiness.html">BTEC Business</a></li>
        <li class="contact"><a href="CV.html">CV</a></li>
      </ul>
    </div>
  </header>

  <div class="english">
    <center><h2>English:</h2></center>
  </div>

  <div>
    <div class="ofmam">
      <h4>Of Mice and Men:</h4>
  </div>
    </div>
    <div class="canspe">
        <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cannabis Speech:</h4>
          <div class="canimage" style="width:500%; max-width: 100%;">
  <a href="cannabis speech.html"><img src="images/English/Speech Icon.png" width="332" height="332"/></a></a>
  <p>Click here to find out more about Cannabis.</p>
  <button type="button" onclick="alert('Hello world!')">Click Me!</button>
  </div>
    </div>
  </div>

<div class="container">
        <div class="ofmamimage" style="width:50%; max-width: 50%;"> 
  <a href="of mice and men.html"><img src="images/English/of_mice_and_men.jpg" width="291" height="448"/></a>
  <p>Click here to find out more about Of Mice and Men.</p>
  <button type="button" onclick="alert('Hello world!')">Click Me!</button>
  </div>

<div id="wrapper">
    <div id="footer">
      <p><center>Contact Me:</center></p>
      <p><center>11lanjac@abbeyfield.wilts.sch.uk</center></p>
    </div>
  </div>

</body>
</html>

以下是该代码的CSS：

@charset "utf-8";
/* CSS Document */
body {
  margin: 0;
  padding: 0;
  height:100%;
  background: #fff;
  font-family: Arial;
}

.nav ul {
  list-style: none;
  line-height: normal;
  background-color: #40ea3c;
  text-align: center;
  padding: 0;
  margin: 0 auto;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  line-height: 20px;
  height: 40px;
  border-bottom: 3px solid #888;
}

.nav a {
  text-decoration: none;
  color: #FFFFFF;
  display: block;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #38cd34;
}

.nav a.active {
  background-color: #40ea3c;
  color: #fff;
  cursor: default;
}

@media screen and (min-width: 1000px) {
  .nav li {
    width: 240px;
    border-bottom: none;
    height: 60px;
    line-height: 60px;
    font-size: 0.9em;
  }

  /*Hovering: 38cd34 - Not Hovering: 40ea3c*/

  /* Option 1 - Display Inline */
  .nav li {
    display: table-cell;
    margin-right: -4px;
  }

  /* Options 2 - Float
  .nav li {
    float: left;
  }
  .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
  }
  .nav {
    background-color: #444;
  }
  */
}

.english {
    padding-top: 30px;
}

.canspe {
    padding-right: 200px;
    float: right;
    width: 50%
    max-width: 50%;
    display: inline-block;
}

.canimage {
    margin-bottom: 150px;
    padding-top: 20px;
    width: 50%
    max-width: 50%;
    display: inline-block;
    float: right;
}

.ofmam {
    padding-left: 250px;
    float: left;
    width: 50%
    max-width: 100%;
    display: inline-block;
}

.ofmamimage {
    margin-left: 10px;
    margin-bottom: 50px;
    padding-left: 150px;
    padding-top: 20px;
    width: 100%;
    float: left;
    display: inline-block;
}

.container {
    width: auto;
    max-width: auto;
}

#wrapper {
    padding-top: 500px;
}

#footer {
    background:#40ea3c;
    width:100%;
    height:80px;
    bottom:0;
    left:0;
    color: white;
}

2 个答案:

答案 0 :(得分：0)

尝试以下方法：

 body
    {
        margin: 0;
        padding: 0;
        height: 100%;
        background: #FFFFFF;
        font-family: Arial;
    }

    .nav ul
    {
        list-style: none;
        line-height: normal;
        background-color: #40EA3C;
        text-align: center;
        padding: 0;
        margin: 0 auto;
    }

    .nav li
    {
        font-family: 'Oswald', sans-serif;
        font-size: 10px;
        line-height: 20px;
        height: 40px;
        border-bottom: 3px solid #888888;
    }

    .nav a
    {
        text-decoration: none;
        color: #FFFFFF;
        display: block;
        transition: .3s background-color;
    }

    .nav a:hover
    {
        background-color: #38CD34;
    }

    .nav a.active
    {
        background-color: #40EA3C;
        color: #FFFFFF;
        cursor: default;
    }

    .left, .right
    { width: 50%; text-align: center; margin-bottom: 20px; }

    .left
    { float: left; }

    .right
    { float: right; width: 50%; }

    .clearfix:after
    {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }

    @media screen and (min-width: 1000px)
    {
        .nav li
        {
            width: 240px;
            border-bottom: none;
            height: 60px;
            line-height: 60px;
            font-size: 0.9em;
        }

        .nav li
        {
            display: table-cell;
            margin-right: -4px;
        }

    }

    .english
    {
        padding-top: 30px;
        text-align: center;
    }

    #footer
    {
        background: #40EA3C;
        width: 100%;
        bottom: 0;
        left: 0;
        color: white;
        padding: 25px;;
    }

HTML：

     <!doctype html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>English - Portfolio</title>
    <link rel="stylesheet" type="text/css" href="styles/english.css"/>
</head>
<body>
    <header>
        <div class="nav">
            <ul>
                <li class="home">
                    <a href="index.html">Home</a></li>
                <li class="about">
                    <a href="science.html">Science</a>
                </li>
                <li class="contact">
                    <a href="hosptality & catering.html">Hosptality & Catering</a>
                </li>
                <li class="contact">
                    <a href="leisure & tourism.html">Leisure & Tourism</a>
                </li>
                <li class="contact">
                    <a href="bteccomputing.html">BTEC Computing</a>
                </li>
                <li class="contact">
                    <a href="btecbusiness.html">BTEC Business</a>
                </li>
                <li class="contact">
                    <a href="CV.html">CV</a></li>
            </ul>
        </div>
    </header>
    <div id="wrapper">
        <div class="english">
            <h2>English:</h2>
        </div>
        <div class="left">
            <h4>Of Mice and Men:</h4>
            <a href="cannabis-speech.html"><img src="images/English/Speech Icon.png" width="332" height="332"/></a>
            <p>Click here to find out more about Cannabis.</p>
            <button type="button" onclick="alert('Hello world!')">Click Me!</button>
        </div>
        <div class="right">
            <h4>Cannabis Speech:</h4>
            <a href="of-mice-and-men.html"><img src="images/English/of_mice_and_men.jpg" width="291" height="448"/></a>
            <p>Click here to find out more about Of Mice and Men.</p>
            <button type="button" onclick="alert('Hello world!')">Click Me!</button>
        </div>
        <div class="clearfix"></div>
        <div id="footer">
            <p>
                Contact Me:
                <a href="mailto:11lanjac@abbeyfield.wilts.sch.uk">11lanjac@abbeyfield.wilts.sch.uk</a>
            </p>
        </div>
    </div>
</body>
</html>

答案 1 :(得分：0)

读完你的密码之后，我发现了很多错误。

  • 标记时请注意标记，以便检查所有标记。
  • 始终注意html结构，并按照每个开始和结束标记，子div应始终在父div中，否则这些div将开箱即用。
  • 在您的代码中，您使用了外部的容器div，但请记住始终将所有正文部分放在容器内，这将有助于您在小屏幕中维护。
  • 在制作任何结构之前进行分区。使用块然后将这些块放在一个块中以便于处理，就像你想要一个块一样，然后将所有左边的部分放在左边的块中，然后放在右边的块中。
  • 不要使用170px或更高的填充/边距作为不太好的做法而不是做我做的事情。拿两个块并给它们float:left和float:right。
  • 而不是在类中使用像text-align:center这样的标签，或者作为内联使用标签（内联意味着你想要那个css的同一行。）。

我也更新了你的代码和html部分。请检查此fiddle，如果您遇到任何您无法理解的问题或要点，请告知我们。会很乐意帮助你...

而且，是的，它不是痛苦，而是它未来的实际收益...... :)

相关问题
最新问题