演示
后台自定义模板设置仅手机
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动导航示例</title>
<style>
/*手机导航*/
.mrxu_link {
border-radius: 17px;
box-shadow: 1px 0px 7px #94cbfb66;
padding: 5px;
}
.mrxu_link dl {
box-shadow: 1px 1px 1px #e7f4ff;
border-radius: 12px;
background-color: #fff;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 17px;
}
.mrxu_link dl dd {
display: inline-block;
width: 18.5%;
margin-bottom: 6px;
margin-top: 6px;
}
.mrxu_link dl dd a {
display: block;
}
.mrxu_link dl dd a i {
display: block;
width: 45px;
height: 45px;
margin: 0 auto 5px;
}
.mrxu_link dl dd a p {
height: 20px;
line-height: 20px;
font-size: 12px;
color: #666;
text-align: center;
overflow: hidden;
}
.mrxu_link dl dd.xu_link_1 i {
background: url(image/10019.png) center no-repeat;
background-size: 45px;
}
/* 增加其他的图标样式 */
.mrxu_link dl dd.xu_link_2 i { background: url(image/100255.png) center no-repeat; background-size: 45px; }
.mrxu_link dl dd.xu_link_3 i { background: url(image/10028.png) center no-repeat; background-size: 45px; }
.mrxu_link dl dd.xu_link_4 i { background: url(image/10018.png) center no-repeat; background-size: 45px; }
.mrxu_link dl dd.xu_link_5 i { background: url(image/10018.png) center no-repeat; background-size: 45px; }
.mrxu_link dl dd.xu_link_6 i { background: url(image/10018.png) center no-repeat; background-size: 45px; }
.mrxu_link dl dd.xu_link_7 i { background: url(image/10018.png) center no-repeat; background-size: 45px; }
.mrxu_link dl dd.xu_link_8 i { background: url(image/10018.png) center no-repeat; background-size: 45px; }
.mrxu_link dl dd.xu_link_9 i { background: url(image/10018.png) center no-repeat; background-size: 45px; }
.mrxu_link dl dd.xu_link_10 i { background: url(image/10018.png) center no-repeat; background-size: 45px; }
/* 更多的图标样式，请根据需要继续添加 */
.mrxu_link a {
color: inherit;
text-decoration: none;
vertical-align: top;
}
/*其他样式*/
</style>
</head>
<body>
<div class="mrxu_link newmrxu_link">
<dl>
<dd class="xu_link_1"><a href="#"><i></i><p>图片</p></a></dd>
<dd class="xu_link_2"><a href="/shop"><i></i><p>商品</p></a></dd>
<dd class="xu_link_3"><a href="/vips"><i></i><p>会员</p></a></dd>
<dd class="xu_link_4"><a href="/circle"><i></i><p>贴吧</p></a></dd>
<dd class="xu_link_5"><a href="/document"><i></i><p>文档</p></a></dd>
<dd class="xu_link_6"><a href="/verify"><i></i><p>认证</p></a></dd>
<dd class="xu_link_7"><a href="/distribution"><i></i><p>推广</p></a></dd>
<dd class="xu_link_8"><a href="/newsflashes"><i></i><p>新闻</p></a></dd>
<dd class="xu_link_9"><a href="/infomation"><i></i><p>供求</p></a></dd>
<dd class="xu_link_10"><a href="/ask"><i></i><p>问答</p></a></dd>
<!-- 其他导航项 -->
</dl>
<!-- 可以根据需要添加更多的导航项 -->
</div>
</body>
</html>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
