假设我有这个元素用于显示网站徽标:
<div id="web-title">
<a href="http://website.com" title="Website" rel="home">
<span>Website Name</span>
</a>
</div>
Run Code Online (Sandbox Code Playgroud)
该#blog-title会与设置样式background:url(http://website.com/logohere.png),但如何正确地隐藏文本Website Name?如下所示:使用css或/sf/answers/189372991/ 隐藏文本,我已经看到了隐藏文本的各种方法,例如:
#web-title span { text-indent: -9999px; }
Run Code Online (Sandbox Code Playgroud)
要么
#web-title span { font-size: -9999px; }
Run Code Online (Sandbox Code Playgroud)
要么
#web-title span { position: absolute; top: -9999px; left: -9999px; }
Run Code Online (Sandbox Code Playgroud)
我也看到一些结合这三种方法.但实际上哪一个是有效隐藏文本的最佳实践?

这是我正在构建的页面的屏幕截图.我正在努力确保绿色按钮始终位于容器的底部.这是一段代码:
HTML
<div class="list-product-pat">
<article>
<!-- title, image, spec ... -->
<div class="pricing-pat">
<!-- the button goes here -->
</div>
</article>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS
.list-product-pat article {
position: relative;
min-height: 260px;
}
.list-product-pat .pricing-pat {
position: absolute;
bottom: 0;
width: 100%;
}
Run Code Online (Sandbox Code Playgroud)
到目前为止没有问题......直到产品规格变得太长并且它突破了绿色按钮.

我想将绿色按钮保持在最底部位置,但同时如果产品标题/产品规格太长,我也希望高度延长.
在理想的世界中,它应该是这样的:

所以我的想法是保持绝对定位,同时仍然保持在文档流程中(因此产品规格知道绿色按钮在那里并且没有突破它).
如果规格高度太长,我只需要扩展它.换句话说,如果规格处于正常高度,则不会延伸.我想避免规格和绿色按钮之间的奇怪差距.
有什么想法怎么做?
这是一个小提琴,看看我是如何做到的: http ://jsfiddle.net/xaliber/xrb5U/
我一直试图弄清楚如何在CSS中制作一个自定义形状,在视觉上看起来像这样:

