小编2ne*_*2ne的帖子

我还没有在这里看到这个问题,但我想知道是否有人知道是否有可能基于容器或父元素基于它的宽度进行媒体查询.用户的情况是,当您从左侧弹出一个菜单并减小主窗口容器的大小时.这是一个示例网站,您可以在其中看到菜单弹出打开但页面上的内容无法根据其新宽度进行更改

http://tympanus.net/Tutorials/FullscreenBookBlock/

在浏览IE10的开发人员博客后,我发现他们不支持preserve-3d设置.

他们确实提供了一种解决方法,但我似乎无法让它发挥作用.我的示例适用于Safari,Chrome和Firefox,但不适用于IE10.如果有人能帮我实现这一目标,我将非常感激.

单击时,框应围绕Y轴旋转,以显示一些文本和绿色背景颜色.在IE10中并非如此

我的例子: http ://codepen.io/2ne/pen/zEpge

部分代码:

HTML

<div class="flip-wrapper">
    <div class="front"></div>
    <div class="back">IE10 SUCKS</div>
</div>

CSS

.flip-wrapper {
    cursor: pointer;
    height: 100%;
    -moz-perspective: 1000;
    -webkit-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
}

.flip-wrapper .front,
.flip-wrapper .back {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 100%;
    position: absolute;
    width: 100%;
}

.flip-wrapper .back {
  background: none repeat scroll 0 0 #298F68;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: …

我试图复制Windows 8磁贴的加载动画.看起来每个图块的动画延迟都略高于其前一个图块.我一直在以低效的方式使用nth-child来实现这一目标,如下所示.有没有人知道我能以更有效的方式实现这一目标,以满足任何数量的div？

DEMO

.results div:nth-child(1) {
  animation-delay: 0.25s;
}
.results div:nth-child(2) {
  animation-delay: 0.5s;
}
.results div:nth-child(3) {
  animation-delay: 0.75s;
}
.results div:nth-child(4) {
  animation-delay: 1s;
}
.results div:nth-child(5) {
  animation-delay: 1.25s;
}
.results div:nth-child(6) {
  animation-delay: 1.5s;
}
.results div:nth-child(7) {
  animation-delay: 1.75s;
}
.results div:nth-child(8) {
  animation-delay: 2s;
}

我的中心对齐工作在除IE10之外的所有支持它的浏览器中.我认为我的语法正确并且它支持它.有人可以帮忙吗？DEMO

html {
    height: 100%;
}
body {
    background: red;
    font-family: 'Open Sans';
    min-height: 100%;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;
    display: -ms-flexbox;
    -ms-box-orient: horizontal;
    -ms-box-pack: center;
    -ms-box-align: center;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
    text-align: center;
}
.box {
    background: none repeat scroll 0 0 #E7F3FF;
    border: 4px solid #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 2px 2px rgba(1, 1, 1, 0.2);
    color: …

我在 Excel 中创建了一个简单的联赛电子表格，但是当我尝试在 Google 表格中使用它时，我收到了公式错误。这是我第一次使用 Google Sheets，我想用它来公开我的联赛。

无效公式的示例：

=IF(C3=0,"",VLOOKUP(MIN(Calculations!$A$3:$A$12),Calculations!$A$3:$N$12,3,FALSE))

https://docs.google.com/spreadsheets/d/1gYOJcJPHstD1NPwIkKRr2lejbfidnqyFIRqXeQgVi-E/edit?usp=sharing

使用自定义字段插件时，我无法让它返回任何数据。

我创建了一个名为的字段组book_cover_thumbnail，其中有一个帖子链接到它。谁能明白为什么下面的代码不起作用？

<img src="<?php get_field('book_cover_thumbnail');?>" />

我完全没有收到任何错误，没有空格。

我试图在元素到达视口顶部时向标头添加一个类，但是我似乎无法找出为什么它不起作用。我没有错误，并且检查了jquery正在获取偏移量，并且确实如此。任何帮助都会很棒。我也想知道如何将这段代码扩展到任意数量的部分，而不是仅仅说明6。

JS菲德尔

$(document).ready(function () {
    var project1 = $('section:nth-child(1)').offset();
    var project2 = $('section:nth-child(2)').offset();
    var project3 = $('section:nth-child(3)').offset();
    var project4 = $('section:nth-child(4)').offset();
    var project5 = $('section:nth-child(5)').offset();
    var project6 = $('section:nth-child(6)').offset();
    var $window = $(window);

    $window.scroll(function () {
        if ($window.scrollTop() >= project1) {
            $("header").removeClass().addClass("project1");
        }
        if ($window.scrollTop() >= project2) {
            $("header").removeClass().addClass("project2");
        }
        if ($window.scrollTop() >= project3) {
            $("header").removeClass().addClass("project3");
        }
        if ($window.scrollTop() >= project4) {
            $("header").removeClass().addClass("project4");
        }
        if ($window.scrollTop() >= project5) {
            $("header").removeClass().addClass("project5");
        }
        if ($window.scrollTop() >= project6) {
            $("header").removeClass().addClass("project6");
        }
    });
});

我正在制作一款所有造型都在css3中的游戏.

正如您在DEMO中看到的那样,框架的两侧都有按钮.但目前我不得不为按钮包装器制作图像,因为我无法通过css3找到优雅的解决方案.

我已经为视网膜屏幕制作了这些图像,这样你就无法区分代码和图像,但是我希望看到这个像css形状的副本,但我不确定它是否可能？

非常感谢任何帮助

编辑:此形状的两侧有4px纯白色边框,外侧有2px框阴影(取决于它是左侧还是右侧).

HTML

<div class="interaction farmyard">

<div class="page-decorations"></div>

<div class="nav">
    <div class="left"><span class="btn prev"></span></div>
    <div class="right"><span class="btn next"></span></div>
</div>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, …

我在我的html中使用媒体查询,以便在需要时为网格加载新的样式表.我可以将其翻译为在我的functions.php中工作吗？

wp_register_style('html5blank', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
wp_enqueue_style('html5blank'); // Enqueue it!


<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/1140.css" type="text/css" media="all and (min-width: 1200px)" />

当我勾选复选框时,我有一个动画,但是当你取消选中它时,我想要反向动画.我确实尝试过伪类:未经检查,我发现它没有用.有css3方法还是小jquery修复？

CODEPEN DEMO

HTML

<div>
  <input type="checkbox" name="cc" id="c1">
  <label for="c1">Checkbox Button 1</label>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

@-moz-keyframes checked {
  0% { tranform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@-webkit-keyframes checked {
  0% { tranform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes checked {
  0% { tranform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box; …