堆栈内存溢出
  繁体   English   中英

如何在页面左上角添加徽标？

[英]How to add logo to top left of page?

 原文  2021-12-12 05:55:04  8   2    html/ css

问题描述

我想在左上角放一个标志图像，如果是 SYLK。 它一直到页面的中心。 我需要 go 的图像，其中 sylk 在页面上。 我尝试将 img 添加到其中，但它直接进入了中心。 任何帮助深表感谢。 该徽标将用作主页按钮。

HTML

<!doctype html>
<html>
   <head>
      <title>SYLC</title>
      <link rel="stylesheet" type="text/css" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   </head>
   <body>
      <header>
         <A href="#" class="logo">sylk</A>
         <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">Merch</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
      </header>
      <section>
         <img src="img/stars.png" id="stars">
         <img src="img/moon.png" id="moon">
         <img src="img/mountains_behind.png" id="mountains_behind">
         <h2 id="text">Sweti Yeti</h2>
         <a href="#sec" id="btn">Mint Now</a>
         <img src="img/mountains_front.png" id="mountains_front">
         <div class="content">
      </section>
      <div class="sec" id="sec">
      <h2>A Collection of 9,999 Yetis</h2>
      <p>A Colorful, Engaging and Inovating Community. The Sweti Yeti's, a community focused club. 
      </p>
      <h2>Yeti Trip</h2>
      <div class="container">
         <div class="timeline">
            <ul>
               <li>
                  <div class="timeline-content">
                     <h3 class="date">20th may, 2010</h3>
                     <h1>Heading 1</h1>
                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
                  </div>
               </li>
               <li>
                  <div class="timeline-content">
                     <h3 class="date">20th may, 2010</h3>
                     <h1>Heading 2</h1>
                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
                  </div>
               </li>
               <li>
                  <div class="timeline-content">
                     <h3 class="date">20th may, 2010</h3>
                     <h1>Heading 3</h1>
                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
                  </div>
               </li>
               <li>
                  <div class="timeline-content">
                     <h3 class="date">20th may, 2010</h3>
                     <h1>Heading 4</h1>
                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
                  </div>
               </li>
            </ul>
         </div>
      </div>





      <div class="accordion">
         <div class="image-box">
            <img src="imG/yeti.png" alt="Accordion Image">
         </div>
         <div class="accordion-text">
            <div class="title">FAQ</div>
            <ul class="faq-text">
               <li>
                  <div class="question-arrow">
                     <span class="question">What is the total supply?</span>
                     <i class="bx bxs-chevron-down arrow"></i>
                  </div>
                  <p>A total of 9999 unique Sweti Yeti's will be created.</p>
                  <span class="line"></span>
               </li>
               <li>
                  <div class="question-arrow">
                     <span class="question">How Whitelist?</span>
                     <i class="bx bxs-chevron-down arrow"></i>
                  </div>
                  <p>Participate in our Discord Community is a supportive and consistent way.</p>
                  <span class="line"></span>
               </li>
               <li>
                  <div class="question-arrow">
                     <span class="question">Wen mint/presale?</span>
                     <i class="bx bxs-chevron-down arrow"></i>
                  </div>
                  <p>Pre-pre Jan 22nd, Pre Feb 12, Full Feb 14</p>
                  <span class="line"></span>
               </li>
               <li>
                  <div class="question-arrow">
                     <span class="question">What is SWETI?</span>
                     <i class="bx bxs-chevron-down arrow"></i>
                  </div>
                  <p>Share With Everyone To Inspire. Our goal is to make it easier for guys like us, who have big visions but little support in execution. Also relates to kid charity shtuff.</p>
                  <span class="line"></span>
               </li>
               <li>
                  <div class="question-arrow">
                     <span class="question">IMX or whatever chain stuff</span>
                     <i class="bx bxs-chevron-down arrow"></i>
                  </div>
                  <p>bleh</p>
                  <span class="line"></span>
               </li>
               <li>
                  <div class="question-arrow">
                     <span class="question"> How to bother you?</span>
                     <i class="bx bxs-chevron-down arrow"></i>
                  </div>
                  <p>Insert contact info</p>
                  <span class="line"></span>
               </li>
            </ul>
         </div>
      </div>
      </div class="sec">
      <script type="text/javascript">
         let moon = document.getElementById('moon');
         let stars = document.getElementById('stars');
         let mountains_behind = document.getElementById('mountains_behind');
         let mountains_front = document.getElementById('mountains_front');
         let text = document.getElementById('text');
         let btn = document.getElementById('btn');
         let header = document.querySelector('header');
         window.addEventListener('scroll', function() {
           var value = window.scrollY;
           moon.style.top = -value * -1.05 + 'px';
           stars.style.left = value * 0.25 + 'px';
           mountains_behind.style.top =-value * -0.5 + 'px';
           header.style.top =-value * -0.5 + 'px';
           mountains_front.style.top =-value * 0 + 'px';
           text.style.marginTop = value * 1.5 + 'px';
           btn.style.marginTop = value * 1.5 + 'px';
           text.style.marginRight = value * 4 + 'px';
         });
      </script>
      <script>
         let li = document.querySelectorAll(".faq-text li");
         for (var i = 0; i < li.length; i++) {
           li[i].addEventListener("click", (e)=>{
             let clickedLi;
             if(e.target.classList.contains("question-arrow")){
               clickedLi = e.target.parentElement;
             }else{
               clickedLi = e.target.parentElement.parentElement;
             }
            clickedLi.classList.toggle("showAnswer");
           });
         }
      </script>

