html - 导航栏干扰内容
问题描述
我目前正在开发我的第一个网站,而且我还是 HTML 和 CSS 的新手,如果代码有点“草率”,我很抱歉。无论如何,我制作了一个在主页上工作的导航栏(它有一个图像背景)。我发现在线“关于”页面代码对我很有帮助,所以我使用了它,问题是导航栏干扰它并让它变得很奇怪。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f1f1f1;
}
.header{
width: 100%;
background-color: rgba(0,0,0,0.9);
}
.header ul{
text-align: center;
}
.header ul li{
list-style: none;
display: inline-block;
}
.header ul li a{
display: flex;
text-decoration: none;
text-transform: uppercase;
color:white;
font-size: 100%;
letter-spacing: 2px;
font-weight: 600;
padding: 25px;
transition: width .3s;
}
.about{
background: url("/images/Industrial2.jpg") no-repeat left;
background-size: 55%;
background-color: #fdfdfd;
overflow: hidden;
padding: 100px 0;
}
.inner-section{
width: 55%;
float: right;
background-color: #fdfdfd;
padding: 140px;
box-shadow: 10px 10px 8px rgba(0,0,0,0.3);
}
.inner-section h1{
margin-bottom: 30px;
font-size: 30px;
font-weight: 900;
}
.text{
font-size: 13px;
color: #545454;
line-height: 30px;
text-align: justify;
margin-bottom: 40px;
}
.skills button{
font-size: 22px;
text-align: center;
letter-spacing: 2px;
border: none;
border-radius: 20px;
padding: 8px;
width: 200px;
background-color: #00999c;
color: white;
cursor: pointer;
}
.skills button:hover{
transition: 1s;
background-color: #ecf5f5;
color: #00999c;
}
@media screen and (max-width:1200px){
.inner-section{
padding: 80px;
}
}
@media screen and (max-width:1000px){
.about{
background-size: 100%;
padding: 100px 40px;
}
.inner-section{
width: 100%;
}
}
@media screen and (max-width:600px){
.about{
padding: 0;
}
.inner-section{
padding: 60px;
}
.skills button{
font-size: 19px;
padding: 5px;
width: 160px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<div class="header"></div>
<body>
<div class="about">
<div class="inner-section">
<div class="header">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
<div class="body">
<h1>About Us</h1>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Doloribus velit ducimus, enim inventore earum, eligendi
nostrum pariatur necessitatibus eius dicta a voluptates sit
deleniti autem error eos totam
nisi neque voluptates sit deleniti autem error eos totam nisi neque.
</p>
<div class="skills">
<button>Contact Us</button>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
抱歉没有给你一个直接的答案,但这里有一个提示:尝试使用任何框架(如MDP,我是框架的作者)或引导你的项目。如果你使用它,我建议你使用网格来让你的网站看起来更好
编辑:好的!这是一个几乎就像您需要的网站 https://todoapp.rf.gd/framework/beta/templates/10298/#
推荐阅读
- android - Flutter Execute Method 长按按钮
- r - R:使用图表包绘制马尔可夫模型(进行图表更改)
- java - 识别对象
- android - 即使项目被反编译,在android中加密字符串的安全方法?
- windows - PrintPreviewControl 和表单设计在另一个操作系统上的工作方式不同。VB.NET
- ios - 可操作的通知不显示动作 Swift 4
- mysql - MYSQL 在主查询中选择子查询结果的值
- python - 根据列表中的项目数创建框架
- javascript - 如何删除句子中特定单词的突出显示颜色保持其他单词突出显示
- django - Django 和 Pipelinedb:编程错误:列
.location_id 不存在