Question

我是HTML和CSS的完全新手，但是我的大学已将LinkedIn学习链接教程。但是我仍然发现自己经常被卡住。目前，我正在为我的大学作业创建一个网站，但遇到了困难。我想将徽标放在导航栏上“关于我们”链接上方，但是我不确定该怎么做。我还想对齐文本，以使其不隐藏在导航栏后面。我是HTML和CSS的新手，但是我的大学已将LinkedIn学习的链接教程链接在一起。但是我仍然发现自己经常被卡住。任何帮助将不胜感激。

h1 {
  font-family: 'Fjalla One', sans-serif;
}

body {
  font-family: 'Questrial', sans-serif;
}



.logo-img {
  display: inline-block;
  float: left;
  line-height: 10px; /* Adjust this to your menu item height */
  width: 50px; 
  height: 50px;
}


.sidenav {
  height: 100%;
  width: 130px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #F5F5DC;
  overflow-x: hidden;
  padding-top: 20px;
}



.sidenav a {
  padding: 50px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #DEB887;
}

.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}



h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

p {
  text-align: center;
}

body {
  background-color: rgb(255, 191, 128);
}

.parallax {
  /* The image used */
  background-image: url("img_parallax.jpg");

  /* Set a specific height */
  height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"> 
  <meta name="description" content="Second Slice Café website">
  <title>Second Slice Café</title>
  <link rel="stylesheet" type="text/css" href="styles/style.css">

  <style> 
    @import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');

    @import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');      
  </style>  
</head>
<body>

<div class="logo-img">
  <a href=""><img src="images/Green.png" alt="Second Slice Café"></a>
</div>

<div class="sidenav">
  <a href="#about us">About Us</a>
  <a href="#menu">Menu</a>
  <a href="#zero waste">Zero Waste</a>
  <a href="#our partners">Our Partners</a>
  <a href="#faqs">FAQs</a>
  <a href="#contact us">Contact Us</a>
</div>
<h1>Welcome to Second Slice Café!</h1>



<article>
  <section>
    <h2>About Us</h2>
    <p>Our story begins way back when with husband Trevor and wife Naomi. We shared a passion for brewing the perfect cup of coffee from scratch using only pure coffee beans. We would even bring family and friends over to judge whose coffee was better. That's when it hit us. Why not share our love of organic coffee with the world? Thus we decided to launch our own café in the suburbs of Northcote in 2015. Since then, we've branched out into baked goods, sandwiches and milkshakes.</p>
  </section>
  <section>
    <h2>Menu</h2>
    <p></p>
  </section>
  <section>
    <h2>Zero Waste</h2>
    <p></p>
  </section>
  <section>
    <h2>Our Partners</h2>
    <p></p>
  </section>
  <section>
    <h2>FAQs</h2>
    <p><b>Q: Are there any vegan options at Second Slice?</b></p>
    <p><i>A: Of course! For our coffee, we offer almond milk, soy milk, rice milk, oat milk and hemp milk. We also offer a select menu for our vegan customers.</i></p>

    <p><b>Do you have gluten-free and lactose-free items?</b>
  <i></i>
  </p>
  </section>
  <section>
    <h2>Contact Us</h2>
    <p></p>
  </section>
</article>

<body>
</html>

Answer 1

如果要使主要组件并排，或者如果要使一个元素位于另一元素的顶部，则应减小z-index的宽度

.logo {
    z-index: 10; //It'll be on top of everything else
}
.main-container {
    width: 90vw; //viewport width (basically 90% of screen width)

.sidebar {
    width: 10vw;
}

希望您会发现它有用。

Answer 2

有多种方法可以实现它。...最简单的方法是：-只需将div容器作为About About链接的同胞放在“ sidenav”内，然后将图像标签和必需的scr放入其中，即可存储徽标。

<div class="sidenav">
    <div class="logo" height="50" width="100">
       <img src="{logo src should here}" alt="logo" />
    </div>
    <a href="#about us">About Us</a>
    ...........
    ......
</div>

如何将徽标与左侧的导航栏对齐，并防止文本隐藏在导航栏后面？

2 个答案: