如何在 jquery 移动网页周围创建边框？答案

【问题标题】：How to create border around jquery mobile webpage?如何在 jquery 移动网页周围创建边框？
【发布时间】：2012-09-04 14:57:21
【问题描述】：

我基本上是在尝试创建与下图类似的移动网页风格，并在页面边缘周围具有相同的边框和边距：

如果您注意到整个页面是如何被页面其余部分的某种边距包围并保持在适当位置的。我不确定是什么在控制它。

我从 interwebz 上复制了这个，但这是典型的 jquery 移动页面的外观：

我试图弄清楚如何添加边距，但我意识到我不知道如何更改 CSS 来控制实际块本身。

在我现在正在处理的 jquery 移动页面中，为了显示“标题”，它在代码中显示为：

<div data-role="header">

然后对于整个“页面”本身，除了数据角色和 div id 是页面之外，它是相同的。有没有人有 jquery mobile 的经验来谈论这样做的正确方法。我会粘贴 CSS，但我什至不了解这个“数据角色”概念及其含义，我习惯于“id”和“class”，我不知道如何控制盒子本身。

谁能指引我正确的方向？

【问题讨论】：

即使页面长于浏览器可以显示的内容，您是否希望显示边距？
你可以给div添加一个class或者id，不会有问题的。 jQuery Mobile 使用data- 属性来增强您的 HTML 并用 jQuery Mobile 生成的 HTML 替换/包装它。
是的，这是一个非常薄的边距。看起来可能只有 2 或 3 个像素。我希望它看起来与它的外观相似，外部显示边框有点不同，因为移动页面中的所有内容都非常相似。
@jeemusu，我为页面元素添加了 15px 的边距，类似于：
，但 ti 似乎什么也没做......
我遇到了类似的问题，在我的情况下，我只想要屏幕边缘周围的圆角（类似于 instagram）。我发现在 jQueryMobile 中实现它的唯一方法是在站点顶部覆盖一个具有固定位置的 png。不完全优雅，但它有效。

【解决方案1】：

您可以在脚本中编辑该 div 吗？怎么样

$('div[data-role=header]').addClass('foo');

然后你可以将任何你喜欢的 CSS 应用到 .foo

【讨论】：

您将如何准确关闭此标签？ 'foo' 只是某个地方的一个类，就像在样式表上说的那样， .foo {} ？
除了 data-role:header 之外还有另一个元素，它显示了主题。这是整个页面的DIV，我想知道是否可以对整个页面执行此操作？
我不太确定你在问什么......你不知道如何编写 CSS？您的 div 已经有一个 ID，因此要对其应用样式，您甚至不需要我的代码，只需使用 #page {background:red} - 或您想要应用的任何样式