如何在Nike Run Club页面上执行列表css

How to do the list css on the Nike Run Club page

本文关键字：执行 列表 css Club Nike Run      更新时间：2023-09-26

我在Nike Run Club页面上看到了一个漂亮的页面。

我特别喜欢它的CSS，它布局了它的列表。

在电脑上，它显示得像Gallery，但在手机上，它则显示得像列表。

我做了什么：

  1. 我试图在事件列表中找到css类（通过使用Chrome检查器）
  2. 我发现这个类叫做：events group
  3. 我试图找到这个类的位置，但该页面上引用的所有css文件都被缩小了，所以我不知道如何弄清楚

这是网址：Nike Run Club

更新

多亏了mkaminsky，我使用该网站来清除这些文件，但仍然找不到事件组类的位置。

所以我想用Bootstrap来做这件事？

自己动手

我个人喜欢使用flexbox。

HTML

<div id="gallery">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
</div>

CSS

#gallery{
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
} 
.item{
    width: 25%;
}
@media screen and (max-width: 768px) { /*when less than 768px*/
    .item{
        width: 100%;
    }
}

查看他们做了什么

有一个静态CSS文件(https://www.nike.com/events-registration/client-dist/styles/multi-main.min.css?v=1427736422699)。您可以将其加载到http://unminify.com/.

但是，会加载其他一些文件。

if (window.nike && window.nike.exp && window.nike.exp.script && window.nike.exp.script.device_detect && window.nike.exp.script.device_detect.isMobile()) {
        // mobile
        nike.events.gadgetCss = "<link rel='"stylesheet'" type='"text/css'" media='"screen'" href='"" + nike.events.PROTOCOL + "//m.nike.com/" + nike.events.COUNTRY + "/" + nike.events.LANGUAGE_CODE + "/style.css?app=nikestore&version=latest&assets=skin_onenike,nike,nike.gadget.mobile.OneNikeFooter,nike.gadget.mobile.OneNikeNav,nike.style.nsg.nsg-mobile,nike.style.exp.exp-mobile,skin.onenike_mobile&assetType=STYLE'">";
        nike.events.gadgetJs = "<script src='"" + nike.events.PROTOCOL + "//m.nike.com/" + nike.events.COUNTRY + "/" + nike.events.LANGUAGE_CODE + "/NikeScriptManager.js?app=nikestore&version=latest&assets=nike,nike.gadget.mobile.OneNikeFooter,nike.gadget.mobile.OneNikeNav,nike.geo.StoreConfiguration&assetType=SCRIPT'"><'/script>";
    } else {
        // desktop
        nike.events.gadgetCss = "<link rel='"stylesheet'" type='"text/css'" media='"screen'" href='"" + nike.events.PROTOCOL + "//" + nike.events.STORE_HOST + "/" + nike.events.COUNTRY + "/" + nike.events.LANGUAGE_CODE + "/style.css?app=nikestore&version=latest&assets=nike,nike.gadget.OneNikeNav,nike.gadget.OneNikeFooter,nike.style.nsg.nsg-desktop,nike.style.exp.exp-desktop&assetType=STYLE'">";
        nike.events.gadgetJs = "<script src='"" + nike.events.PROTOCOL + "//" + nike.events.STORE_HOST + "/" + nike.events.COUNTRY + "/" + nike.events.LANGUAGE_CODE + "/NikeScriptManager.js?app=nikestore&version=latest&assets=nike,nike.fonts.Selector,nike.fonts.glyphPolyfill,nike.gadget.OneNikeNav,nike.gadget.OneNikeFooter,yepnope.injectCss&assetType=SCRIPT'"><'/script>";
    }
document.write(nike.events.gadgetCss);
document.write(nike.events.gadgetJs);

所以你可能也想调查一下。

它们在815px处有一个断点，您可以使用媒体查询使列在断点处折叠。

如果你使用的是像bootstrap或foundation这样的框架，那应该不是问题。

您可以使用Online Minifiers取消CSS的组合。

以下是未经优化的版本：http://pastebin.com/4dNYyET1

我使用的步骤：

  1. 查看网站上的来源
  2. 在标题中，找到样式表
  3. 打开样式表，复制内容
  4. 将内容粘贴到取消镜像中

关于事件组类：sevents-group类在CSS或JS中完全未使用。它只是一个div，用于对所有三个日历事件进行分组。

我假设你正试图弄清楚如何安排整个活动。。。

inner-wrapper：文本垂直居中

multi-card：构建/格式化每张卡的

ul：（事件组）不显示任何项目符号

以下是他们所做的最简单的形式：http://jsfiddle.net/mfLaup65/

如果你想让它更具包容性，你可以复制他们所有的CSS。

就我个人而言，我认为你应该看看Bootstrap。它有许多类似的功能。耐克的非常精确，有很多css可以做一些非常简单的事情。

相关文章：