javascript - 内容超出标题-6ren

javascript - 内容超出标题

转载作者：行者123 更新时间：2023-12-02 21:00:26

我的标题已固定，文本设置为相对。当我滚动时，文本会越过标题。

我希望我的文字不要超出标题。

Javascript 位于开头。

CSS 位于中间。

HTML 位于最后。 This is my picture, hopefully it didn't hyperlink :)

我是网页设计新手，正在学习 CS50 类(class)。此外，我已经尝试使文本固定并使标题相对。

```function openNav() {
  document.getElementById("mobile__menu").style.width = "100%";
}

function closeNav() {
  document.getElementById("mobile__menu").style.width = "0";
}```

   ``` * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background-color: #24252a;
  position: fixed;
  width: 100%;
}

.logo {
  cursor: pointer;
}

.nav__links a,
.cta,
.overlay__content a {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  color: #edf0f1;
  text-decoration: none;
}

.nav__links {
  list-style: none;
  display: flex;
}

.nav__links li {
  padding: 0px 20px;
}

.nav__links li a {
  transition: all 0.3s ease 0s;
}

.nav__links li a:hover {
  color: #0088a9;
}

.cta {
  padding: 9px 25px;
  background-color: rgba(0, 136, 169, 1);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

.cta:hover {
  background-color: rgba(0, 136, 169, 0.8);
}```


/* Mobile Nav */

```.menu {
  display: none;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  background-color: #24252a;
  overflow-x: hidden;
  transition: all 0.5s ease 0s;
}

.overlay__content {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.overlay a {
  padding: 15px;
  font-size: 36px;
  display: block;
  transition: all 0.3s ease 0s;
}

.overlay a:hover,
.overlay a:focus {
  color: #0088a9;
}

.overlay .close {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  color: #edf0f1;
}

@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px;
  }
  .overlay .close {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

@media only screen and (max-width: 800px) {
  .nav__links,
  .cta {
    display: none;
  }
  .menu {
    display: initial;
  }
}

.right h1 {
  margin: 10px;
  padding: 10px;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  top: 25%;
  transform: translateY(-50%);
  padding-top: 30px;
}

.right>* {
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  text-justify: center;
  text-align: center;
  margin: 10px;
}

.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 740px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}```

   ``` <!DOCTYPE html>
<html lang="en">

<head>
  <title>Ryan Miller</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <link rel="stylesheet" href="designer.css">
  <link rel="stylesheet" href="designer-slideshow1.css">

  <style>
    @media only screen and (max-device-width: 1366px) {
      .parallax {
        background-attachment: scroll;
      }
    }
    
    body,
    html {
      height: 100%;
    }
    
    .parallax {
      background-image: url("https://images.pexels.com/photos/326501/pexels-photo-326501.jpeg?cs%3Dsrgb%26dl%3Dapple-computer-desk-devices-326501.jpg%26fm%3Djpg");
      height: 100%;
      width: 100%;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      backface-visibility: visible;
    }
  </style>

</head>

<body>
  <header>
    <a class="logo" href="landing/landing.html"><img src="Logo.jpg" alt="logo" width="60px" height="auto" ;></a>
    <nav>
      <ul class="nav__links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Programmer</a></li>
      </ul>
    </nav>
    <a class="cta" href="#">Contact</a>
    <p onclick="openNav()" class="menu cta">Menu</p>
  </header>
  <div id="mobile__menu" class="overlay">
    <a class="close" onclick="closeNav()">&times;</a>
    <div class="overlay__content">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Programmer</a>
    </div>
  </div>
  <div class="parallax">
    <div class="row">
      <div class="column" style="background-color:rgba(170, 170, 170, 0.0);">
        <h2></h2>
        <p></p>
      </div>
      <div class="column right" style="background-color:rgba(0, 0, 0, 0.53);">
        <h1>Logo Design</h1>
        <h1>Advertisements</h1>
        <h1>Business Cards</h1>
        <h1>Photography</h1>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="designer.js" />
</body>

</html>```

最佳答案

欢迎!

好吧，所以使用一个名为 z-index 的属性，我们可以更改顶部显示的顺序，如下所示:

