css响应式侧导航 |css div渐变阴影

// HTML代码
<div class="side-nav">
<a href="#">首页</a>
<a href="#">博客</a>
<a href="#">工具</a>
<a href="#">关于大家</a>
</div>
// CSS代码
@media screen and (max-width: 768px) {
.side-nav {
width: 100%;
position: fixed;
z-index: 999;
background-color: #fff;
height: 100%;
top: 0;
left: -100%;
transition: all 0.3s ease-in;
}
.side-nav.show {
left: 0;
}
.side-nav a {
display: block;
text-align: center;
padding: 20px;
border-bottom: 1px solid #f2f2f2;
}
}
@media screen and (min-width: 768px) {
.side-nav {
width: 250px;
position: relative;
background-color: #f5f5f5;
height: 100%;
float: left;
}
.side-nav a {
display: block;
text-align: left;
padding: 10px 20px;
border-bottom: 1px solid #e5e5e5;
}
}

代码中，大家使用@media查询来对不同的屏幕尺寸应用不同的CSS样式。当屏幕宽度小于等于768px时，大家将侧导航的宽度设置为100%并固定在左侧，同时在左移动时应用过渡效果。同时，当侧导航处于显示状态时，添加.show类即可。大于768px时，则将侧导航的宽度设置为固定值，并左浮动。同时，为a标签添加样式，使其在移动设备上点击更加友好。

通过以上的CSS代码，大家不仅可以实现一个适应不同屏幕的响应式侧导航，并且还可以提供更好的用户体验，方便用户在移动端访问网站。