导航栏干扰内容
导航栏干扰内容
提问于 2021-01-07 01:44:12
我目前正在开发我的第一个网站，而且我还是个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>
回答 1
Stack Overflow用户
发布于 2021-01-07 01:51:55
Sry没有给你一个直接的答案，但这里有一个提示:尝试使用任何框架(如MDP，我是该框架的作者)或引导程序为您的项目。如果你使用它，我建议你使用网格来使你的网站看起来更好。
编辑: Ok！这是一个与您需要https://todoapp.rf.gd/framework/beta/templates/10298/#的网站非常相似的网站
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65600758
复制相关文章
相似问题
腾讯云开发者
