Question

我是网页设计和CSS的新手，请原谅我的无知。我想在我的第一个网站的响应式侧边栏上添加响应式图像作为标题（仅适用于大屏幕）。我希望标题和侧边栏保持稳定，并且文本内容在标题下方滚动。我对标题使用了position：sticky，但是我认为这是一个愚蠢的解决方案，因为当我单击链接时，每个链接的正确文本都隐藏在标题下。有什么建议吗？非常感谢您，很高兴认识您！

here is my page!

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<!-- Header -->
<header class="w3-display-container w3-content w3-wide w3-top w3-hide-medium w3-hide-small" style="position:sticky;max-width:1500px" id="home">
  <img class="w3-image" src="http://www.amtech.gr/el_images/page_header_a_1500.jpg" alt="Header_background" width="1500" height="400">
  <div class="w3-display-middle w3-center">
    <img src="http://www.amtech.gr/el_images/mavrofidopoulos_logo.png" alt="An. Mavrofidopoulos S.A." style="width:100%;max-width:800px;min-width:200px">

</div>
</header>

<div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left" style="width:200px;" id="mySidebar">
  <button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close &times;</button>
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#Link 2" class="w3-bar-item w3-button">Link 2</a>
  <a href="#Link 3" class="w3-bar-item w3-button">Link 3</a> 
  <a href="#Link 4" class="w3-bar-item w3-button">Link 4</a>
</div>

<div class="w3-main" style="margin-left:200px">
<div class="w3-teal">
  <button class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open()">&#9776;</button>
  <div class="w3-container">
    <h1>My Page</h1>
  </div>
</div>

<div class="w3-container">
<h3>Welcome!</h3>
<p>Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
</div>
   
   
  <!-- Link 2 -->
  <div class="w3-container" id="Link 2">
    <h1 class="w3-xxxlarge w3-text-red"><b>Link 2</b></h1>
    <p>Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>  
   
</div>

<script>
function w3_open() {
    document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidebar").style.display = "none";
}
</script>
     
</body>
</html>

响应式侧边栏上的响应式图像

0 个答案: