问位置:固定在锚上吗？
EN

Stack Overflow用户

提问于 2017-08-22 04:52:48

回答 1查看 254关注 0票数 0

body {
  margin: 0px;
  background-color: rgba(195, 246, 255, 0.48);
}

.nav {
  background-color: rgba(190, 190, 190, 0.72);
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  text-align: center;
  height: 85px;
  border: 1px solid black;
}

ul {
  position: relative;
  top: 6px;
  left: 360px;
  width: 450px;
  height: 60px;
  margin: 0px auto;
  font-family: "Cairo";
  padding: 5px;
}

li {
  position: relative;
  top: 6px;
  display: inline;
  font-size: 25px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

li.spacing1 {
  margin-right: 25px;
}

li.spacing2 {
  margin-left: 25px;
}

li:hover {
  border: 1px solid red;
  padding: 5px;
}

.content {
  background-color: white;
  width: 1100px;
  margin: 87px auto 0px auto;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../css/example.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
  <title>My Portfolio</title>
</head>

<body>

  <div class="nav">
    <ul>
      <li class="spacing1"><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li class="spacing2"><a href="#contact">Contact</a></li>
    </ul>
  </div>

  <div class="content">

    <p id="about">My name is Lawrence Yoon and I graduated from Cal Poly Pomona with a degree in Hospitality Management and minor in Business Marketing. After working in the hospitality industry for 5+ years, I wanted to expand my knowledge by trying out different
      career paths and happened to find out about computer programming. I've been self-learning for 3+ months, and hope to become a front-end web developer soon! I am proficient with HTML and CSS, and have some knowledge of JavaScript. Once I get my first
      job, I hope to continue studying and eventually learn back-end. My goal is to one day become a full-stack developer!</p>
    <p>So far, I have knowledge of HTML, CSS, Bootstrap, JavaScript, and jQuery. I have used StackOverflow a couple times, and although I don't rely on this, it's great to ask questions and receive answers promptly from a loving community. Jon Duckett's
      Introduction to HTML and CSS has been a great teacher to me thus far; although it's a bit dated, it contains detailed images and helped me greatly step foot into the world of web development. Following this book, I got his second book for JavaScript
      and jQuery and have started to read through that. While I'm doing this, I'm learning from FreeCodeCamp, which immensely helped because through their projects, I'm able to make this file on Codepen, which will become my portfolio! I will definitely
      try to finish all FCC challenges, and make a couple of apps to showcase my skills!</p>
    <p>As of right now, I'm not looking for a job because I lack the skills necessary to get my first job in web development. In a couple of months, I hope to polish what I know so far as well as learn new skills to get my first job. In time, I will showcase
      my skills by demonstrating my abilities through the makings of small apps. Thanks for reading! Please don't hesitate to reach out to me to provide tips, or if you want to talk about anything I'm all ears!</p>

    <p id="portfolio">Portfolio:</p>
    <img src="http://res.cloudinary.com/lyoon/image/upload/v1503300012/06_10_16_buqi65.jpg" alt="Beautiful sunset in Redondo Beach" width="300" height="300">
    <img src="http://res.cloudinary.com/lyoon/image/upload/v1503299864/01_30_16_2_d1ntei.jpg" alt="Gray day in Redondo Beach" width="300" height="300">
    <img src="http://res.cloudinary.com/lyoon/image/upload/v1503299922/02_01_16_wbmyow.jpg" alt="Water in Redondo Beach" width="300" height="300">
    <img src="http://res.cloudinary.com/lyoon/image/upload/v1503300012/06_10_16_buqi65.jpg" alt="Beautiful sunset" width="300" height="300">
    <p>Contact me here:</p>
    <input type="text">
    <br>
    <input type="text">
    <br>
    <input type="text">
    <br>
    <input type="submit" value="Send">

    <p id="contact">Here's where you can get in touch with me! Here, you can request for my resume, get more details on my experience, or learn more about my favorite hobbies! I will reply as soon as I am able, thanks!

  </div>
</body>

</html>

两个问题：

我有我的position: fixed导航条，它阻塞了我的锚标签(关于，投资组合，联系)，这意味着当我点击他们，它带我到他们的位置，但导航条是阻塞开始。当我点击顶部的链接，我如何使它开始在我的导航栏下面？
我是使用CSS li:visited {text-decoration: none;}，但它改变颜色紫色和仍然有一个下划线。为什么会发生这种事？

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-22 05:03:55

要解决页面内锚和固定标题的问题，您需要做的是创建一个锚元素，并将其相对定位在内容部分之上。

小提琴例子：https://jsbin.com/dosalajotu/edit?html,css,output

例如，如果您的标题是50px tall：

header { height: 50px; }
.anchor { position: relative; top: -50px; }

<section>
    <div id="about" class="anchor"></div>
</section>

对于:visited状态，这将适用于a元素，而不是li元素。如果您更新CSS选择器并覆盖颜色，这将解决问题。

li a:active, li a:visited { color: red; text-decoration: none; }

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45809134

复制

相似问题

问位置:固定在锚上吗？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问位置:固定在锚上吗？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问位置:固定在锚上吗？
EN