CSS

@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
}
body {
  background: linear-gradient(#2b1055, #7597de);
}
section {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 100px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 30px 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}
header .logo {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 2px;
}
header ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
header ul li {
  list-style: none;
  margin-left: 20px;
}
header ul li a {
  text-decoration: none;
  padding: 6px 15px;
  color: #fff;
  border-radius: 20px;
}
header ul li a.active,
header ul li a:hover {
  background: #fff;
  color: #2b1055;
}
section:before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to top, #1c0522, transparent);
  z-index: 1000;
}
section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
section img#moon {
  mix-blend-mode: screen;
}
section img#mountains_front {
  z-index: 10;
}
h2#text {
  position: absolute;
  color: #fff;
  right: -350px;
  white-space: nowrap;
  font-size: 7.5vw;
  transform: translateY(0px);
}
#btn {
  text-decoration: none;
  padding: 8px 30px;
  border-radius: 40px;
  background: #fff;
  color: #2b1055;
  transform: translateY(100px);
  font-size: 1.5em;
  z-index: 9;
}
.sec {
  position: relative;
  min-height: 500px;
  padding: 100px;
  background: #1c0522;
}
.sec h2 {
  font-size: 3.5em;
  margin-bottom: 10px;
  color: #fff;
  text-align: center;
}
.sec p {
  font-size: 1.2em;
  color: #fff;
}

::selection {
  background: #7d2ae8;
  color: #fff;
}
.accordion {
  display: flex;
  max-width: 1010px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 25px;
  padding: 45px 90px 45px 60px;
  margin: 0 auto;
}
.accordion .image-box {
  height: 360px;
  width: 300px;
}
.accordion .image-box img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.accordion .accordion-text {
  width: 60%;
}
.accordion .accordion-text .title {
  font-size: 35px;
  font-weight: 600;
  color: #7d2ae8;
  font-family: "Fira Sans", sans-serif;
}
.accordion .accordion-text .faq-text {
  margin-top: 25px;
  height: 263px;
  overflow-y: auto;
}
.faq-text::-webkit-scrollbar {
  display: none;
}
.accordion .accordion-text li {
  list-style: none;
  cursor: pointer;
}
.accordion-text li .question-arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.accordion-text li .question-arrow .question {
  font-size: 18px;
  font-weight: 500;
  color: #595959;
  transition: all 0.3s ease;
}
.accordion-text li .question-arrow .arrow {
  font-size: 20px;
  color: #595959;
  transition: all 0.3s ease;
}
.accordion-text li.showAnswer .question-arrow .arrow {
  transform: rotate(-180deg);
}
.accordion-text li:hover .question-arrow .question,
.accordion-text li:hover .question-arrow .arrow {
  color: #7d2ae8;
}
.accordion-text li.showAnswer .question-arrow .question,
.accordion-text li.showAnswer .question-arrow .arrow {
  color: #7d2ae8;
}
.accordion-text li .line {
  display: block;
  height: 2px;
  width: 100%;
  margin: 10px 0;
  background: rgba(0, 0, 0, 0.1);
}
.accordion-text li p {
  width: 92%;
  font-size: 15px;
  font-weight: 500;
  color: #595959;
  display: none;
}
.accordion-text li.showAnswer p {
  display: block;
}

