制作手机端九宫格

来源：互联网发布：excel表格数据连接编辑：程序博客网时间：2024/04/30 10:20

效果如上图示

代码如下：

1.首先是html代码：

<body style="background-color: #f4f5fa;">
<div class="apply-top">
应用
</div>
<div class="mobile">
<div class="bg-gray">工作</div>


<div class="ap-content">
<ul style="border-top:1px solid #e6e5ea;">

<li><a href="notice.html">
<div class="liLeft">
<div class="ap_img">
<img src="images/apply-tongzhi.png" />
</div>
<div class="ap_title">通知通告</div>
</div>
</a></li>

<li><a href="process.html">
<div class="liLeft">
<div class="ap_img">
<img src="images/apply-waiwen.png" />
</div>
<div class="ap_title">外文办事</div>
</div>
</a></li>

<li><a href="ShouWenDJ.html">
<div class="ap_img">
<img src="images/apply-shouwen.png" />
</div>
<div class="ap_title">收文登记</div>
</a></li>
</ul>

<ul>

<li><a href="FaWenNG.html">
<div class="liLeft">
<div class="ap_img">
<img src="images/apply-fawen.png" />
</div>
<div class="ap_title">发文拟稿</div>
</div>
</a></li>

<li><a href="task.html">
<div class="liLeft">
<div class="ap_img">
<img src="images/apply-renwu.png" />
</div>
<div class="ap_title">任务管理</div>
</div>
</a></li>

<li><a href="meeting.html">
<div class="ap_img">
<img src="images/apply-huiyi.png" />
</div>
<div class="ap_title">会议安排</div>
</a></li>
</ul>

<ul>

<li><a href="#">
<div class="liLeft">
<div class="ap_img">
<img src="images/apply-zhiban.png" />
</div>
<div class="ap_title">值班安排</div>
</div>
</a></li>

<li><a href="zzjg_phone.html">
<div class="liLeft">
<div class="ap_img">
<img src="images/apply-dangjian.png" />
</div>
<div class="ap_title">机关党建</div>
</div>
</a></li>

<li></li>
</ul>
</div>

</div>
<script type="text/javascript">
//$(".ap-content ul:last-child").css("border-bottom", "none");
</script>
</body>

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

0 0