数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何用CSS创建响应式头部？
在一个网页上，首先可见的是头部，然后是内容，最后是页脚。头部包含网站的logo和菜单。它也可以在右侧包含一个搜索框。菜单使用<nav>元素创建。选中的链接始终高亮显示。悬停任何链接时，该特定链接的颜色都会改变。让我们看看如何在网页上使用CSS创建一个响应式头部。
设置导航栏用于logo和菜单
<nav>元素用于放置logo和菜单。这两者都使用<a>元素设置 -
<nav>
<a class="links logo" href="#">Company Logo/Image</a>
<div class="rightSection">
<a class="selected links" href="h">Home</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">About Us</a>
<a class="links" href="#">More Info</a>
<a class="links" href="#">Register</a>
</div>
</nav>
菜单定位
要正确定位菜单，请使用overflow属性并将其设置为hidden -
nav {
overflow: hidden;
background-color: #330b7c;
padding: 10px;
}
菜单链接定位
菜单链接位于<nav>的左侧，使用float属性，其值为left。要删除链接的默认下划线，请使用text-decoration属性并将其设置为none -
.links {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
float: left;
color:white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
选中链接
选中的链接应该有不同的背景色和字体颜色 -
nav .selected {
background-color: dodgerblue;
color: white;
}
设置响应式
当网页浏览器设置为小于870像素时，响应式效果生效。display属性设置为block值。float属性设置为none -
@media screen and (max-width: 870px) {
nav .links {
float: none;
display: block;
text-align: left;
}
示例
以下是使用CSS创建响应式头部的代码：
<!DOCTYPE html>
<html>
<head>
<style>
* {box-sizing: border-box;}
nav {
overflow: hidden;
background-color: #330b7c;
padding: 10px;
}
.links {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
float: left;
color:white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
nav .logo {
font-size: 25px;
font-weight: bold;
}
nav .links:hover {
background-color: rgb(214, 238, 77);
color: rgb(42, 10, 94);
}
nav .selected {
background-color: dodgerblue;
color: white;
}
.rightSection {
float: right;
}
@media screen and (max-width: 870px) {
nav .links {
float: none;
display: block;
text-align: left;
}
.rightSection {
float: none;
}
}
</style>
</head>
<body>
<nav>
<a class="links logo" href="#">Company Logo/Image</a>
<div class="rightSection">
<a class="selected links" href="h">Home</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">About Us</a>
<a class="links" href="#">More Info</a>
<a class="links" href="#">Register</a>
</div>
</nav>
</body>
</html>
更新于：2023年12月8日
4K+ 次浏览
广告