```function openNav() {
  document.getElementById("mobile__menu").style.width = "100%";
}

function closeNav() {
  document.getElementById("mobile__menu").style.width = "0";
}```

   ``` * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background-color: #24252a;
  position: fixed;
  width: 100%;
  z-index: 1;
}

.logo {
  cursor: pointer;
}

.nav__links a,
.cta,
.overlay__content a {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  color: #edf0f1;
  text-decoration: none;
}

.nav__links {
  list-style: none;
  display: flex;
}

.nav__links li {
  padding: 0px 20px;
}

.nav__links li a {
  transition: all 0.3s ease 0s;
}

.nav__links li a:hover {
  color: #0088a9;
}

.cta {
  padding: 9px 25px;
  background-color: rgba(0, 136, 169, 1);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

.cta:hover {
  background-color: rgba(0, 136, 169, 0.8);
}```


/* Mobile Nav */

```.menu {
  display: none;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  background-color: #24252a;
  overflow-x: hidden;
  transition: all 0.5s ease 0s;
}

.overlay__content {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.overlay a {
  padding: 15px;
  font-size: 36px;
  display: block;
  transition: all 0.3s ease 0s;
}

.overlay a:hover,
.overlay a:focus {
  color: #0088a9;
}

.overlay .close {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  color: #edf0f1;
}

@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px;
  }
  .overlay .close {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

@media only screen and (max-width: 800px) {
  .nav__links,
  .cta {
    display: none;
  }
  .menu {
    display: initial;
  }
}

.right h1 {
  margin: 10px;
  padding: 10px;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  top: 25%;
  transform: translateY(-50%);
  padding-top: 30px;
}

.right>* {
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  text-justify: center;
  text-align: center;
  margin: 10px;
}

.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 740px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}```

   ``` <!DOCTYPE html>
<html lang="en">

<head>
  <title>Ryan Miller</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <link rel="stylesheet" href="designer.css">
  <link rel="stylesheet" href="designer-slideshow1.css">

  <style>
    @media only screen and (max-device-width: 1366px) {
      .parallax {
        background-attachment: scroll;
      }
    }
    
    body,
    html {
      height: 100%;
    }
    
    .parallax {
      background-image: url("https://images.pexels.com/photos/326501/pexels-photo-326501.jpeg?cs%3Dsrgb%26dl%3Dapple-computer-desk-devices-326501.jpg%26fm%3Djpg");
      height: 100%;
      width: 100%;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      backface-visibility: visible;
    }
  </style>

</head>

<body>
  <header>
    <a class="logo" href="landing/landing.html"><img src="Logo.jpg" alt="logo" width="60px" height="auto" ;></a>
    <nav>
      <ul class="nav__links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Programmer</a></li>
      </ul>
    </nav>
    <a class="cta" href="#">Contact</a>
    <p onclick="openNav()" class="menu cta">Menu</p>
  </header>
  <div id="mobile__menu" class="overlay">
    <a class="close" onclick="closeNav()">&times;</a>
    <div class="overlay__content">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Programmer</a>
    </div>
  </div>
  <div class="parallax">
    <div class="row">
      <div class="column" style="background-color:rgba(170, 170, 170, 0.0);">
        <h2></h2>
        <p></p>
      </div>
      <div class="column right" style="background-color:rgba(0, 0, 0, 0.53);">
        <h1>Logo Design</h1>
        <h1>Advertisements</h1>
        <h1>Business Cards</h1>
        <h1>Photography</h1>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="designer.js" />
</body>

</html>```

所以，z-index默认值实际上设置为0，因此将元素设置为z-index: 1;将使之成为最重要的“优先事项”。希望这会有所帮助。

关于javascript - 内容超出标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61369406/

文章推荐： javascript - 增加输入值 - 我在这里做错了什么？

文章推荐： javascript - Vue中父组件向子组件传递数据的方法

文章推荐： javascript - 更改工具栏中的图标缩放react-apexchart

文章推荐： JavaScript 事件监听器无需调用即可触发

