css - HTML 和 CSS 中的部分
问题描述
创建我的之后Header
,我想放Section
一个段落,但问题是我在我的页面中看不到我的段落。
这是一个例子:
<section>
<p>test</p>
</section>
为什么我的部分被隐藏了?我忘了一步?我可以解决我的财产问题:margin-top
但我认为不推荐。
谢谢你的帮助,我是初学者。
这是我下面的代码
body{
margin: 0px;
padding: 0px;
}
header{
font-size: 11px;
font-weight: 700;
color: #777;
line-height: 20px;
}
.banner {
height: 550px;
width: 1366px;
position: absolute;
}
.transparent{
position: relative;
background-color: black;
opacity: 0.5;
height: 100px;
width: 1366px;
padding-top: 8px;
}
.page-left{
top: 1px;
color:white;
position: absolute;
display: inline-block;
left: 430px;
}
.page-left-languages{
top: 1px;
color:white;
position: absolute;
display: inline-block;
left: 515px;
}
.page-right{
top: 1px;
color:white;
position: absolute;
display: inline-block;
float: right;
right: 134px;
}
.page-right-login{
top: 1px;
color:white;
position: absolute;
display: inline-block;
float: right;
right: 80px;
}
nav{
position: absolute;
top: 44px;
float: right;
right: 92px;
}
nav ul{
list-style: none;
}
nav ul li{
display: inline-block;
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
line-height: 27px;
}
nav ul li a{
padding: 8px 16px;
text-decoration: none;
color: #FFF;
text-decoration: center;
border-radius: 3px
}
nav ul li a:hover{
background-color: #FFF;
color: black;
}
.active{
background-color: #cd2122;
color: #FFF;
padding: 8px 16px;
border-radius: 3px;
}
.background-color-one{
position: absolute;
color: #fff;
font-size: 28px;
line-height: 1.3;
border-left: 5px solid #fff;
background-color: #000;
left: 20px;
bottom: 290px;
padding: 0px 15px 0px 15px;
}
.background-color-two{
position: absolute;
color: #fff;
font-size: 30px;
line-height: 1.3;
background-color: #000;
left: 20px;
bottom: 215px;
padding: 10px 10px 10px 10px;
}
.background-color-three{
position: absolute;
color: #fff;
font-size: 16px;
line-height: 1.3;
background-color: black;
opacity: 0.5;
left: 20px;
bottom: 180px;
}
<body>
<header>
<img class="banner" src="https://zupimages.net/up/20/13/5or2.jpg"/>
<div class="transparent"> </div>
<div class="page-left">Portfolio</div>
<div class="page-left-languages">Languages</div>
<div class="page-right">Support</div>
<div class="page-right-login">Login</div>
<nav>
<ul>
<li><a class="active"><href="#">Home</a></li>
<li><a href="#"> Plan</a></li>
<li><a href="#">Commission</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
<div class="background-color-one">7.6%-18% daily for 16 days</div>
<div class="background-color-two">Min deposit $10-Max deposit $50,000</div>
<div class="background-color-three">We accept Perfectmoney,Payeer and Bitcoin</div>
</header>
<section>
<p>test</p>
</section>
</body>
解决方案
更简单地为您的身体提供背景图像。使用flex-box进行导航。它使事情变得简单。
html {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
min-height: 100%;
background: #000 url('https://zupimages.net/up/20/13/5or2.jpg') no-repeat center center scroll;
background-size: cover;
}
header {
font-size: 11px;
font-weight: 700;
color: #777;
padding: 1rem;
margin: 0 0 2rem;
background-color: rgba(0, 0, 0, 0.5);
}
#nav-secondary {
display: flex;
justify-content: space-between;
}
nav ul {
list-style: none;
margin: 0.5rem;
padding: 0;
}
nav ul li {
display: inline-block;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a {
padding: 8px 16px;
text-decoration: none;
color: #FFF;
text-decoration: center;
border-radius: 3px;
display: inline-block;
}
nav ul li a:hover {
background-color: #FFF;
color: black;
}
.active {
background-color: #cd2122;
color: #FFF;
padding: 8px 16px;
border-radius: 3px;
}
main {
padding: 1rem;
}
.background-color-one {
color: #fff;
font-size: 28px;
line-height: 1.3;
border-left: 5px solid #fff;
background-color: #000;
padding: 0px 15px 0px 15px;
margin-bottom: 30px;
}
.background-color-two {
color: #fff;
font-size: 30px;
line-height: 1.3;
background-color: #000;
padding: 10px 10px 10px 10px;
margin-bottom: 30px;
}
.background-color-three {
color: #fff;
font-size: 16px;
line-height: 1.3;
background-color: #000;
padding: 10px 10px 10px 10px;
opacity: 0.5;
}
<body>
<header>
<nav id="nav-secondary">
<ul class="nav-secondary-left-list">
<li><a class="active" href="#">Portfolio</a></li>
<li><a href="#">Languages</a></li>
</ul>
<ul class="nav-secondary-right-list">
<li><a href="#">Support</a></li>
<li><a href="#">Login</a></li>
</ul>
</nav>
<nav id="nav-primary">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#"> Plan</a></li>
<li><a href="#">Commission</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>
<main>
<section>
<div class="background-color-one">7.6%-18% daily for 16 days</div>
<div class="background-color-two">Min deposit $10-Max deposit $50,000</div>
<div class="background-color-three">We accept Perfectmoney,Payeer and Bitcoin</div>
</section>
<section>
<p>test</p>
</section>
</main>
</body>
推荐阅读
- azure - 在 azure devops 中上传字幕和视频
- email - 为什么 Sieve 在 base64 主题行上表现异常?
- java - Springboot中Flyway时的Java API调用
- javascript - 启动机器人时出现“Client.js”错误和 Sqlite 错误
- io - I/O 系统,计算周期寄存器和预分频值
- javascript - 通过变量更改嵌入文本
- amazon-web-services - 来自不同 AWS 账户的交叉堆栈引用
- c# - C# Visual Studio 2010 与 2019 中的计时器实现
- r - 根据值选择每个组中的行
- python - 如何从matlab矩阵.mat中提取相机校准参数到python numpy数组?