@media (max-width: 994px) {
  body {
    padding: 40px 20px;
  }
  .accordion {
    max-width: 100%;
    padding: 45px 60px 45px 60px;
  }
  .accordion .image-box {
    height: 360px;
    width: 220px;
  }
  .accordion .accordion-text {
    width: 63%;
  }
}
@media (max-width: 820px) {
  .accordion {
    flex-direction: column;
  }
  .accordion .image-box {
    height: 360px;
    width: 300px;
    background: #ffffff;
    width: 100%;
    border-radius: 25px;
    padding: 30px;
  }
  .accordion .accordion-text {
    width: 100%;
    margin-top: 30px;
  }
}
@media (max-width: 538px) {
  .accordion {
    padding: 25px;
  }
  .accordion-text li p {
    width: 98%;
  }
}

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-family: "Montserrat";
}
.container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 0;
  background-color: #1c0522;
}
.timeline {
  width: 80%;
  height: auto;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.timeline ul {
  list-style: none;
}
.timeline ul li {
  padding: 20px;
  background-color: #655ee1;
  color: white;
  border-radius: 10px;
  margin-bottom: 20px;
}
.timeline ul li:last-child {
  margin-bottom: 0;
}
.timeline-content h1 {
  font-weight: 500;
  font-size: 25px;
  line-height: 30px;
  margin-bottom: 10px;
}
.timeline-content p {
  font-size: 16px;
  line-height: 30px;
  font-weight: 300;
}
.timeline-content .date {
  font-size: 12px;
  font-weight: 300;
  margin-bottom: 10px;
  letter-spacing: 2px;
}
@media only screen and (min-width: 768px) {
  .timeline:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background-color: gray;
  }
  .timeline ul li {
    width: 50%;
    position: relative;
    margin-bottom: 50px;
  }
  .timeline ul li:nth-child(odd) {
    float: left;
    clear: right;
    transform: translateX(-30px);
    border-radius: 20px 0px 20px 20px;
  }
  .timeline ul li:nth-child(even) {
    float: right;
    clear: left;
    transform: translateX(30px);
    border-radius: 0px 20px 20px 20px;
  }
  .timeline ul li::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: gray;
    top: 0px;
  }
  .timeline ul li:nth-child(odd)::before {
    transform: translate(50%, -50%);
    right: -30px;
  }
  .timeline ul li:nth-child(even)::before {
    transform: translate(-50%, -50%);
    left: -30px;
  }
  .timeline-content .date {
    position: absolute;
    top: -30px;
  }
  .timeline ul li:hover::before {
    background-color: aqua;
  }
}

提前感谢您的任何帮助。

2 个解决方案

解决方案1
 0  2021-12-12 06:11:33

尝试添加到header.logo class

float:left;
margin-top:0;

我复制了你的代码并添加了一个我拥有的小图像，它分别只有大约 75x39 像素，它甚至可以在你的菜单和大约 2 英寸的显示器上显示。它在我的笔记本电脑显示器上没有死，但它应该在球场上. 我添加了一个更大的图像 246x205，看起来还不错。

当我复制您的 html 和 css 时，我注意到一件事，我看不到您的整个页面。 你需要一些其他的修改。 Mint Now 居中。

解决方案2
 0  2021-12-12 06:38:17

  header .logo {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 2px;
  float:left;
  margin-top:0;
 position:fixed;
}

注意：我还在底部添加了一个位置固定。 这将随着页面滚动您的徽标。 如果您不想对您的页面执行此操作，只需删除 position 标记即可。

如果您的徽标仍然位于中心，则您可能还有其他与定位相冲突的内容。 我刚刚使用了您在此处发布的这两个文件。

 <header>
     <A href="#" class="logo"><img src="sam.jpg"></A>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在导航栏的左上角添加徽标？ 如何在浮标的左上方放置徽标？ 如何在最左上角设置这个标志？ 滚动页面在徽标顶部添加额外的填充 固定Div在页面顶部，徽标在右侧，导航链接在左侧 如何在滑块顶部添加徽标（链接）？ 如何在 HTML 的左上角放置一个没有边框的徽标？ 如何在屏幕左上角放置徽标？ 如何在左上角放置徽标？ 如何在打印时为每个页面添加徽标
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM