弹性导航设计：移动端CSS技巧

发表时间: 2024-05-03 11:30

实例:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>移动端弹性导航</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><style type="text/css">*{    margin: 0;    padding: 0;    list-style: none;}nav{    width: 100vw;    height: 8vh;    overflow-x: scroll;/*x方向超出有滚动条*/    background-image: linear-gradient(to right,rgba(255,255,255,0.5),transparent,rgba(255,255,255,0.5));}ul{    width: 340vw;    height: 8vh;    line-height: 8vh;    background-color: #3e98f0;}li{    color: #fff;    width: 20vw;    height: 8vh;    float: left;    text-align: center;}</style></head><body><nav><ul>    <li>推荐</li>    <li>本地</li>    <li>娱乐</li>    <li>军事</li>    <li>互联网</li>    <li>科技</li>    <li>生活</li>    <li>国际</li>    <li>国内</li>    <li>体育</li>    <li>汽车</li>    <li>财经</li>    <li>房产</li>    <li>时尚</li>    <li>教育</li>    <li>人文</li>    <li>图片</li></ul></nav><mark>参考文本</mark></body></html>

弹性导航设计：移动端CSS技巧

热门阅读

推荐阅读