使用CSS 客户化 SharePoint 2013 中的 promoted links 样式

来源：互联网发布：景区票务系统源码编辑：程序博客网时间：2024/06/13 23:59

本文讲述如何使用CSS客户化客户化 SharePoint 2013 中的 promoted links 样式。

promoted links 是SharePoint 中提供的一个图片链接的展示的 App，原始效果如下：

当鼠标 hover 到某个标题(Training sytem)上时：

但是实际开发过程中总会对布局和样式做一些客户化，比如将四个链接分为两行显示，第一图片个宽 100px, 第二个宽 200px，第三个图片宽200px,第四个图片宽 100px, 标题部分的背景色改为紫色：

下面分享做到以上效果的 CSS代码

            div.ms-promlink-body {               height: 200px;                width: 400px;            }            div.ms-tileview-tile-root:nth-of-type(3) {                height: 150px !important;                width: 200px !important;                 margin:10px;            }              div.ms-tileview-tile-root:nth-of-type(3) div.ms-tileview-tile-content,  div.ms-tileview-tile-root:nth-of-type(3) img                {                      height: 150px !important;                      width: 200px !important;                      left:0px;                      right:0px;                }                div.ms-tileview-tile-root:nth-of-type(3) div.ms-tileview-tile-detailsBox                {                    width: 200px !important;                }              div.ms-tileview-tile-root:nth-of-type(1) {                height: 150px !important;                width: 100px !important;                margin:10px;            }                div.ms-tileview-tile-root:nth-of-type(1) div.ms-tileview-tile-content,  div.ms-tileview-tile-root:nth-of-type(1) img                {                      height: 150px !important;                      width: 100px !important;                      left:0px;                      right:0px;                }                 div.ms-tileview-tile-root:nth-of-type(1) div.ms-tileview-tile-detailsBox                {                     width: 100px !important;                }            div.ms-tileview-tile-root:nth-of-type(2) {                height: 150px !important;                width: 200px !important;                margin:10px;            }             div.ms-tileview-tile-root:nth-of-type(2) div.ms-tileview-tile-content,  div.ms-tileview-tile-root:nth-of-type(2) img                {                      height: 150px !important;                      width: 200px !important;                      left:0px;                        right:0px;                }                 div.ms-tileview-tile-root:nth-of-type(2) div.ms-tileview-tile-detailsBox                {                    width: 200px !important;                }            div.ms-tileview-tile-root:nth-of-type(4) {                height: 150px !important;                width: 100px !important;                 margin:10px;            }              div.ms-tileview-tile-root:nth-of-type(4) div.ms-tileview-tile-content,  div.ms-tileview-tile-root:nth-of-type(4) img                {                      height: 150px !important;                      width: 100px !important;                      left:0px;                      right:0px;                }               div.ms-tileview-tile-root:nth-of-type(4) div.ms-tileview-tile-detailsBox                {                     width: 100px !important;                }.ms-tileview-tile-detailsBox{    background-color:#7a44a2;    font-weight:600;    font-size:16px;}

0 0