Enable JavaScript to interact with content and submit forms on Wolfram websites. Learn how

WebItem

表示含有 expr 的 HTML 元素.

WebItem[expr,options]

表示用指定的选项设置格式化的 HTML 元素.

WebItem[XMLElement[expr,…],options]

表示用 options 格式化的 XMLElement.

更多信息和选项

WebItem 用于设置表达式在网页上的呈现方式.
WebItem 通常嵌套在 WebRow 或 WebColumn 表达式中，以提供网页布局.
WebItem[expr,spec₁,spec₂,…] 允许 spec_i 为以下任意列表或序列：

	opt₁val₁,…	明确的选项
	"class"	来自当前样式表的已命名类别名称
	颜色指令	颜色 (Red、RGBColor[…]、…)
	大小指令	大小 (width、{width,height}、…)
	InterfaceSwitched[…]	根据环境切换格式
	Scaled[…]	相对于窗口大小的尺寸
	n （任意数字）	n 个像素大小的尺寸
	Italic	把文字变成斜体字
	Bold	文字加粗
	Underlined	在文字下面加下划线
	Dashed	用虚线绘制边框
	Dotted	用点线绘制边框
	Thickness[…],Thick,Thin	边框的粗细
	Mouseover[…]	鼠标悬停时切换格式

一些常见的明确选项包括：

	Background	背景颜色
	FontSize	字体大小
	FontFamily	字体系列
	FontSlant	斜体字 (Plain、Italic、…)
	FontWeight	字体的粗细 (Plain、Bold、…)
	Alignment	内容的对齐方式
	Scrollbars	是否显示滚动条
	Frame	是否在绘图周围绘制边框
	FrameStyle	边框的样式指定
	ImageMargins	在所显示内容周围留下的绝对边距

可以指定任意 CSS 属性选项，如 "box-shadow"  "10px 5px 5px black".

范例

打开所有单元关闭所有单元

基本范例 (1)

将一个 WebItem 部署到云端：

用 WebItem 部署一个列表，封装在 WebRow 中：

范围 (3)

WebItem 的大小通常被设为适合于内容：

可用第二个参数指定元素的大小：

可用列表指定宽度和高度：

允许简单的数学运算：

用 Automatic 指定大小应该适合于内容，或使用 Full 指定它应该适合所有剩余的空间：

比较不同的大小指定：

可直接设置任何所需的 CSS 属性：

可直接用 WebItem 来指定自定义的 HTML 元素的样式：

选项 (10)

Alignment (1)

定义一系列元素：

用 Alignment 选项指定内容在可用区域内的对齐方式：

Background (1)

可通过 Background 选项用任何颜色规范指定背景颜色，如 RGBColor：

可使用任意 CSS 规范：

FontFamily (1)

用 FontFamily 指定字体：

FontSize (1)

FontSize 选项接受各种指定并允许继承：

可使用任意 CSS 规范：

FontSlant (1)

用 FontSlant 指定文本中的斜体字符：

可使用 Italic 指令，而不必显式使用 FontSlant 选项：

FontWeight (1)

用 FontWeight 指定字体中字符的粗细：

可给出 Bold 指令，而不是显式使用 FontWeight 选项：

Frame (1)

在整个图形的周围绘制边框：

FrameStyle (1)

指定边框的整体样式：

ImageMargins (1)

设置所有的边都有 20 个点的边距：

Scrollbars (1)

指定 WebItem 的水平和垂直滚动条：

只使用水平滚动条：

属性和关系 (4)

WebItem 通常与 WebRow 和 WebColumn 一起使用以创建网页布局：

可用 InterfaceSwitched 根据视窗大小切换 WebItem 的内容：

也可以用 InterfaceSwitched 切换属性的值：

可用 Mouseover 封装任何指定：

可用 ExportString 将 WebItem 编译为 HTML：

可能存在的问题 (1)

CloudDeploy 在执行时上传根据页面表达式生成的 HTML：

用 Delayed 在每次网页请求时重新生成页面：

巧妙范例 (1)

部署一个简单的全屏页面布局：

用 Nest 创建透视效果：

顶部