Question

这是NetBeans。我试图包含一个外部CSS文件但在外部使用时，图像都变得非常大。虽然我使用内部样式在html文件中使用相同的样式，但图像的比例正确。

＆＃13;

body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.header {
  background-color: #000;
  color: #fff;
  border-color: #080808;
  min-height: 50px;
  border: 1px solid transparent;
}

.inner header {
  width: 80%;
  margin: auto;
}

.logo {
  float: left;
  height: 50px;
  padding: 15px;
  font-size: 20px;
  font-weight: bold;
  padding-left: 90px;
}

a {
  text-decoration: none;
  background-color: transparent;
  color: #ededed;
}

.header link {
  float: right;
  font-size: 14px;
  height: 50px;
  padding: 15px 15px;
  font-size: 16px;
  font-weight: bold;
}

#su {
  float: right;
  height: 50px;
  padding: 15px 90px;
}

#l {
  float: right;
  height: 50px;
  padding: 15px 0px;
}

.content {
  min-height: 600px;
}

.banner-image {
  padding-bottom: 50px;
  margin-bottom: 20px;
  text-align: center;
  color: #f8f8f8;
  background: url(image/intro-bg_1.jpg) no-repeat center;
  background-size: cover;
}

.inner-banner-image {
  padding-top: 12%;
  width: 80%;
  margin: auto;
}

.banner-content {
  position: relative;
  padding-top: 6%;
  padding-bottom: 6%;
  overflow: hidden;
  margin-bottom: 12%;
  background-color: rgba(0, 0, 0, 0.7);
  max-width: 660px;
  margin-left: 200px;
}

.button {
  color: #fff;
  background-color: #c9302c;
  border-color: #ac2925;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  padding: 10px 16px;
  font-size: 18px;
  border-radius: 6px;
}

.container {
  width: 90%;
  margin: auto;
  overflow: hidden;
}

.items {
  width: 30%;
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  float: left;
  margin-left: 1%;
}

.thumbnail {
  display: block;
  max-width: 100%;
  height: auto;
}

.caption {
  color: #000;
  padding: 0px 10px 10px;
  font-weight: bold;
  text-align: center;
}

footer {
  background-color: #000;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

＆＃13;

<html>

<head>
  <title>Lifestyle Store</title>
</head>

<body>
  <div class="header">
    <div class="inner header">
      <div class="logo">
        <a href="">Lifestyle Store</a>
      </div>
      <div class="header link">
        <div id="su">
          <a href="#">Sign Up</a>
        </div>
        <div id="l">
          <a href="#">Login</a>
        </div>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="banner-image">
      <div class="inner-banner-image ">
        <div class="banner-content">
          <h1>We sell lifestyle</h1>
          <p>Flat 40% OFF on premium brands</p>
          <form>
            <a href="#" class="button">Shop Now</a>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="container">

    <div class="items">
      <a href="#">
        <img src="image/camera.jpg" class="thumbnail">
        <div class="caption">
          <h2>Cameras</h2>
          <p>Choose among the best from the world</p>
        </div>
      </a>
    </div>
    <div class="items">
      <a href="#">
        <img src="image/watch.jpg" class="thumbnail">
        <div class="caption">
          <h2>Watches</h2>
          <p>Original watches from the best brands</p>
        </div>
      </a>
    </div>
    <div class="items">
      <a href="#">
        <img src="image/shirt.jpg" class="thumbnail">
        <div class="caption">
          <h2>Shirts</h2>
          <p>Our exquisite collection of shirts</p>
        </div>
      </a>
    </div>
  </div>
  <footer>
    <div class="container">
      <p>Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p>
    </div>
  </footer>
</body>

</html>

＆＃13;

Answer 1

您是否已正确链接此文件中的CSS文件？尝试将文件直接拖放到HTML中，以确保位置和名称正确无误。

href="assignment1/public_html/style.css"

编辑：

您当前的链接是说您拥有index.html文件以及＆＃39; assignment1＆＃39;夹。如果您的HTML文件位于＆＃39; public_html＆＃39;那么样式表链接应该是以下内容。

href="style.css"

外部CSS文件导致图像出现问题

1 个答案: