小编Han*_*com的帖子

CSS3过渡:"过渡:全部"比"过渡:x"慢吗?

我有一个关于css3过渡属性的渲染速度的问题.

假设我有许多元素:

div, span, a {transition: all}

div {margin: 2px}
span {opacity: .5}
a:hover {background-position: left top}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}
Run Code Online (Sandbox Code Playgroud)

使用一个声明来定位所有这些元素的所有转换效率要高得多div, span, a {transition: all}.但我的问题是:在动画渲染的平滑性和快速性方面,它是否会"更快"以定位每个元素的特定过渡属性?例如:

div {margin: 2px; transition: margin .2s ease-in}
span {opacity: .5; transition: opacity .2s ease-in}
a {background-position: left top; transition: background .2s ease-in}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}
Run Code Online (Sandbox Code Playgroud)

我问这个问题的逻辑是,如果css"引擎"必须搜索"所有"转换属性,即使元素只有一个属性,它也可能会减慢速度.

有谁知道是否是这种情况?谢谢!

css performance css3 css-transitions

73
推荐指数
2
解决办法
1万
查看次数

HTML电子邮件:表格或div?

HTML电子邮件新闻稿的HTML/CSS是否需要采用表格格式,或者我可以使用DIV同样保证它会显示交叉电子邮件客户端吗?我已经下载了许多模板,看看它们是如何完成的,基于我自己的模板,它们似乎都在使用表格.

任何见解都非常感谢,谢谢!

html html-email

72
推荐指数
2
解决办法
6万
查看次数

jQuery - 获取元素的第二级父级

我正在尝试检索<a>元素的父级(祖父母?)的父级.我想找到那个祖父母,然后在该元素中找到<b>标签,然后将该文本存储为变量以在页面的其他位置发布.我一直在尝试使用parent()函数,但没有成功.

这是我试过的代码:

    $('.mixPlayCell a').click( function() {
        var title = $(this).parent().get(0).parent().get(0).text();
        alert(title);
    });
Run Code Online (Sandbox Code Playgroud)

html jquery parent

41
推荐指数
3
解决办法
5万
查看次数

jQuery:如何找出next()到达结尾的时间,然后转到第一个项目

我正在使用next()函数显示一系列元素.一旦我到达终点,我想转到第一个元素.有任何想法吗?

这是代码:

//Prev / Next Click
$('.nextSingle').click( function() {
    //Get the height of the next element
    var thisHeight = $(this).parent().parent().parent().next('.newsSingle').attr('rel');
    //Hide the current element
    $(this).parent().parent().parent()
        .animate({
            paddingBottom:'0px',
            top:'48px',
            height: '491px'
        }, 300) 
        //Get the next element and slide it in      
        .next('.newsSingle')
        .animate({
            top:'539px',
            height: thisHeight,
            paddingBottom:'100px'
        }, 300);
});
Run Code Online (Sandbox Code Playgroud)

基本上我需要一个"if"语句,说"如果没有剩下的'下一个'元素,那么找到第一个元素.

谢谢!

jquery next

30
推荐指数
3
解决办法
3万
查看次数

CSS伪元素计数器:你能增加一个字母"a","b","c"等而不是数字?

如此处所定义:

http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

您可以使用以下代码来增加伪元素中的数字.

H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
}
H1 {
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}
Run Code Online (Sandbox Code Playgroud)

有没有办法可以使用相同的代码来增加像"a","b","c"等字母?

谢谢!

css pseudo-element css-content

29
推荐指数
1
解决办法
2万
查看次数

Webkit中的css3背景大小过渡动画不起作用...... Bug?还是错误的语法?

动画背景大小属性似乎不适用于Chrome或Safari.

div {
    width: 161px;
    height: 149px;
    background: url(http://3.bp.blogspot.com/_HGPPifzMEZU/Rw4ujF12G3I/AAAAAAAAAWI/bc1ppSb6eKA/s320/estrelas_09.gif) no-repeat center center;
    background-size: 50% 50%;
    transition: background-size 2s ease-in;
    -moz-transition: background-size 2s ease-in;
    -web-kit-transition: background-size 2s ease-in
}
div:hover {
    background-size: 100% 100%
}
Run Code Online (Sandbox Code Playgroud)
<div>
hey
</div>
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/ubcka/14/

css css3 css-transitions

24
推荐指数
4
解决办法
8万
查看次数

来自外部域的CSS @ font-face绝对URL:未在firefox中加载的字体

http://fwy.pagodabox.com

http://friends-with-you.myshopify.com/

我将我的字体和css托管在pagodabox.com服务器上,并且正在开发shopify上的商店部分.我想使用pagodabox托管网站上的相同样式表作为shopify网站.但我的字体没有在firefox,版本13.0.1中加载

FF或我的语法有问题吗?谢谢!!!

@font-face {
  font-family:'IcoMoon';
  src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.eot');
  src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.svg#IcoMoon') format('svg'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.woff') format('woff'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family:'square';
  src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.eot');
  src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.eot?#iefix') format('embedded-opentype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.woff') format('woff'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.ttf') format('truetype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.svg#SquareSerifLightRegular') format('svg');
  font-weight:normal;
  font-style:normal;
}
Run Code Online (Sandbox Code Playgroud)

css font-face

24
推荐指数
3
解决办法
5万
查看次数

Raphael js文本定位:将文本居中放在一个圆圈中

我正在使用Raphael js绘制带圆圈的数字.问题是每个数字都有不同的宽度/高度,因此使用一组坐标使文本居中不起作用.文本在IE,FF和safari之间显示不同.有没有动态的方法来找到数字的高度/宽度并相应地居中?

这是我的测试页面:

http://jesserosenfield.com/fluid/test.html

和我的代码:

function drawcircle(div, text) { 
    var paper = Raphael(div, 26, 26); //<<
    var circle = paper.circle(13, 13, 10.5);
    circle.attr("stroke", "#f1f1f1");
    circle.attr("stroke-width", 2);
    var text = paper.text(12, 13, text); //<<
    text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});
    text.attr("fill", "#f1f1f1");
}

window.onload = function () {
    drawcircle("c1", "1");
    drawcircle("c2", "2");
    drawcircle("c3", "3");
};
Run Code Online (Sandbox Code Playgroud)

非常感谢!

html css raphael centering

21
推荐指数
2
解决办法
2万
查看次数

PHP循环:围绕每三个项目语法添加一个div

我在wordpress中使用循环来输出帖子.我想在div中包含每三个帖子.我想在循环的每次迭代中使用计数器递增,但我不确定语法是否"如果$ i是3的倍数"或"如果$ i是3 - 1的倍数".

$i = 1;
if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post();
     // If is the first post, third post etc.
     if("$i is a multiple of 3-1") {echo '<div>';}

     // post stuff...

     // if is the 3rd post, 6th post etc
     if("$i is a multiple of 3") {echo '</div>';}

$i++; endwhile; endif;
Run Code Online (Sandbox Code Playgroud)

我该如何实现这一目标?谢谢!

php wordpress loops while-loop

20
推荐指数
2
解决办法
4万
查看次数

有一个WordPress页面与自定义帖子类型"前"slug具有相同的标题

我有一个自定义的帖子类型djs和一个city有两个术语的自定义分类:bostonnyc.所以DJ可以被标记为波士顿或纽约.

DJ型材(单djs柱)位于/nyc-wedding-dj/joe-shmoe/,例如,或用于波士顿DJ, /boston-wedding-dj/jane-doe/.换句话说,该自定义帖子类型的重写slug设置为%city%-wedding-dj.

我有两个常规页面/boston-wedding-djs//nyc-wedding-djs/(注意带有s的多个DJ),我使用自定义页面模板来循环来自相应城市的DJ,并显示从该页面的城市到DJ个人档案的链接列表.

我想做的是让重写slug成为%city%-wedding-djs自定义帖子类型单页"出现"(至少谷歌)作为上述那些页面的子页面.

有一个冲突然而,当我更改自定义后类型重写塞djs%city%-wedding-djs,我得到的网页404 Not Found错误/boston-wedding-djs//nyc-wedding-djs/.

我怎样才能有一个与页面同名的重写slug?

php wordpress permalinks custom-post-type custom-taxonomy

15
推荐指数
3
解决办法
4017
查看次数