微软卡片式通栏模块 · 云落的代码库

``` <style type="text/css"> /*! CSS Used from: https://edgetipscdn.microsoft.com/insider-site/css/app.1f3a432b.css */ a,div,h4,li,ol,p,span,strong,ul{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;text-decoration:none;background:0 0;font-size:inherit;min-width:0;min-height:0;max-width:auto;max-height:auto;width:auto;height:auto;} div,h4{position:static;} :focus,span{outline:0;} ol,ul{list-style:none;} *{box-sizing:border-box;} section{display:block;} a{background-color:transparent;} a:active,a:hover{outline:0;} b,strong{font-weight:700;} *{box-sizing:border-box;margin:0;} a{font-weight:400;color:#0267b8;text-decoration:none;} a:hover{color:#0074d9;text-decoration:underline;} p{padding:0;margin:0;line-height:1.35;} h4{font-family:sans-serif;} h4{padding:0;margin:0;} ol,ul{padding:0;margin:0;list-style:none;} ol li,ul li{padding:0;margin:0;} .row{position:relative;display:block;box-sizing:border-box;} .row{display:flex;max-width:1648px;width:100%;margin:0 auto;} .row{padding:0 24px;flex-wrap:nowrap;} @media (max-width:859px){ .row{padding:0 12px;} } @media (max-width:859px){ .row:not([class*=stack-]){flex-wrap:wrap;} } .snap-item{position:relative;display:block;width:400px;box-sizing:border-box;padding:0 24px;flex-grow:0;flex-shrink:0;flex-basis:auto;} .row.snap{max-width:1648px;} .row.snap{padding:0 24px;flex-wrap:wrap;} @media screen and (max-width:2047px){ .row.snap{max-width:1648px;} } @media screen and (max-width:1647px){ .row.snap{max-width:1248px;} } @media screen and (max-width:1247px){ .row.snap{max-width:848px;} } @media screen and (max-width:847px){ .row.snap{max-width:448px;} } .button{min-width:36px;height:36px;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:mwf-segoeui-web,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:36px;color:#262626;text-decoration:none;border-radius:0;outline:0;} ::-webkit-input-placeholder{color:#787878;} ::-moz-placeholder{color:#787878;} :-ms-input-placeholder{color:#787878;} :-moz-placeholder{color:#787878;} .button:focus,a:focus{outline:0;} .button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;min-width:9em;padding:0 2em;color:#fff;text-align:center;cursor:pointer;background-color:#0074d9;border:none;box-sizing:border-box;} .button:hover{color:#fff;text-decoration:none;background-color:#0267b8;} .button+.button{margin-left:4px;} ::-webkit-input-placeholder{color:#787878;} ::-moz-placeholder{color:#787878;} :-ms-input-placeholder{color:#787878;} :-moz-placeholder{color:#787878;} .pt-4x{padding-top:48px;} @media screen and (max-width:540px){ .phone-pt-0x{padding-top:0;} } h4{font-weight:600;line-height:1.25;font-family:inherit;letter-spacing:-.0125em;font-size:1.8666666667rem;} @media screen and (max-width:1280px){ h4{font-size:1.6rem;} } @media screen and (max-width:767px){ h4{font-size:1.3333333333rem;} } ::-webkit-input-placeholder{color:#a0a0a0;} ::-moz-placeholder{color:#a0a0a0;} :-ms-input-placeholder{color:#a0a0a0;} :-moz-placeholder{color:#a0a0a0;} .button{border-radius:2px;box-shadow:0 2px 8px 0 rgba(0,0,0,.2);transition:all 150ms;} .button:focus,.button:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,.2);} .button:active{box-shadow:0 0 4px 0 rgba(0,0,0,.2);} .button:disabled{color:#fff;background-color:rgba(22,82,143,.08);background-color:#f2f2f2;color:rgba(36,58,94,.85);color:#262626;box-shadow:none;cursor:default;position:relative;} .button:disabled:after{content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid rgba(36,58,94,.08);border-radius:inherit;} .button-smallcaps{min-width:8em;padding-right:1em;padding-left:1em;font-size:.7333333333rem;text-transform:uppercase;font-weight:700;height:30px;line-height:30px;} @media screen and (-ms-high-contrast:active){ .button{border:1px solid currentColor!important;} } .tips-section{background-color:#f2f2f2;} .snap-tip-card{-webkit-animation-name:card-filter-show;animation-name:card-filter-show;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-timing-function:cubic-bezier(.19,1,.22,1);animation-timing-function:cubic-bezier(.19,1,.22,1);opacity:0;height:456px;position:relative;margin-bottom:48px;} .snap-tip-card.tip-delay-0{-webkit-animation-delay:0s;animation-delay:0s;} .snap-tip-card.tip-delay-1{-webkit-animation-delay:150ms;animation-delay:150ms;} .snap-tip-card.tip-delay-2{-webkit-animation-delay:.3s;animation-delay:.3s;} .tips-container{min-height:504px;} .tips-container .snap-tip-card{position:absolute;} .tip-outer{position:relative;height:456px;} .tip{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;top:0;left:0;width:100%;min-height:456px;box-sizing:content-box;cursor:pointer;background-color:#fff;box-shadow:0 2px 8px 0 rgba(0,0,0,.05);} .tip-border{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid rgba(0,0,0,.2);transition:border 150ms;pointer-events:none;} .tip-media{position:absolute;top:0;right:0;left:0;height:201px;overflow:hidden;background-color:#f2f2f2;} .tip-media .tip-thumb{position:absolute;top:0;left:0;width:100%;} .tip-media .tip-thumb{top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-size:cover;} .tip-content{padding:24px 24px 36px;margin-top:201px;} .tip-category-row{position:relative;display:flex;justify-content:space-between;align-items:top;} .tip-category{margin-right:auto;position:relative;font-size:.8666666667rem;font-weight:700;text-transform:uppercase;margin-bottom:12px;} .tip-category span{position:relative;} .tip-category .tip-fixed-mobile,.tip-category .tip-new-mobile{display:none;} .tip-tags{display:flex;align-items:top;} .tip-tags span{top:-1px;position:relative;height:20px;font-size:11px;font-weight:700;line-height:20px;padding:0 6px 0 4px;text-transform:uppercase;} .tip-tags span:before{content:'#';font-weight:400;} .tip-tag-developer{color:#373276;background-color:rgba(100,44,145,.2);} .tip-tag-enterprise{color:#0267b8;background-color:rgba(0,119,217,.15);} [data-isfixed=true] .tip-category{color:#51ad0f!important;} .tip-title{font-weight:400;font-size:1.6rem;line-height:1.1;margin-bottom:12px;} .tip-desc{line-height:1.5;} .tip-desc .tip-desc-full p{margin-bottom:1em;} .tip-desc .tip-desc-full p:last-child{margin-bottom:0;} .tip-desc .tip-desc-full ol,.tip-desc .tip-desc-full ul{margin-top:1em;margin-bottom:.5em;} .tip-desc .tip-desc-full ol li,.tip-desc .tip-desc-full ul li{margin-left:18px;padding-right:6px;margin-bottom:.5em;list-style:initial;} .tip-desc .tip-desc-full ul li{list-style:disc;} .tip-desc .tip-desc-full ol li{list-style:decimal;} .tip-fixed,.tip-new{position:absolute;top:12px;right:-6px;height:24px;padding:0 12px;font-size:.8666666667rem;font-weight:700;line-height:24px;color:#000;text-transform:uppercase;background-color:#fdb814;box-shadow:0 2px 4px rgba(0,0,0,.1);} .tip-fixed:after,.tip-new:after{content:'';display:block;width:0;height:0;border-style:solid;-moz-transform:scale(.9999);border-width:6px 6px 0 0;border-color:#f15120 transparent transparent transparent;position:absolute;top:100%;right:0;display:block;} .tip-fixed{background-color:#83d40b;color:#202020;} .tip-fixed:after{content:'';display:block;width:0;height:0;border-style:solid;-moz-transform:scale(.9999);border-width:6px 6px 0 0;border-color:#004820 transparent transparent transparent;} .tip-more{position:relative;margin-top:6px;top:12px;display:none;font-size:.8666666667rem;font-weight:700;color:#0267b8;text-transform:uppercase;} .tip-more span{position:relative;display:inline-block;height:2em;} .tip-more span:after{opacity:0;position:absolute;top:100%;display:block;width:100%;margin-top:-.75em;font-family:icons;text-align:center;content:"";} .snap-tip-card:hover .tip-border{border:2px solid #0074d9;} .snap-tip-card:hover .tip-more span:after{opacity:1;} .tip-desc{position:relative;} .tip-desc .tip-desc-summary{display:none;} .tip-desc .tip-desc-full{position:relative;} .tip-desc .tip-action{margin-top:18px;} .snap-tip-card.tips-layout-ready .tip{height:456px;} .snap-tip-card.tips-layout-ready .tip-content{flex-direction:column;display:flex;height:255px;} .snap-tip-card.tips-layout-ready .tip-has-more .tip-content>*{flex:none;} .snap-tip-card.tips-layout-ready .tip-has-more .tip-content .tip-desc{height:100%;flex:auto;} .snap-tip-card.tips-layout-ready .tip-has-more .tip-desc-summary{display:block;display:-webkit-box;height:100%;overflow:hidden;-webkit-box-orient:vertical;} .snap-tip-card.tips-layout-ready .tip-has-more .tip-desc-summary.tip-desc-lines-2{-webkit-line-clamp:2;} .snap-tip-card.tips-layout-ready .tip-has-more .tip-desc-summary.tip-desc-lines-3{-webkit-line-clamp:3;} .snap-tip-card.tips-layout-ready .tip-has-more .tip-desc-summary.tip-desc-lines-4{-webkit-line-clamp:4;} .snap-tip-card.tips-layout-ready .tip-has-more .tip-desc-full{position:absolute;top:0;opacity:0;visibility:hidden;} .snap-tip-card.tips-layout-ready .tip-has-more .tip-desc-full .button{outline-color:#0077d9;outline-offset:2px;transition:none;} .snap-tip-card.tips-layout-ready .tip-has-more .tip-more{display:block;} .tip{opacity:0;visibility:hidden;} .snap-tip-card.tip-ready{position:static;} .snap-tip-card.tip-ready .tip{opacity:1;visibility:visible;transform-origin:center 201px;transition:all .4s cubic-bezier(.19,1,.22,1);} .snap-tip-card.tip-ready.snap-item{transition:z-index .4s step-end;} .snap-tip-card.tip-ready .tip-desc-full,.snap-tip-card.tip-ready .tip-desc-summary,.snap-tip-card.tip-ready .tip-fixed,.snap-tip-card.tip-ready .tip-new,.snap-tip-card.tip-ready .tip-thumb{transition:all .4s cubic-bezier(.19,1,.22,1);} .snap-tip-card.tip-ready .tip-content{pointer-events:none;} @media screen and (max-width:540px){ .snap-tip-card.tip-ready .tip-desc-full,.snap-tip-card.tip-ready .tip-desc-summary,.snap-tip-card.tip-ready .tip-fixed,.snap-tip-card.tip-ready .tip-new,.snap-tip-card.tip-ready .tip-thumb{transition:none!important;} .snap-tip-card.tip-ready .tip{transition:height .2s!important;} .tips-container{width:100%!important;max-width:none!important;padding:8px 8px 0!important;} .tips-container .snap-tip-card{height:auto;z-index:0!important;margin:0 0 8px 0;width:100%!important;flex-basis:100%;padding:0;background-color:transparent;} .tips-container .snap-tip-card .tip,.tips-container .snap-tip-card .tip-outer{height:auto;min-height:0;max-height:none;background:#fff;} .tips-container .snap-tip-card .tip{position:relative;transform:none;box-shadow:none;width:auto;} .tips-container .snap-tip-card .tip-content{position:relative;height:auto;margin:0;} .tips-container .snap-tip-card .tip-media{position:relative;height:auto;margin-top:auto;} .tips-container .snap-tip-card .tip-media:before{display:block;content:'';width:100%;padding-bottom:57.1428571429%;} .tips-container .snap-tip-card .tip-desc-full{position:relative;} .tips-container .snap-tip-card .tip-border{display:none;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded){-webkit-animation-delay:150ms;animation-delay:150ms;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded).tip-delay-0{-webkit-animation-delay:0s;animation-delay:0s;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded).tip-delay-1{-webkit-animation-delay:50ms;animation-delay:50ms;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded).tip-delay-2{-webkit-animation-delay:.1s;animation-delay:.1s;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip-border,.tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip-desc,.tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip-fixed,.tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip-more,.tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip-new{display:none;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip{height:44px;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip:before{display:block;position:absolute;content:"";font-family:icons;top:50%;transform:translateY(-50%);left:4px;font-size:16px;color:#0077d9;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip-card{padding:12px 12px 12px 90px;box-shadow:none;background:0 0;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip-media{position:absolute;left:0;width:initial;height:initial;overflow:visible;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip-media:before{display:none;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip-media .tip-thumb{width:48px;height:48px;background-size:cover;background-position:center center;border-radius:50%;position:absolute;top:10px;left:30px;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip-content{position:relative;left:0;right:0;padding:0;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip-content .tip-category{font-size:11px;margin-bottom:0;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip-content .tip-fixed-mobile,.tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip-content .tip-new-mobile{display:inline-block;color:#000;background-color:#fdb814;padding:1px 4px;border-radius:1px;box-shadow:0 1px 3px rgba(0,0,0,.1);margin-right:2px;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip-content .tip-fixed-mobile{background-color:#4eae1c;color:#fff;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip-content .tip-desc{display:none;} .tips-container .snap-tip-card.tip-ready:not(.tip-expanded) .tip-content .tip-title{font-size:1.2rem;margin-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:4px;padding-bottom:.2em;} } [data-categoryid=known-issue] .tip-thumb{background-image:url(https://edgetipscdn.microsoft.com/insider-site/images/tips/known-issue.4122f02e.png);} [data-categoryid=known-issue][data-isfixed=true] .tip-thumb{background-image:url(https://edgetipscdn.microsoft.com/insider-site/images/tips/known-issue-fixed.7fbb7689.png);} [data-categoryid=try-it] .tip-thumb{background-image:url(https://edgetipscdn.microsoft.com/insider-site/images/tips/try-it.018f1058.png);} [data-categoryid=get-involved] .tip-thumb{background-image:url(https://edgetipscdn.microsoft.com/insider-site/images/tips/get-involved.c7e2e608.png);} /*! CSS Used keyframes */ @-webkit-keyframes card-filter-show{0%{opacity:0;visibility:hidden;transform:translateY(24px);}100%{opacity:1;visibility:visible;transform:none;}} @keyframes card-filter-show{0%{opacity:0;visibility:hidden;transform:translateY(24px);}100%{opacity:1;visibility:visible;transform:none;}} </style> <section class="tips-section pt-4x phone-pt-0x"> <div class="tips-container snap row"> <div class="snap-item snap-tip-card tips-layout-ready tip-ready tip-delay-0" data-categoryid="get-involved" data-tipid="97" data-isnew="true" style="z-index: 9999;" tabindex="0" aria-expanded="false"> <div class="tip-selected-overlay"></div> <div class="tip-outer"> <div class="tip tip-card tip-has-more" data-height="677" style=""> <div class="tip-media"> <div class="tip-thumb" style="background-image:url('https://edgetipscdn.microsoft.com/insider-site/images/tips/17.7df93e04.png') !important;"></div> </div> <div class="tip-border"></div> <div class="tip-content"> <div class="tip-category-row"> <div class="tip-category" style="color: #642C91"> <span class="tip-new-mobile">全新</span> <span>参与进来</span> </div> </div> <h4 class="tip-title spacenator" lang="en">Dev channel update for October 1</h4> <div class="tip-desc"> <div class="tip-desc-summary tip-desc-lines-3" lang="en" aria-hidden="false" style="max-height: 67px;">Hello insiders, you've been updated to the most recent build here in the Dev channel. This week we're excited to highlight the recent update to the n</div> <div class="tip-desc-full" lang="en" aria-hidden="true"> <div aria-label=""><p>Hello insiders, you've been updated to the most recent build here in the Dev channel. This week we're excited to highlight the recent update to the new tab page, which now supports dark theme a</p></div> <a href="https://go.microsoft.com/fwlink/?linkid=2104957" class="tip-action button button-smallcaps" target="_blank">Change Summary</a> </div> </div> <div class="tip-more"> <span>更多</span> </div> </div> <div class="tip-new">全新</div> </div> </div> </div><div class="snap-item snap-tip-card tips-layout-ready tip-ready tip-delay-0" data-categoryid="get-involved" data-tipid="98" data-isnew="true" style="z-index: 9998;" tabindex="0" aria-expanded="false"> <div class="tip-selected-overlay"></div> <div class="tip-outer"> <div class="tip tip-card tip-has-more" data-height="542" style=""> <div class="tip-media"> <div class="tip-thumb" style="background-image:url('https://edgetipscdn.microsoft.com/insider-site/images/tips/we-are-listening.854a98f9.png') !important;"></div> </div> <div class="tip-border"></div> <div class="tip-content"> <div class="tip-category-row"> <div class="tip-category" style="color: #642C91"> <span class="tip-new-mobile">全新</span> <span>参与进来</span> </div> </div> <h4 class="tip-title spacenator" lang="en">Read the latest top feedback summary</h4> <div class="tip-desc"> <div class="tip-desc-summary tip-desc-lines-3" lang="en" aria-hidden="false" style="max-height: 67px;">Hello insiders, the latest top feedback summary is here. In this week's edition we highlight feedback which has been addressed on the new tab page, as well as </div> <div class="tip-desc-full" lang="en" aria-hidden="true"> <div aria-label=""><p>Hello insiders, the latest top feedback summary is here. In this week's edition we highlight feedback which has been addressed on the new tab page, as well as the </p></div> <a href="https://go.microsoft.com/fwlink/?linkid=2105420" class="tip-action button button-smallcaps" target="_blank">Top feedback</a> </div> </div> <div class="tip-more"> <span>更多</span> </div> </div> <div class="tip-new">全新</div> </div> </div> </div><div class="snap-item snap-tip-card tips-layout-ready tip-ready tip-delay-0" data-categoryid="try-it" data-tipid="99" data-isnew="true" style="z-index: 9997;" tabindex="0" aria-expanded="false"> <div class="tip-selected-overlay"></div> <div class="tip-outer"> <div class="tip tip-card tip-has-more" data-height="911.5" style=""> <div class="tip-media"> <div class="tip-thumb" style="background-image:url('https://edgetipscdn.microsoft.com/insider-site/images/tips/new-tab-page-dark.8992c6cb.png') !important;"></div> </div> <div class="tip-border"></div> <div class="tip-content"> <div class="tip-category-row"> <div class="tip-category" style="color: #088F86"> <span class="tip-new-mobile">全新</span> <span>试用</span> </div> </div> <h4 class="tip-title spacenator" lang="en">New features for the new tab page</h4> <div class="tip-desc"> <div class="tip-desc-summary tip-desc-lines-3" lang="en" aria-hidden="false" style="max-height: 67px;">We’re pleased to announce some new features for the new tab page (or as we call it here on the Microsoft Edge team, the “NTP”). Open a new tab to check it out:You can further customize your NTP with various options for adjusting the visibility of content. Just click on the gear </div> <div class="tip-desc-full" lang="en" aria-hidden="true"> <div aria-label=""><p>We’re pleased to announce some new features for the new tab page (or as we call it here on the Microsoft Edge team, the “NTP”). Open a new tab to check it </p></div> </div> </div> <div class="tip-more"> <span>更多</span> </div> </div> <div class="tip-new">全新</div> </div> </div> </div><div class="snap-item snap-tip-card tips-layout-ready tip-ready tip-delay-0" data-categoryid="try-it" data-tipid="100" data-isnew="true" style="z-index: 9996;" tabindex="0" aria-expanded="false"> <div class="tip-selected-overlay"></div> <div class="tip-outer"> <div class="tip tip-card tip-has-more" data-height="944" style=""> <div class="tip-media"> <div class="tip-thumb" style="background-image:url('https://edgetipscdn.microsoft.com/insider-site/images/tips/languages.5c0b791e.png') !important;"></div> </div> <div class="tip-border"></div> <div class="tip-content"> <div class="tip-category-row"> <div class="tip-category" style="color: #088F86"> <span class="tip-new-mobile">全新</span> <span>试用</span> </div> </div> <h4 class="tip-title spacenator" lang="en">Insider channels are available in 96 languages</h4> <div class="tip-desc"> <div class="tip-desc-summary tip-desc-lines-3" lang="en" aria-hidden="false" style="max-height: 67px;">To insiders from around the world, did you know that the insider channels can now be displayed in 96 different languages? If you've been an insider for a long time, you may not have noticed when your language came online.To see if your language is available, open the Settings </div> <div class="tip-desc-full" lang="en" aria-hidden="true"> <div aria-label=""><p>To insiders from around the world, did you know that the insider channels can now be displayed in 96 different languages? If you've been an insider for a long time, you may not have noticed </p></div> </div> </div> <div class="tip-more"> <span>更多</span> </div> </div> <div class="tip-new">全新</div> </div> </div> </div> </div> </section> ``` ## 实际效果 ![0f4625db8ff13d89b927d4195bdb4a1e.png](https://ae06.alicdn.com/kf/Ue1215654778e44d49a5b371ad39a036eF.png)