Question

我正在制作CSS，并制作了一个名为navbar的div，因此我可以编辑孔导航栏并将其与中心对齐，但是当我为导航栏中的每个类添加一个hover时，移动所有页面，而不是仅移动原本应使用的单词。不需要100％CSS或HTML（如果需要），我可以添加JavaScript！

body{
  background-color: white;
  width: 100%;
  height: 100%;
}

#navbar{
  text-align: center;
  font-size: 18px;
  margin-top: 50px;
  word-spacing: 40px;
  font-family: Segoe UI Light;
}

.homenavbar, .portfolio, .certificates, .contact{
  color: black;
  text-decoration: none;
}

.hireme{
  position: relative;
  color: black;
  word-spacing: 0px;
  text-decoration: none;
  left: 300px;
  border-style: solid;
  border-color: gray;
  border-radius: 10px;
  border-width: 1px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 15px;
  padding-right: 15px;
}

.hireme:hover{
  position: relative;
  color: orange;
  word-spacing: 0px;
  font-size: 22px;
  text-decoration: none;
  left: 300px;
  border-style: solid;
  border-color: gray;
  border-radius: 14px;
  border-width: 1px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 19px;
  padding-right: 19px;
}

.homenavbar:hover, .portfolio:hover, .contact:hover, .certificates:hover{
  color: orange;
  font-size: 22px;
  text-decoration: none;
}

.logo{
  position: relative;
  top: 23px;
  right: 150px;
  width: 4%;
  height: auto;
}

<!DOCTYPE html>
{% load staticfiles %}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> *António Gonçalves*</title>
    <link rel="stylesheet" href="{% static "css/index.css" %}">
    <link rel="shortcut icon" type="image/png" href="{% static "images/favicon.png" %}">
    <style>
      @font-face { font-family: 'Segoe UI'; src: local("{% static  "font/Segoe-UI" %}"), url('segoeui.woff') format('woff');}
      @font-face { font-family: "Segoe UI Light"; src: local("{% static  "font/Segoe-UI-Light" %}"), url("segoeuil.ttf") format("ttf")}
    </style>
  </head>
  <body>
    <div id="navbar">
      <img class="logo" src="{% static "images/favicon.png" %}" alt="Logo not found">
      <a class="homenavbar" href="{% url 'home' %}">HOME</a>
      <a class="portfolio" href="{% url 'portfolio' %}">PORTFOLIO</a>
      <a class="certificates" href="{% url 'certificate' %}">CERTIFICATES</a>
      <a class="contact" href="{% url 'contact' %}">CONTACT</a>
      <a class="hireme" href="{% url 'hire' %}">HIRE ME</a>
    </div>
    <div class="home">
      <div>
        <p class="UIUX">UI / UX</p>
        <p class="design">DESIGN</p>
        <img class="uiline" src="{% static "images/line.png" %}" alt="Line not found">
      </div>
      <div>
        <img class="me" src="{% static "images/me.png" %}" alt="Beautiful guy not found!">
        <p class="p1">Hi, my name is António Gonçalves.</p>
        <p class="p2">I´m a UX/UI Designer that is specialized on Front-end <br>and Back-end development.</p>
        <div class="skillset">
          <p class="skills">SKILLS</p>
          <p class="skillp">HTML, CSS, JavaScript, Python, Django, SQLlite</p>
        </div>
        <div class="softwareset">
          <p class="software">SOFTWARE</p>
          <p class="softwarep">Adob XD, ATOM</p>
        </div>
        <div class="languageset">
          <p class="language">LANGUAGE</p>
          <p class="languagep">Portuguese, English</p>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

您可以使用比例转换来代替字体大小。查看以下类似问题的答案：Increasing font size without moving other text。

当我将鼠标悬停在一个单词上时，如何使CSS不会移动整个页面？

1 个答案: