html - 我怎样才能使我的图像风格和响应？

问题描述

出于某种原因，我一直试图放入我的网站的图像拒绝正确设置样式。我试图添加边框半径并使图像具有反应性，但发现无论图像如何都不会设置样式。它在页面上加载，但没有应用任何 CSS。

编辑：我被要求提供整个页面，所以我对其进行了编辑以拥有它。如果有人可以查看此代码并告诉我如何在不使用类的情况下让我的照片围绕边框并居中对齐，我将非常感激。

/* Add a background color with some padding to the body */

body {
  background: #383F51;
  font-family: Geneva, sans-serif;
}

/* Header and Blog Title */

header {
  background: #91c7b1;
  margin-top: 15px;
  padding: 5px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  text-align: center;
}

header h1 {
  font-size: 42px;
  font-family: "Electrolize", sans-serif;
}

header p {
  font-style: italic;
  font-size: 24px;
}

/* navbar/*
/* top navigation bar style */
nav {
  background-color: #000;
  overflow: hidden;
  display: block;
  height: auto;
  width: auto;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* navigation bar links */

nav a {
  float: left;
  color: white;
  text-align: center;
  font-size: 20px;
  padding: 10px;
  margin-left: 5px;
  text-decoration: underline;
  font-family: "Electrolize", sans-serif;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.rightcolumn {
  flex: 1;
}

.leftcolumn {
  flex: 5;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
.row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;}

main > .row {
  display: flex;
}

@media screen and (max-width: 800px) {
  main > .row {
    flex-direction: column;
  }
}

/* images (work in progress at the moment) */

/* Post layout for articles and additional areas */
.post {
  display: block;
  background-color:white;
  padding: 20px;
  margin-top: 10px;
  border-style: solid;
  border-color: #91c7b1;
  border-radius: 20px;
}
article h2, article h2 a, .post h2 {
  font-size: 24px;
  text-decoration: none;
  color: #533A71;
}

article h5{
  font-size: 16px;
  
}
.post p {
  line-height: 1.5em;
  font-size: 16px;
}
img {
  display: block;
  border-radius: 20px;
  max-width: 100%;
  height: auto;
}

ul {
  line-height: 25px;
  font-size: 18px;
  font-style: italic;
  list-style-type: none;
  padding: 0;
  
}
ul li:not(:last-child) {
    margin-bottom: 10px;
}
/* Footer */

footer {
  color: black;
  margin-top: 10px;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #91c7b1;
  text-align: center;
  font-size: 18px;
  border-radius: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <title>Project Incredible Indie Games</title>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Electrolize&display=swap" rel="stylesheet">

</head>

<body>
  <!-- Begin Header -->
  <header role="banner">
    <h1>Incredible Indie Games</h1>
    <p>Reviews and Reccomendations for the Moderate Indie Gamer</p>
    <!-- End Header -->
    <!-- Begin Navigation -->
  </header>
  <nav role="navigation">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="Ori-and-The-Blind-Forest.html">Reviews</a>
    <a href="Contact-form.html">Contact</a>
  </nav>
  <!-- End Navigation -->
  <!-- End Header -->
  <!-- Begin Main Content -->
  <main role="main">
    <div class="row">
      <!-- Begin Blog Posts -->
      <section class="leftcolumn">
        <article class="post" role="article">
          <h2> <a href="Ori-and-The-Blind-Forest.html">Ori and The Blind Forest: A Soulful and Stunning Action-Platformer</a></h2>
          <h5><time datetime="2021-09-22">Sep, 22 2021</time></h5>
          <figure>
            <img src="ori-and-the-blind-forest.jpg"  alt="Ori and The Blind Forest Game Cover" aria-label="Ori and The Blind Forest Game Cover">
            <figcaption>Ori and The Blind Forest Game Cover </figcaption>
            </figure>
          <p>Ori and the Blind foret tells a story of courage, love, and sacrifice through a beautifully displayed and fluid Metroidvania style platformer. Click on this article's title to see what makes this game such an enjoyable experience!</p>
        </article>
        <article class="post">
          <h2>Ori and The Will of the Wisps</h2>
          <h5>Sep 23, 2021</h5>
          <p>This sequel to Ori and the Blind Forest both builds on the story of the previous game and expands gameplay by including new skills and weapons. Depite the improvement, this game keeps the charm of Ori and is sure to please any fan.</p>
        </article>
      </section>
      <!-- End Blog Posts -->
      <!-- Begin Sidebar -->
      <aside class="rightcolumn" role="complementary">
        <section class="post">
          <h2>About Me</h2>
          <p>Well hello there, my name is Abby Lake and I humbly welcome you to 'Project Incredible Indie Games'</p>
          <p> To learn more, please click on the 'about' tag on the upper navigation bar </p>
        </section>
        <section class="post">
          <h2>Upcoming Posts</h2>
          <ul>
            <li> Endless Ocean </li>
            <li> Endless Ocean: Blue World </li>
            <li> Rime </li>
          </ul>
        </section>
      </aside>
      <!--End Sidebar -->
    </div>
  </main>
  <!--End Main -->
  <!--Begin Footer-->
  <footer class="footer" role="contentinfo">
    <p>Blog Created by: Abby Lake</p>
  </footer>
  <!--End Footer-->
</body>

</html>

标签： htmlcssimageresponsive

html - 我怎样才能使我的图像风格和响应？

问题描述

解决方案

推荐阅读