gpt4 book ai didi

javascript - jQuery 加载搞乱了布局

转载 作者:太空宇宙 更新时间:2023-11-04 12:27:05 25 4
gpt4 key购买 nike

编辑

我的 index.css 覆盖了我原来的标题布局。注意你的 ID 和类(class)!

编辑

我正在使用 jQuery 加载我的网站页眉和页 footer 分。然后将它们显示在我的索引和其他页面上。但是,每当我尝试加载它时,它似乎都会调整我的标题大小。任何人都知道为什么会这样?我对这个问题做了一些研究,但没有发现任何有用的东西。

这是它所影响的网站。

INDEX

HEADER

这是 JSFiddle,其中包含我的 header 代码

JSFiddle for Header

和我的索引代码我是如何调用标题的

<html>
<head>
<title>HobbsBear Studios</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href='http://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="_css/index.css" type="text/css" />
<link rel="stylesheet" href="_css/photobanner.css" type="text/css" />
<script type ="text/javascript" src="_javascript/photobanner.js"></script>
<link rel="icon" href="../favicon.ico" type="image/x-icon">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!-- A buncha stuff in the middle --!>
<div id="footer"></div>
</body>
</html>

所以它显示的是所有元素,只是布局不正确。有什么想法吗?

最佳答案

根本原因是因为您使用的“Slidy 容器”覆盖了您在 header 中使用的类名。您可能必须更改这些类名称。在 2 分钟内,我发现以下 2 个类为您打破了它,它们来自 index.css 页面。

#menu {
position: absolute;
top: 80%;
left: 25%;
width: 50%;
font-family: 'Exo', sans-serif;
font-weight: bold;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 550px;
}

问题是您必须更改内容或标题中的 ID,因为在一个页面上有多个相同的 ID 不是好的做法,并且在某些浏览器上会抛出错误,因为它不是“有效的” html结构。 ID 旨在用于定位页面上的确切特定元素,而类则用于同时定位多个元素。

解决这个问题,你就可以开始了。

关于javascript - jQuery 加载搞乱了布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27936482/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com