随着财产background:rgba(44, 44, 48, 0.9)和border:6px solid rgba(29, 30, 35, 0.9);
我的问题是我找不到一种方法来使右上角和左下角看起来像我提供的图像.在CSS-Tricks上尝试了CSS自定义形状的提示,但它似乎没有解决问题,因为它不具备背景.有任何想法吗?
我还在努力让自己熟悉HTML5,而且这些东西让人感到有些困惑....
我曾经读过Jeremy Keith的书和HTML5 Doctor(通过这个问题),它说HTML5可以使用多个h1s.在HTML5中,每个部分都可以有自己的标题元素,因此可以有多个部分h1.我见过一个Wordpress主题框架,"下划线",似乎最充分地应用了这个.
但是,在定义站点结构/文档大纲时,这似乎对旧版浏览器(尚未支持HTML5)造成问题.此外,它给SEO带来了问题.
我偶然发现马特·卡茨的(从谷歌)视频和重读Keith的书里面建议限制使用h1和使用传统的文档大纲(只使用一个或两个h1每页,其次是多h2,h3等).Matt Cutts也暗示多重h1对SEO不太好.
然而,
所以我的问题是,如果我想:
我应该使用哪一个:多个h1(在HTML5中完成的方式)或传统方式?
这个HTML5一个(例子来自HTML5 Doctor):
<h1>My fantastic site</h1>
<section>
<h1>About me</h1>
<p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
<section>
<h1>What I do for a living</h1>
<p>I sell enterprise-managed ant farms.</p>
</section> …Run Code Online (Sandbox Code Playgroud) 这可能是一个仓促的结论,但是当我发现FontSquirrel.com没有使用他们的@ font-face生成器生成笑脸(☺)时,我的问题出现了.
而不是通常的防弹标准(由Paul Irish关于笑脸布置),FontSquirrel的@font-face生成器只生成:
@font-face {
font-family: 'sansationregular';
src: url('sansation_regular-webfont.eot');
src: url('sansation_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('sansation_regular-webfont.woff') format('woff'),
url('sansation_regular-webfont.ttf') format('truetype'),
url('sansation_regular-webfont.svg#sansationregular') format('svg');
font-weight: normal;
font-style: normal;
}
Run Code Online (Sandbox Code Playgroud)
我发现通过FontSquirrel放弃笑脸意味着笑脸不再相关可能太仓促了,但是考虑到FontSquirrel的@font-face发生器似乎是最流行和最常用的发生器,它让我想知道他们为什么不这样做包括笑脸了.特别是因为他们之前似乎已将它包括在内......
万一有人不熟悉笑脸,这里有一个很好的解释.
在::selection { }CSS元素选择应该有我们自己的文字和背景颜色的选择,以取代默认的蓝色文本选择.
然而,这似乎并非总是如此,因为我经常看到具有剩余蓝色的网站.它并没有完全被我们自己选择的颜色所取代.
======编辑======
我想通过我们自己的眼睛比通过截图更容易看到.
请参阅此页面,例如:bleachindonesia.com/2012/05/27/bleach-day
在该页面上,如果您尝试全选(Ctrl + A),您将看到文本将被阻止/选择为灰色.是的,因为页面CSS使用::selection, ::-moz-selection { background:#59574b;color:#fdfcf5; }.
但是,正如您在下面的屏幕截图中看到的那样,它会在某些部分留下一些默认的蓝色选择.

http://i.stack.imgur.com/A0aUJ.png
注意颜色差异,同时注意未选择的部分.网站上有一些部分使用默认的蓝色::选择进行选择,但同时还有一些其他部分未被选中.
同时,还有这个页面:24ways.org/2005/swooshy-curly-quotes-without-images
再次尝试选择所有(Ctrl + A)页面.你可以看到所有的选择都是完美的栗色.没有默认的蓝色选择.只有部分未被选中,但没有默认的蓝色选择.如下面的截图所示:

http://i.stack.imgur.com/4o6ll.png
页面CSS?::selection { background-color: rgba(179, 45, 71, .75); color: #fff; }.与第一页的唯一区别是它使用RGBA而不是十六进制代码.我认为它没有任何区别 - 它本质上是相同的代码.
现在让我惊讶的是什么.
为什么在第一页上默认的蓝色选择仍然存在,但它不会在第二页上持续存在?而且,如何使它像第二页一样完美?
我有一个产品清单,除了蓝色产品.
蓝色是公司的信息块,与所列产品完全无关.
从逻辑上讲,为了保持语义,我就是这样写的.
<ul>
<li> <!-- product goes here --> </li>
<li> <!-- product goes here --> </li>
<li> <!-- product goes here --> </li>
<li> <!-- product goes here --> </li>
<li> <!-- product goes here --> </li>
</ul>
<div> <!-- the blue colored box here --> </div>
Run Code Online (Sandbox Code Playgroud)
然而,通过这种安排,蓝色的盒子将在产品之后显示,而设计要求我将它放在产品之间.
是否有可能在语义上进行这种设计,而不会像使用一样疯狂的东西position: absolute?
在典型的文章索引(如博客、新闻门户)中,如下所示:
\n\n\n\n是否应该将图像缩略图包含在 中figure,还是单独放置就可以了?
\n\n\n图元素表示一个内容单元,可以选择带有标题,它是独立的,通常作为文档主流程中的单个单元进行引用,并且可以从文档的主流程中移走。文档的主要流程而不影响\n文档\xe2\x80\x99s的含义。
\n
但我仍然无法理解这是否意味着我们应该/不应该将图像缩略图放入figure.
例如,即使没有图像,它也不会改变文章的含义,因此符合条件。但另一方面,缩略图并不完全独立。
\n\n在另一个问题中,@unor 建议仅在图像本身应该有单独的标题时才使用图形。但在规范中我们看到标题是可选的。
\n\n有人能帮我一下吗?
\n我很早就注意到,当两个块元素彼此相邻时,它们的边缘相互叠加.像这样的东西:

无论<div>■找margin: 1em,但是当margin1的margin-bottom有冲突margin2的margin-top,都只是保证金堆叠在彼此.见这里:http://jsfiddle.net/39XmC/
我所期待的是这样的:

两者<div>实际上在每个边距上都给出了空格,并且没有在彼此的边缘上叠加.
我知道这可以通过浮动或溢出元素来解决.我的问题:
有时我会看到一些开头<!--和结尾的Javascript //-->.
我想知道这种线的用途是什么?据我所知,<!--意味着评论线.但事实似乎并非如此,因为即使使用这样的行,脚本仍然可以工作.如果删除该行,它也可以工作.
这是一个简短的例子:
<script language='JavaScript' type='text/javascript'>
<!--
function changelang(id) {
document.location.href='index.php&lch=1&lang=' + id }
//-->
</script>
Run Code Online (Sandbox Code Playgroud) 我有一个嵌套if在Lua中。我在第二if层中有一个变量,我想在第一层中使用它。
变量是npcSpecimen.
if conditions then
local npcType = util.pickRandom(self.npcTypes)
local npcSpecimen = ""
if npcType == "spacebandit" then
local npcSpecimen = util.pickRandom(self.npcSpecies)
else
local npcSpecimen = util.pickRandom(self.npcSpeciesMutant)
end
local npcId = space.spawnNpc(spawnPosition, npcSpecimen, npcType)
end
Run Code Online (Sandbox Code Playgroud)
如果以这种方式编写,npcSpecimen则将保持为空,因为 中设置的变量if npcType仅保留在该块中。因此,为了缓解这个问题,我可以使用全局变量来代替:
if npcType == "spacebandit" then
npcSpecimen = util.pickRandom(self.npcSpecies)
else
npcSpecimen = util.pickRandom(self.npcSpeciesMutant)
end
Run Code Online (Sandbox Code Playgroud)
然而,根据文档,使用全局变量不是最佳实践,而且速度较慢。
那么,解决这个问题的最佳方法是什么,以便我可以传递npcSpecimen到npcId?
我第一次遇到这样的错误,我意识到问题类似于这个问题> mysql中的错误#1064所以我把TYPE=MyISAM我的代码更改为ENGINE=MyISAM.
但即使在改变之后,我也遇到了类似的错误.它说,
mySQL error: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '(14),
PRIMARY KEY (id)
) ENGINE=M' at line 7.
我认为改为ENGINE=MyISAM修复错误,但事实并非如此.我该怎么办?
这是我的代码:
$queries[] = "CREATE TABLE IF NOT EXISTS {$prefix}conversationlog (
id int(11) NOT NULL auto_increment,
input text default '',
response text default '',
thatresponse text default '',
uid varchar(255) default NULL,
enteredtime …Run Code Online (Sandbox Code Playgroud) css ×7
html ×6
css3 ×4
php ×2
browser ×1
composer-php ×1
css-position ×1
css-shapes ×1
font-face ×1
fonts ×1
hide ×1
html-heading ×1
html5 ×1
if-statement ×1
javascript ×1
lua ×1
margin ×1
mysql ×1
selection ×1
variables ×1
webfonts ×1
xampp ×1