所以我有五个不同的编码页面。我想要做的是将它们全部合并到一个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>
答案 0 :(得分:0)
我已使用本指南为您创建可折叠的框架。 https://www.w3schools.com/howto/howto_js_collapsible.asp
您可以在div中使用class =“ content”添加html代码。让我知道这是否是您想要的。
type Post {
id: ID! @unique
title: String!
content: String!
published: Boolean! @default(value: "false")
author: User!
}