css 好看网站导航 |js怎么获取元素css属性值

.nav{
display:flex;
justify-content:space-between;
align-items:center;
background-color:#f5f5f5;
height:50px;
padding:0 30px;
}
.nav li{
list-style:none;
}
.nav a{
text-decoration:none;
color:#333;
font-size:16px;
margin:0 10px;
transition:color 0.3s ease;
}
.nav a:hover{
color:#ff6600;
}

以上是一个比较基本的网站导航的CSS代码，其中利用了flex布局对导航进行了排版，并设置了背景色和高度，使导航更加醒目并且易于辨认。同时使用了文字颜色的渐变效果，增加了用户与网站之间的交互性。

另外，如果想要使导航更加时尚，也可以通过CSS设置渐变背景色、阴影效果、字体动画等效果，使网站导航更加优雅。但需要注意的是，这些效果不宜过多，以免干扰用户体验。

.nav{
display:flex;
justify-content:space-between;
align-items:center;
background:linear-gradient(to right,#74ebd5,#ACB6E5);
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
height:70px;
padding:0 30px;
}
.nav a{
text-decoration:none;
color:white;
font-size:20px;
margin:0 10px;
transition:color 0.3s ease;
}
.nav a:hover{
color:#ff6600;
animation: shake 0.5s;
-webkit-animation: shake 0.5s;
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-5px);
}
20%, 40%, 60%, 80% {
transform: translateX(5px);
}
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-5px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(5px);
}
}

在以上代码中，利用了线性渐变的背景、阴影、字体动画等特效，使导航更加时尚，而字体动画使用户与网站之间的交互增加，更具吸引力。但同时也需要注意，特效不宜过多，以免过于花哨。

在编写CSS时，还需要注意浏览器兼容性和页面响应式设计，以免特效无法显示或在不同的设备上显示不正常。