Javascript 如何在Nike Run Club页面上列出css

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

我特别喜欢它的CSS，它可以布局它的列表

在PC上，它显示为图库，但在移动设备上，它显示为列表

我所做的：

我试图找出事件列表上的css类（通过使用Chrome Inspector）

我发现这个类叫做：事件组

我试图找到这个类的位置，但是该页面上引用的所有css文件都被缩小了，所以我不知道如何找到它

以下是网址：

更新

多亏了mkaminsky，我使用该网站取消了这些文件的整理，但仍然找不到事件组类的位置

---

因此，我正在考虑使用Bootstrap来实现这一点？

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

---

如果你使用一个像Bootstrap或基金会这样的框架，那就不应该是个问题。

< P> <强> >自己动手> /强>

我个人喜欢使用flexbox

HTML

看看他们做了什么

有一个静态CSS文件（）。你可以把它装进电脑里

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

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);

if（window.nike&&window.nike.exp&&window.nike.exp.script&&window.nike.exp.script.device\u detect&&window.nike.exp.script.device\u detect.isMobile（））{
//流动的
nike.events.css=“”；
nike.events.gadgetJs=“”；
}否则{
//桌面
nike.events.css=“”；
nike.events.gadgetJs=“”；
}
document.write（nike.events.gadgetCss）；
document.write（nike.events.gadgetJs）；

因此，您可能还想了解这一点。

您可以使用来取消CSS的统一

以下是未统一的版本：

我使用的步骤是：

在网站上查看源代码

在标题中，找到样式表

打开样式表，复制内容

将内容粘贴到未显示的文件夹中

关于事件组类：s

事件组

类在CSS或JS中完全未使用。它只是一个用于将所有三个日历事件分组的div

我假设你想弄清楚如何制作整个事件布局

内部包装

：垂直居中文本

多卡

：构建/格式化每张卡

ul

：（事件组）不显示任何要点

以下是他们所做工作的最简单形式：

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

---

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

为什么要进行向下投票和关闭？我很高兴知道，谢谢。我已经更新了我到目前为止所做的事情。你们应该学会右键点击并检查Chrome中的元素（例如）。一个接一个地学习所有的工具。这会让你的生活更轻松。完成后，从“响应CSS”搜索开始。虽然这份工作执行得很专业，但这份清单却很琐碎。我确实这样做了；否则我就不知道类名了，不是吗？嗨@AlexPakka，如果我不知道，我就不知道引用的css文件被缩小了。我以为大家都知道。但无论如何，我已经更新了我的帖子，明确指出我使用了什么工具来避免进一步的误解。谢谢，你好，mkaminsky，谢谢。我打开每一个，搜索关键词“事件组”，但没有一个包含这个关键词。所以我想也许我可以用bootstrap中的网格系统来完成这项工作？你的css也可以使用，但我不想自己维护css。你可以使用Bootstrap。引导默认设置了一个断点（您可以在中查看概述）。如果你想找更轻的，看看hi Pachonk，谢谢。我做的和你在这里贴的一模一样。我研究了5个css+js文件，但找不到css类：events组。我想我可能不得不用其他的方法来做。有什么好建议吗？@Franva

事件组

在CSS或JS中完全没有使用。这只是一个用来分组所有三个日历事件的div。哦！我走错方向了！！！那么，如何找出用于制作列表/网格的css类呢？进入儿童和家长。是的，这就是我正在尝试的，使用Bootstrap:）

#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%;
    }
}

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);