如何使用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>
输出: