创建了一个导航栏，其中包含8个列表项。CSS样式定义了导航栏的基本样式，并使用媒体查询来调整不同分辨率下的布局：
当屏幕宽度大于1200px时，默认显示8列。
当屏幕宽度在1200px到992px之间时，导航栏变为4列。
当屏幕宽度在992px到768px之间时，导航栏变为3列。
当屏幕宽度在768px到576px之间时，导航栏变为2列。
当屏幕宽度小于576px时，导航栏完全隐藏。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigationtitle>
<style>
body {
font-family: Arial, sans-serif;
}
nav {
display: flex;
background-color: #f8f9fa;
padding: 10px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
nav li {
margin: 0 10px;
padding: 5px 10px;
background-color: #007bff;
color: white;
}
/* 媒体查询：当屏幕宽度小于1200px时，显示4列 */
@media (max-width: 1199px) {
nav ul {
flex-wrap: wrap;
}
nav li {
flex: 1 0 25%; /* 4列 */
}
}
/* 媒体查询：当屏幕宽度小于992px时，显示3列 */
@media (max-width: 991px) {
nav li {
flex: 1 0 33.33%; /* 3列 */
}
}
/* 媒体查询：当屏幕宽度小于768px时，显示2列 */
@media (max-width: 767px) {
nav li {
flex: 1 0 50%; /* 2列 */
}
}
/* 媒体查询：当屏幕宽度小于576px时，不显示导航栏 */
@media (max-width: 575px) {
nav {
display: none;
}
}
style>
head>
<body>
<nav>
<ul>
<li>首页li>
<li>产品li>
<li>服务li>
<li>关于我们li>
<li>联系方式li>
<li>支持li>
<li>博客li>
<li>新闻li>
ul>
nav>
<p>页面内容...p>
body>
html>