如何在网页中实现动态磁贴效果

html-css026

如何在网页中实现动态磁贴效果,第1张

可以通过HTML5以及CSS(外观)+JS(动态)来实现网页中的动态磁贴效果。

具体操作方法如下:

1、网站的动态磁贴受定期通知的支持,其中平台将以预定义的轮询间隔,从服务器上托管的轮询 URI中提取文本和图像,并在该网站的磁贴中显示这一内容。

2、通过以下三种方法之一,来添加网站的磁贴支持:通过网页上的 META标记、通过创建清单文件或通过 JavaScript API。

下面是网站使用 META标记设置其 Windows8.1的磁贴的示例:

<meta name="application-name" content=" CenturyCutCook"/><meta name="msapplication-TileColor" content="#009900"/>

<!-- Logos for all four tile sizes--><meta name="msapplication-square70x70logo" content="smalltile.png"/><meta name="msapplication-square150x150logo" content="mediumtile.png"/><meta name="msapplication-wide310x150logo" content="widetile.png"/><meta name="msapplication-square310x310logo" content="largetile.png"/>

<!-- Notification URL--><meta name="msapplication-notification" content="frequency=30polling-uri=1.xmlpolling-uri2=2.xmlpolling-uri3=3.xmlpolling-uri4=4.xmlpolling-uri5=5.xml"/>

此示例中定义的轮询 URI包含要显示的通知内容,并且将每半个小时轮询一次。因此,在特定的30分钟间隔内,用户可以查看最多5个来自此网站的更新,从而使您的用户始终可与您的网站保持密切联系。

4、轮询 URI包含遵循预定义模板的 XML标记。这些模板对于网站和 Windows应用都是相同的,并且可以控制磁贴的外观。模板可以是基于文本、基于图像或全部。下面的示例包括一个轮询 URI,其具有中等磁贴尺寸、宽形磁贴尺寸和大磁贴尺寸(注意大磁贴尺寸在 Windows中受支持,而非 Windows Phone)的绑定。

四种方式

比如想要做这样一个布局,有哪几种方式。

最简单、最快捷的方式。

element-ui提供的布局容器,el-header头标签,有height属性。el-aside左侧边栏标签,有width属性。el-footer底部标签,有height属性。其他样式可以通过class进行控制。

相对简单的方式。

利用el-col将每行分为24等分的特性,进行布局。其他属性通过class进行控制。

原生css布局的方式,float布局,也是最基础的方式。

将aside向左浮动,固定好宽度。main向右浮动,注意固定好宽度是 100vw - 左侧边栏的宽度 ,注意高度是 100vh - 上下header和footer高度之和 。footer也由于浮动而被挤到到最下面,这边指定float为left、right都是可以的,都可以达到浮动到最下方的效果。

原生css布局的方式,position布局,也是最基础的方式。

sideBar设置好宽度,利用绝对定位将固定在最左边(由于是绝对定位,所以注意已经脱离了文档流)。main设置margin-left为侧边栏宽度,这样就可以使得main不会被遮挡。footer设置为固定定位,bottom为0固定在底部。其他height、width的值也要注意计算哦~