我有一个关于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"引擎"必须搜索"所有"转换属性,即使元素只有一个属性,它也可能会减慢速度.
有谁知道是否是这种情况?谢谢!
HTML电子邮件新闻稿的HTML/CSS是否需要采用表格格式,或者我可以使用DIV同样保证它会显示交叉电子邮件客户端吗?我已经下载了许多模板,看看它们是如何完成的,基于我自己的模板,它们似乎都在使用表格.
任何见解都非常感谢,谢谢!
我正在尝试检索<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) 我正在使用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"语句,说"如果没有剩下的'下一个'元素,那么找到第一个元素.
谢谢!
如此处所定义:
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"等字母?
谢谢!
动画背景大小属性似乎不适用于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://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) 我正在使用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)
非常感谢!
我在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)
我该如何实现这一目标?谢谢!
我有一个自定义的帖子类型djs和一个city有两个术语的自定义分类:boston和nyc.所以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?
css ×5
html ×3
css3 ×2
jquery ×2
php ×2
wordpress ×2
centering ×1
css-content ×1
font-face ×1
html-email ×1
loops ×1
next ×1
parent ×1
performance ×1
permalinks ×1
raphael ×1
while-loop ×1