html - 如何使导航响应?
问题描述
我试图让我的导航响应,但我无法管理。我已经尝试了一些你可以在我的 style.css 中看到的东西。我的标题已经响应,但我无法管理导航。
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:amount}figure{margin:0;padding:0;}
body
{
background-color: #F9F9F9;
height: 100%;
font-size: 20px;
top: 0;
left: 0;
}
header
{
width: 100%;
height: 300px;
background: url("images/woman-wearing-white-long-sleeved-shirt-973401.jpg");
background-repeat: no-repeat;
background-repeat: no-repeat;
background-position: center 35%;
background-size: cover;
overflow: hidden;
}
.opacity
{
width: 100%;
height: 300px;
background: rgba(96, 59, 59, 0.7);
overflow: hidden;
}
.navigation
{
width: 700px;
margin: auto;
background-color: black;
color: white;
text-align: center;
border-radius: 30px;
margin-top: -20px;
margin-right: 25%;
}
.navigation_list
{
list-style-type: none;
padding: 10px;
}
.navigation_list_item
{
display: inline-block;
padding-left: 20px;
padding-right: 20px;
}
@media screen and (max-width: 768px){
header{
width: 100%;
}
.opacity{
width: 100%;
}
.logo{
width: 474px;
height: 369px;
background-repeat: no-repeat;
background-size: 50%;
margin-left: 30%;
margin-top: 50px;
}
.navigation
{
width: 700px;
margin: auto;
background-color: black;
color: white;
text-align: center;
border-radius: 30px;
margin-top: -20px;
margin-right: 25%;
}
.navigation_list
{
list-style-type: none;
padding: 10px;
}
.navigation_list_item
{
display: inline-block;
padding-left: 20px;
padding-right: 20px;
}
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<body>
<header>
<div class="opacity">
<div class="logo">
</div>
</div>
</header>
<section>
<nav class="navigation">
<ul class="navigation_list">
<li class="navigation_list_item">Over ons</li>
<li class="navigation_list_item">Filosofie</li>
<li class="navigation_list_item">Prijslijst</li>
<li class="navigation_list_item">Specialisaties</li>
<li class="navigation_list_item">Contact</li>
</ul>
</nav>
</section>
</body>
</html>
我希望有人可以帮助我解决这个问题。感谢您的努力!
解决方案
你需要做这样的事情
.navigation
{
width: 100%;
margin: auto;
color: white;
text-align: center;
margin-top: -20px;
margin-right: 25%;
}
.navigation_list
{
max-width: 700px;
list-style-type: none;
padding: 10px;
background-color: black;
margin: 0 auto;
border-radius: 30px;
}
使导航 100% 并将宽度移动到 ul (导航列表)并将边距设置为 0 auto
还有一件事要注意,您需要将视口添加到页面的头部
<meta name="viewport" content="width=device-width, initial-scale=1.0">
为了使您的页面具有响应性,您可以在此处阅读有关视口的信息
希望这有帮助
推荐阅读
- reactjs - ReactJS:导入数据后重新绘制图表不呈现线条
- bash - Bash 提示密码后如何输入命令?
- windows-10 - AutoHotKey 快捷键在一段时间后停止工作
- javascript - document.getElementById 用于最近生成的元素
- sql - 使用 SQL Server 将字符串数据块解析为表格数据集
- python - 替换模式之间的字符
- awk - 从多个文件中读取列并将它们打印在单独的列中
- javascript - 动态设置 next.js baseUrl/basePath 以在微前端中使用
- python - 为什么 cv2.filter2D() 没有按预期工作?
- reactjs - github 页面上的 React 应用部署显示空白页面