移动端&pc端九宫格页面

最新推荐文章于 2025-01-16 21:37:30 发布
最新推荐文章于 2025-01-16 21:37:30 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： 前端学习 文章标签： 九宫格 前端 table jqweui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39112803/article/details/85279436
版权

根据table表格和jqweui框架写的九宫格
jqweui框架开发学习地址：http://jqweui.com/
效果图：
在这里插入图片描述

代码如下：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/12/4
  Time: 13:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <script src="../js/jquery-2.1.1.min.js"></script>
    <script language="javascript" src="../js/LodopFuncs.js"></script>
    <script src="../js/CLodopfuncs.js"></script>

    <script src="../js/jquery-weui.min.js"></script>
    <link rel="stylesheet" href="../css/jquery-weui.css">
    <link rel="stylesheet" href="../css/jquery-weui.min.css">
    <style>
        td{
            text-align: center;
            border: 1px solid #dbdbdb;

            box-sizing: border-box;
            border-collapse:separate;
            margin: 0;padding: 0;


        }
        img{
            text-shadow: black 5px 3px 3px;
        }
        p{
            margin-top: 1px;
            color: #2c2c2c;
            text-decoration: #ffffff;
            /*text-shadow: black 5px 3px 3px;*/
        }
        a{text-decoration: none;}
    </style>
</head>
<body >
<div class="weui-grids" style="width: 100%;margin-top: 20%" >
    <table style="width: 100%;height: 55%;">
        <tr>
            <td style="width: 33%"><a href="" class="weui-grid js_grid" >
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-footer__text">
                    Button
                </p>
            </a></td>
            <td style="width: 33%"><a href="#" class="weui-grid js_grid">
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-grid__label">
                    Button
                </p>
            </a></td>
            <td style="width: 33%"><a href="#" class="weui-grid js_grid">
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-grid__label">
                    Button
                </p>
            </a></td>
        </tr>
        <tr>
            <td style="width: 33%"><a href="#" class="weui-grid js_grid">
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-grid__label">
                    Button
                </p>
            </a></td>
            <td style="width: 33%"><a href="#" class="weui-grid js_grid">
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-grid__label">
                    Button
                </p>
            </a></td>
            <td style="width: 33%"><a href="#" class="weui-grid js_grid">
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-grid__label">
                    Button
                </p>
            </a></td>
        </tr>
        <tr>
            <td style="width: 33%"><a href="#" class="weui-grid js_grid">
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-grid__label">
                    Button
                </p>
            </a></td>
            <td style="width: 33%"><a href="#" class="weui-grid js_grid">
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-grid__label">
                    Button
                </p>
            </a></td>
            <td style="width: 33%"><a href="#" class="weui-grid js_grid">
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-grid__label">
                    Button
                </p>
            </a></td>
        </tr>
    </table>
</div>
<script>

