如何使用jQuery创建单列网格

如何使用jQuery创建单列网格

在这篇文章中,我们将学习如何创建一个单列的网格。我们将讨论该任务的两种方法。

方法1:使用jQuery移动网格

jQuery Mobile是一套建立在jQuery JavaScript库之上的用户界面互动、效果、小工具和主题的策划。JQuery中的网格提供基于CSS的列,是响应性的。网格的宽度为100%,网格没有背景颜色、边框和填充。网格中包含元素,这些元素可以使用ui-block-a/b/c/d/e使其并排浮动。

步骤:

  • 通过CDN或本地将jQuery Mobile纳入HTML页面。
  • 在正文中,创建一个类别为ui-grid-solo的div元素。
  • 在这个div元素中,我们创建另一个div元素,其类别为ui-block-a
  • 就这样,我们的单列网格已经可以使用了。我们现在可以向这个单列网格添加任何东西。

示例 1:

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src=
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">
    </script>
</head>
 
<body>
    <div class="ui-grid-solo">
        <div class="ui-block-a">
            <a href="#" class="ui-btn
                ui-shadow ui-corner-all">
                Single Column Grid
            </a>
        </div>
    </div>
</body>
 
</html>

输出:

如何创建单列网格?

方法2:在CSS中使用网格显示属性

CSS网格提供了一个基于网格的布局系统,有行有列,使得设计网页时不需要浮动和定位。我们可以用它来创建我们的单列网格。

步骤:

  • 创建一个div,并将其显示方式设置为Grid,并将grid-template-columns属性设置为100%。
  • 现在在这个div里面再创建一个div,这将是一个单列。
  • 添加一些填充物和边框就可以了。

示例 2:

<!DOCTYPE html>
<html>
 
<head>
    <style>
        .wrapper {
            display: grid;
        }
 
        .column {
            border: 3px rgb(216, 117, 81) solid;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
 
<body>
    <div class="wrapper">
        <div class="column">Single-column Grid</div>
    </div>
</body>
 
</html>

输出:

如何创建单列网格?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程