个人中心
gpt4 book ai didi

javascript - 卡在 html/css 问题上

转载 作者：太空宇宙 更新时间：2023-11-04 10:32:10 24 4
gpt4 key购买 nike

我遇到的问题是 .para 的背景没有显示。它应该显示在 tile2 背景图像前面，但事实并非如此。我是 html 和 css 的新手，但我学得很快。如果有人可以参与并告诉我如何解决这个问题以及我做错了什么，将不胜感激。 :)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding-top: 550px;
}
header {
  height: 605px;
  padding-top: 50px;

}
.main-nav,
.main {
  position: relative; 
}
.main-nav {
  background: #fff;
  height: 70px;
  z-index: 150;
  margin-bottom: -60px;
  box-shadow: 0 4px 6px rgba(0,0,0,.4);
  overflow: hidden;
  width:100%;
  padding-top:0px;
}
header,
.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
  list-style-type: none;
    margin-top: 0px;
    margin: 15;
    padding: 0;
    overflow: hidden;
}
.main-nav-scrolled {
    list-style-type: none;
    margin-top: 0px;
    margin: 15;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
.main {
  background-image: url("img/tiles2.png");
  background-attachment:fixed;
  padding: 120px 50px 50px;
  column-count: 2;
  column-gap: 40px;
}

/* ------------------------------------*/
.main-nav ul {
    width: 100%;
    list-style-type: none;
    margin-top: 0px;
    margin: 15;
    padding: 0;
    overflow: hidden;
    background-color: #333;


    }

.main-nav li {
    float: left;
}

.main-nav li:last-child {
    border-right: none;
}

.main-nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 26px 29px;
    text-decoration: none;
}

.main-nav li a:hover:not(.active2) {
    background-color: #111;
}

.main-nav .active2 {
    background-color: #4CAF50;
}


<!----------------------------------------------------------->

.para{
    position: relative;
    height:800px;
    display: inline-block;
    margin-left: 230px;
    margin-right: 50px;
    margin-top:30px;
    background-color: #FFFFFF;
    padding: 50px;
    font-size:200;
    font-family:verdana;
    line-height:2;
    overflow:auto;
}
</style>
</head>

<body>

<ul>
  <li><a class="active2" href="Index.html">Home</a></li>
  <li style="float:right"><a href="Competitions.html">Competitions</a></li>
  <li style="float:right"><a href="About.html">About</a></li>
</ul>

<header>
  <img src="img/aboutHeader2.png" alt="header" style="width:100%;">
</header>

<div class="main-nav">
  <ul>
  <li><a class="active2" href="Index.html">Home</a></li>
  <li style="float:right"><a href="Competitions.html">Competitions</a></li>
  <li style="float:right"><a href="About.html">About</a></li>
</ul>
</div>

<div class="main">
  <div class="background">

  </div>

  <div class="para">
     <p>Central Pennsylvania Music Teachers Association is an affiliate of the Pennsylvania Music Teachers Association and the Music Teachers National Association. Founded in 1846 by Theodore Presser in Delaware, Ohio, MTNA serves 25,000 independent music teachers committed to the pursuit of excellence in music teaching.

MTNA and its affiliates seek to promote the professional growth and development of its members and to further the art of music by providing programs that encourage and support teaching, performance, composition and scholarly research.

To receive membership applications, and additional information about our organization click MTNA APPLICATION

</p>
  </div>

  <div class="circles">

  </div>
</div>

<script src="js/jquery-1.9.js"></script>

<script>
var  mn = $(".main-nav");
    mns = "main-nav-scrolled";
    hdr = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});
</script>
</body>
</html>

最佳答案

只需删除“评论”行:

<!----------------------------------------------------------->

或者替换为:

/* ----------------------------------------------------------- */

关于javascript - 卡在 html/css 问题上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36415364/

24 4 0
文章推荐： java - 嵌入式 Elasticsearch junit web 服务测试
文章推荐： html - 如何使按钮具有背景图像并同时透明？
文章推荐： html - 将标签添加到 Divy 侧边导航
文章推荐： python - 将行添加到 csv 文件而不创建中间副本
太空宇宙
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com