</script>
</body>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery-weui.js"></script>
</html>
移动端实现九宫格（适配任何张数的图片）
qq_52850749的博客
03-07 602
这里将view宽高做了一个适配，宽度在不同机型上面几乎都不一样，所以使用计算属性，先减去两边的一个边距，再减去九宫格的边距，右边距是根据索引来进行判断的，第三张第六张第九张是不需要右边距的，所以索引为258的都不需要，又减去了1rpx因为移动端rpx这个单位吧。很久没有写css的博客了，因为感觉平时写的都很基础，这次有个九宫格的需求用自己的方式实现了所以记录一下，可能会有不足的地方！下面这个是整个静态页面的全部代码，仅供参考。有任何问题请评论区留言或者私信我！
【鸿蒙实战开发】 —— 图片九宫格封装案例
huchenghe2的博客
11-26 862
本示例介绍使用( Flex )组件实现图片在不同个数情况下的布局效果(默认布局和自定义布局)。该场景多用于社交类应用。
十二宫格界面
12-27
十二宫格界面。 欢迎大家学习。
移动端的九宫格布局
m0_62330492的博客
09-13 257
在移动端如何使用九宫格布局 display flex 属性配合。
移动端九宫格布局
weixin_34336526的博客
10-17 360
最近做了一个移动端页面，要求适配手机屏幕，用到的是九宫格。在处理屏幕适配上花了不少时间，也在测试中找到最好的布局方法。 分享代码之余也能够在下一次的工作项目中避免犯相同的错误。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <ti...
移动端三列九宫格布局
2012013977的博客
05-19 1547
移动端三列九宫格布局
移动端商城九宫格抽奖活动页面设计代码
总结：本资源提供了一套完整的移动端九宫格抽奖活动页面代码，涵盖了前端开发的多个方面，包括jQuery的使用、响应式设计、用户体验设计以及活动页面的开发。开发者可以利用此资源作为搭建移动端营销活动的起点，并...
Vue播放m3u8视频格式的视频监控（适合移动端和pc端），用了Video.js，以及多视频列表循环播放代码，已测试，可播放
xingchen678的博客
09-16 7557
先介绍只有一个视频的代码 首先，我们需要在vue工程中安装video.js相关依赖。 npm install --save video.js npm install --save videojs-contrib-hls 接着，我们在需要播放视频的页面引入js对象 import videojs from 'video.js/dist/video.min' import 'v...
前端九宫格
05-27
它通常被用于移动端或者 PC 端的响应式网页设计，可以通过CSS3的flexbox或者grid布局实现。具体实现方式可以参考以下步骤： 1. HTML结构：使用div元素包裹九宫格中的每个内容块，使用CSS设置它们的位置和大小。 2....
鸿蒙OH实战开发：图片九宫格封装案例
最新发布
liuhaojiabin的博客
01-16 805
本示例介绍使用( Flex )组件实现图片在不同个数情况下的布局效果(默认布局和自定义布局)。该场景多用于社交类应用。
jQuery插件jQueryPopMenu点击按钮弹出悬浮九宫格菜单特效
08-08
jQuery插件jQueryPopMenu点击按钮弹出悬浮九宫格菜单特效
WeUI 最新版 js 及 css 下载
05-16
使用 <!-- head 中 --> <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css"> <!-- body 最后 --> [removed][removed] [removed][removed] <!-- 如果使用了某些拓展插件还需要额外的JS --> [removed][removed] [removed][removed]
九宫格布局，显示不同的图片和文字
05-30
因为项目需要九宫格布局做为首页，所有自己写了一个。
bootstrap 模板9个免费
05-28
bootstrap免费模板9个， 网上下载的9个免费 bootStrap模板，请放心使用
flyorsmobile国外漂亮的H5手机端九宫格模板
08-22
非常精美齐全的H5模板，九宫格，下载不后悔，首页界面，相册，新闻，博客，价格，关于，404，登录，注销等等，非常齐全的html模板，非常罕见
vue实现移动端九宫格布局
热门推荐
qq_35504206的博客
03-27 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,,initial-scale=1.0,minimum-scale=1.0,
实现PC上带有边框的九宫格样式
一个韩韩韩
04-20 517
1、
Android 主界面 九宫格 超灵活的配置
承諾、許卟哋
10-15 1563
activity： package com.android.fmis.client.activity; import java.lang.reflect.Field; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import android.app.Activi
九宫格样式
Just Do It
09-08 1284
NSInteger pageNum = ([self.dataArray count]) / iconCount; NSInteger num = ([self.dataArray count]) % iconCount > 0 ? 1 : 0; self.rootScrollView.contentSize = CGSizeMake((pageNum+num) *
响应式HTML网站模板：移动端&PC端兼容
资源摘要信息:"简洁数据功能图表管理模板-适配移动端&PC端-HTML网站源码.zip" 本资源是一套完整的网页模板的HTML源代码文件，其具备多方面的应用潜力和特性，主要包括以下知识点： 1. **HTML5技术应用**： - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值