javascript - 淡出 Div 内容 - 空 Div 内容 - 淡入新内容
我正在为我的按钮使用 onClick 功能。我的按钮代码如下所示: Button 1 Button 2 我的 JS 函数如下所示: function fadeNext(selectedId, spee
php - 如何将 MySQL 内容(文本+html 内容)分成列？
首先，我想提一下，我理解每个人在不提供至少一些试验或错误的情况下提出问题的感受，但这纯粹是一种知识需求，话虽如此，我会去提前问。我一直无法弄清楚如何将保存在 MySQL 表中的 600-1000 个
javascript - echo "row 1"内容每个不同位置的,"row 2"内容
我想做的事情有点令人困惑，而且我英语不太好，所以我先把代码贴在这里，这样你就可以很容易地理解: 以下是表单内容: Testing for Stackoverflow Option1
c++ - 使用 SDL_Renderer 绘制 2D 内容，使用 SDL_GLContext 绘制 OpenGL 内容
我学习 SDL 二维编程已有一段时间了，现在我想创建一个结合使用 SDL 和 OpenGL 的程序。我是这样设置的: SDL_Init(SDL_INIT_VIDEO); window = SDL_Cr
javascript - ID相同时如何获取data-*内容？
我创建了 2 个 data-* 标签。数据类别和数据标签。单击 href 标签后，我想复制该数据类别和数据标签以形成输入。我的代码是:
CSS 内容 - 换行符
我想用 CSS 换行。我正在使用内容。 td:before { content: "Test\A Test2"; } 它不工作。如何正确
Java HashMap 内容
这个问题已经有答案了: Java Class that implements Map and keeps insertion order? (8 个回答) 已关闭 6 年前。我有一个 HashMap
java - JMeter从SFTP文件夹中获取最新的文件/内容
我正在尝试使用 JMeter 执行端到端测试。测试涉及写入SFTP文件夹并从另一个SFTP文件夹读取写入操作生成的文件。我能够使用 JMeter SSH SFTP 插件连接到 SFTP 文件夹，并能
Java:上传文件并获取文件的字符串(内容)
您好，我有带有标准服务器端 Servlet 的 GWT 客户端。我可以从 GWT 客户端上传文件并在服务器端读取其内容我可以将其作为字符串发送回客户端但是我有 GWT FormPanel与操作
特定文件夹中允许的 Plone 内容
我在 Plone 4.3.9 中创建了一个自定义类型的灵巧性，称为 PersonalPage，必须只允许在特定文件夹中使用成员文件夹/用户文件夹 . 在他的 FTI 中，默认情况下 False .
Android:在新的应用程序版本中更改小部件的布局/内容
在新(更新)版本的应用程序中更改小部件布局的最佳做法是什么？当新版本提供更新、更好的小部件时，如何处理现有小部件？最佳答案我认为您必须向用户显示一个弹出窗口，说明“此版本中的新功能”并要求他们重新
旋转手机时Android隐藏 fragment 内容
在我的应用程序中，我使用支持 View 寻呼机和 PagerTabStrip。进入查看寻呼机我有一些 fragment ，进入其中一个我正在使用支持卡片 View 。运行应用程序后，所有卡片 View
Android更新textview计时器并刷新 map 内容？
我有以下布局文件。基本上我有谷歌地图，在左上角我有一个 TextView，我需要在其中每 15 秒保持一次计数器以刷新 map 。布局很好。
垃圾收集递归时的Java map 内容？
我使用如下结构: HashMap > > OverallMap 如果我这样做: OverallMap . clear ( ) clear() 丢弃的所有内容(HashMap 对象、Integer 对
php - 最佳实践ajax随机加载更多图像(内容)
我在数据库中有 1000 张图像。在页面加载时，我随机显示 60 张图片，当用户滚动时，我通过 AJAX 请求添加 20 张图片。第一种方法我所做的是将所有图像加载到一个容器中，然后隐藏所有图像并
表格消失后的 HTML 内容
我正在使用 woocommerce 创建一个网上商店。我想在每个产品上添加一个包含产品信息的表格，例如颜色、交货时间等等。但是当我添加这张表时。本产品消失后的所有内容。我的表的代码: td {
html - 内容:“”的作用是什么？
This question already has an answer here: What does an empty value for the CSS property content do?
javascript - 如何只点击模态外观而不点击对话框/内容？
因此，我正在与我的 friend 一起为 Google Chrome 开发一个扩展程序，对于大多数功能(即日历、设置等)，我们打开一个模式，这样我们就不必重定向到另一个页面。当您在内容之外单击时，我们
侧面带有垂直标题的 CSS 内容
我将可变高度的 CSS 框设置为在更大的 div 中向左浮动。现在我想添加一个标题，其中文本在框的左侧垂直显示(旋转 90 度)，如下面的链接所示(抱歉还不能发布图片)。 http://imagesh
html - 内容/页脚的宽度小于浏览器宽度
相关页面位于 www.codykrauskopf.com/circus 如果您查看我页面的右侧，在半透明容器和浏览器窗口边缘之间有一个间隙。我看了看，出于某种原因，wrap、main、content

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 内容超出标题