css - 一个 html 文档中的多个页面
问题描述
所以我有五个不同的编码页面。我想要做的是将它们全部合并到一个 html 页面中。我有一个带有导航栏的主页,该导航栏链接到其他页面,但是每当我尝试插入其他页面时,多个页面相互重叠或出现在下面的列中。我需要什么样的代码才能让可点击的链接拉起我的其他页面而不会覆盖它。下面是我想要链接到另一个页面的代码部分。
}
.container {
position: relative;
width: 50%;
float: left;
}
.image1 {
display: inline-block;
width: 400px;
height: 290px;
margin-top: -10px;
margin-right: 400px;
background-position: 10px 280px;
}
.overlay {
position: absolute;
top: -10px;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 400px;
transition: .5s ease;
background-color: rgba(0, 0, 0, 0);
z-index: -3.0;
}
.container:hover .overlay {
background-color: rgba(0, 0, 0, .7);
height: 290px;
width: 400px;
}
.container:hover .text {
opacity: 1;
}
.text {
font-size: 50px;
position: relative;
width: 330px;
height: 240px;
overflow: scroll;
top: 15%;
left: 48%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
text-align: center;
margin-top: 100px;
display:block;
width:150px;
height: 70px;
border:2px solid #C5E3ED;
color:#ADD7C9;
text-align:center;
text-decoration:none;
}
a { text-decoration: none; color:#C5E3ED }
a:visited { text-decoration: none; color:#C5E3ED; }
a:hover { text-decoration: none; color:#C5E3ED; }
a:focus { text-decoration: none; color:#C5E3ED; }
a:hover, a:active { text-decoration: none; color:#C5E3ED }
<div class="container">
<img src="https://www.pets4homes.co.uk/images/articles/3779/large/how-to-care-for-a-dog-with-a-stomach-upset-58345cd2daf98.jpg" alt="dog" class="image1">
<div class="overlay">
<div class="text">
<a href="http://google.com">About</a>
</div>
</div>
</div>
解决方案
我已经使用本指南为您创建了一个可折叠的框架。 https://www.w3schools.com/howto/howto_js_collapsible.asp
您可以使用 class="content" 在 div 中添加您的 html 代码。让我知道这是否是您想要的。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<button class="collapsible">Open Collapsible</button>
<div class="content">
!--- YOUR HTML CODE HERE ---!
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>
推荐阅读
- java - 使用 Spring Boot 将单体 Java Jetty Web 服务应用程序分解为微服务
- vba - 级联组合框 - 相关框为空白
- python - 在条件下将新行从另一个数据帧添加到另一个数据帧 [python]
- javascript - 提交后HTML表单未清除
- asp.net - 如何在没有 t2embed 错误的情况下在 RDLC 报告中包含特殊字符
- android - Fragment Recreation 导致 Observer 使用 Androidx Navigation 库触发 onChanged()
- powerbi - 带有嵌套过滤器的 DAX 时间智能函数
- python - NamedTuple:从 Outer.Inner 名称创建内部类会创建警告(在 PyCharm 中)
- python - 如何使用 OpenSSL 1.1.1c 在 python 3.7.4 中启用弱密码?
- node.js - 猫鼬填充没有模型的嵌套模式