CSS是一种非常常用的网页样式设计语言，可以用来设置网页的样式和布局，包括颜色、字体、大小、位置等等。下面我们来介绍如何使用CSS设置全屏导航。

全屏导航的主要作用是帮助用户快速找到所需要的页面，并且在整个页面中占据较大的空间，使得用户能够更清楚地看到导航链接，提高用户使用网站的便利性。

下面是实现全屏导航的CSS代码：

/* 隐藏原本的导航条 */
nav {
display: none;
}
/* 设置全屏导航的背景色、字体和大小 */
.full-nav {
background-color: #333;
color: #fff;
font-size: 1.2rem;
}
/* 确定导航链接的位置 */
.full-nav li {
display: block;
padding: 10px;
}
/* 设置导航链接的样式 */
.full-nav li a {
color: #fff;
text-decoration: none;
}
/* 将导航链接居中 */
.full-nav ul {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
}

以上代码将原本的导航条隐藏，然后定义了一个class为full-nav的新导航条，使用了背景色、字体颜色和大小进行了样式设置，并使用了flex盒子布局将导航链接进行了居中对齐。

同时，我们还需要JavaScript代码来给全屏导航添加开闭功能：

/* 将导航条的display属性设置为none或flex来控制导航条显示与隐藏 */
function toggleNav() {
var fullNav = document.querySelector('.full-nav');
if (fullNav.style.display === 'none') {
fullNav.style.display = 'flex';
} else {
fullNav.style.display = 'none';
}
}
/* 给按钮添加点击事件，触发toggleNav()函数 */
var navBtn = document.querySelector('.nav-btn');
navBtn.addEventListener('click', toggleNav);

以上代码实现了全屏导航的开闭功能，当用户点击按钮时，会切换导航条的显示状态。

使用以上代码，可以轻松设置一个美观实用的全屏导航，提高网站的用户体验。