返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: div+css >

手机版九宫格制作

2020-05-17 文章标签: 插件 九宫格 浏览次数:

我们讲解下在手机端制作九宫格效果,九宫格经常在手机端首页和APP首页里面遇到,怎么制作呢

HTML5教程

我们看看页面效果

九宫格效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/517/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/517/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/517/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/517/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-position="fixed">
        <a href="#">返回</a>    
        <h1>九宫格界面</h1>    
        <a href="#">设置</a>
    </div>
    <div data-role="content">
        <fieldset class="ui-grid-b">
            <div class="ui-block-a">
                <img src="//freemuban.com/js/517/1.png" width="100%" height="100%"/>
            </div>
            <div class="ui-block-b">
                <img src="//freemuban.com/js/517/2.png" width="100%" height="100%"/>
            </div>
            <div class="ui-block-c">
                <img src="//freemuban.com/js/517/3.png" width="100%" height="100%"/>
            </div>
            <div class="ui-block-a">
                <img src="//freemuban.com/js/517/4.png" width="100%" height="100%"/>
            </div>
            <div class="ui-block-b">
                <img src="//freemuban.com/js/517/5.png" width="100%" height="100%"/>
            </div>
            <div class="ui-block-c">
                <img src="//freemuban.com/js/517/6.png" width="100%" height="100%"/>
            </div>
            <div class="ui-block-a">
                <img src="//freemuban.com/js/517/7.png" width="100%" height="100%"/>
            </div>
            <div class="ui-block-b">
                <img src="//freemuban.com/js/517/8.png" width="100%" height="100%"/>
            </div>
            <div class="ui-block-c">
                <img src="//freemuban.com/js/517/9.png" width="100%" height="100%"/>
            </div>
        </fieldset>
    </div>
</div>
</body>
</html>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。