首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

制作手机端九宫格

作者：农村的企业家 | 来源：互联网 | 2023-05-19 03:25
效果如上图示代码如下：1.首先是html代码：<bodystyle"background-color:#f4f5fa;"><divclass&q


                       


                       
通知通告

                   

               
               
               

  •                    

                           

                               
                           

                           
    外文办事

                       

                   

    •                
                   

  •                    

                           
                       

                       
    收文登记

                   

    •            


               


               
           

           
       
       


    2.下面是其的css样式：

     
    a:focus{background:none;}
    img{border:0;outline:none;}
    .apply-top{position:fixed;top:0;left:0; width:100%;height:50px;line-height:50px;font-size:17px;
              font-weight:bold;text-align:center;margin-bottom:20px;border-bottom:1px solid #dbdbdb;background-color:#fff;}
    .apply-top .right a{position:absolute;right:15px;top:0; color:#945d62;}
    .mobile{position:absolute;top:50px;left:0;width:100%;right:0;z-index:5;padding-bottom:56px;}
    .bg-gray{float:left;width:100%;height:30px;line-height:30px;background-color:#f4f5fa;text-indent:15px;}
    .applyrow{float:left;width:100%;}
    .applyrow li.left{float:left;width:25%;text-align:center;padding:10px 0;}
    .applyrow li.left .radius{float:left;margin-left:20px; height:50px;width:50px;border-radius:8px;background-color:#0099ff;}
    .applyrow li.left .radius img{float:left;height:50px;width:50px;border-radius:8px;}
    .applyrow li.left .lbltip{margin-left:-20px;margin-top:-1px; color:#fff;line-height:22px;}/*首页的提示*/
    .bg-orange{background-color:#ff9900;}
    /*中间列*/
    .applyrow li.right{float:left;width:60%;border-bottom:1px solid #e5e6e7;text-indent:5px;padding:10px 0;}
    .applyrow li.right .left{float:left;width:auto;font-weight:bold;}
    .applyrow li.right .right{float:right;width:auto;color:#8a8a8a;}
    .applyrow li.right .gray{color:#8a8a8a;}
    .applyrow li.right .zong{color:#e09347;}
    /*右侧第三列*/
    .applyrow li.last{float:right;width:15%;border-bottom:1px solid #e5e6e7;line-height:48px; text-align:center;padding:10px 0;}

    /*2016-12-26日修改成九宫格形式*/
    .ap-content{float:left;width:100%;}
    .ap-content ul,li{padding:0;margin:0;list-style:none;}
    .ap-content ul{float:left;width:100%; border-bottom:1px solid #e5e5e5;}
    .ap-content ul li{float:left;width:33.3333333333%;height:90px; text-align:center; background-color:#fff;}
    .ap-content ul li:hover{background-color:#f0f1f4;}
    .ap-content ul li .liLeft{height:90px; top:0;bottom:0;left:0;right:1px;border-right:1px solid #e3e3e3;}
    .ap_img{float:left;width:100%;height:40px;margin-top:15px; text-align:center;}
    .ap_img img{width:40px;height:40px;}
    .ap_title{float:left;width:100%;height:22px;line-height:22px; margin-top:5px; text-align:center;}


    注：并未用到js


    推荐阅读
    author-avatar
    农村的企业家
    这个家伙很懒，什么也没留下！
    Tags | 热门标签
    RankList | 热门文章
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有