Question

我是编码的新手，我有一些问题。我希望有人可以帮我弄清楚我做错了什么。
我在文字下面有一张图片。当浏览器的宽度为100％时，它看起来应该是这样。当我调整浏览器大小以查看它是否具有响应性时，图像不会同时移动文本并保持在页面中间。它完全响应的文字，一切看起来都很好，但这个形象让我发疯。调整浏览器大小时，如何在文本下查看图像？

HTML

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Alco - Blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/normalize.css">
  <link rel="stylesheet" type="text/css" href="css/webflow.css">
  <link rel="stylesheet" type="text/css" href="css/alcotemplate.webflow.css">
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
  <script>
    WebFont.load({
      google: {
        families: ["Montserrat:400,700","Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic"]
      }
    });
  </script>
  <script type="text/javascript" src="js/modernizr.js"></script>
  <link rel="shortcut icon" type="image/x-icon" href="https://y7v4p6k4.ssl.hwcdn.net/placeholder/favicon.ico">
  <link rel="apple-touch-icon" href="images/webclip-slate.png">
</head>
<body>
  <header class="navbar">
    <div class="w-container">
      <div class="w-row">
        <div class="w-col w-col-4 w-clearfix">
          <img class="logo" src="images/logo.png" alt="53a187e6c2e6cb0d0ecbc4a3_logo.png">
        </div>
        <div class="w-col w-col-8 nav-column"><a class="nav-link" href="#">Home</a><a class="nav-link" href="#page-nav-share">About</a><a class="nav-link" href="#">Portfolio</a><a class="nav-link" href="#">Blog</a><a class="nav-link" href="#">Contact</a>
        </div>
      </div>
    </div>
  </header>
  <section class="w-container">
    <h4>Blog</h4>
      <img class="image" src="images/Untitled-1.png" alt="53a1bc1164a4f9aa1001d86e_Untitled-1.png">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget quam orci.</p>
  </section>
  <div class="w-container container">
     <div class="blog">
        <div class="border">
          <img class="scale-with-grid" src="images/blogpost.png" />
             <h5><a href="blog-post.html">Neque porro quisquam est qui lorem ipsum.</a></h5>
    <h3>Our Team</h3>
    <img class="image" src="images/Untitled-1.png" alt="53a1bc1164a4f9aa1001d86e_Untitled-1.png">
    <p>At vero eos et accusamus et iusto</p>
  </div>
  <div class="section grey footer"></div>
  <img src="images/footer.png" alt="53a425b2eaa4a69a21bd719e_footer.png">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="js/webflow.js"></script>
  <!--[if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>
</html>

如果有人可以帮助我，我将非常感激。
期待收到你的来信。

Answer 1

由于您没有提供任何代码，因此很难帮助您... 但是，关于带蓝色和下划线的文本链接，您可以使用css更改所有链接视觉效果：

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

Answer 2

好的，我认为你没有给你的形象任何css。在css语言中，你应该在下面给出一个图像的css属性，只需将粘贴复制到你的CSS中。

img{width:100%;}

为了更好的解决方案，请提供html标记和css。

蓝色下划线和响应图像

2 个答案: