我在一个相当简单的网站中包含了一张图片，但它没有出现。检查 Chrome 中的元素样式显示最终(在所有继承样式之后的顶部)样式
element.style {
display: none !important;
}
果然，如果我取消设置该样式，就会出现图形的轮廓并且页面高度会调整以适应它。但我不知道这种风格是从哪里来的——看起来像是动态添加的东西。这是我用来创建页面的 Django 模板(中的图像是 <div class="secondary col">):
{% load markup %}
<!doctype html>
<html lang="en">
<head>
<title>Holden Web: {{ flatpage.title }}</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<link href="{{ STATIC_URL }}normalize.css" rel="stylesheet" type="text/css" />
<link href="{{ STATIC_URL }}styles.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Comfortaa:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="bluebar"> </div>
<header class="pageheader shadow">
<h1><a href="/">Holden Web</a></h1>
<div class="tagline">What you'll need to know tomorrow</div>
<nav class="pagenav">
<ul class="inline_list">
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/partners/">Partners</a></li>
<li><a href="/training/">Training</a></li> [13/1858]
<li><a href="/contact/">Contact</a></li>
<li><a href="/about/">About</a></li>
<li><a href="http://holdenweb.blogspot.com/">Blog</a></li>
</ul>
</nav>
</header>
<div class="content">
<section class="secondary col">
<div>
<a href="http://www.jdoqocy.com/click-7520687-11258637" target="_top">
<img src="http://www.awltovhc.com/image-7520687-11258637" width="200" height="200" alt="O'Reilly 50% Ebook Deal of the Day" border="0"/>
</a>
</div>
{% block secondary %}
{% endblock %}
</section>
<section class="primary col">
{% block primary %}
{{ flatpage.content|markdown:"safe" }}
{% endblock %}
</section>
</div>
<footer class="vcard">
<div class="secondary col">
</div>
<div class="primary col">
<h1>Holden Web, LLC</h1>
<p>Email: <a href='mailto:info@holdenweb.com' class="email">info@holdenweb.com</a>Phone: <span class="tel
">1.800.494.3119</span></p>
<nav>
<ul class="inline_list">
<li><a href="/">Home</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/partners/">Partners</a></li>
<li><a href="/partners/">Partners</a></li>
<li><a href="/training/">Training</a></li>
<li><a href="/contact/">Contact</a></li>
<li><a href="/about/">About</a></li>
<li><a href="http://holdenweb.blogspot.com/">Blog</a></li>
</ul>
</nav>
<p><a href="http://theopenbastion.com/">The Open Bastion</a></p>
</div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</body>
</html>
第一个样式文件是normalize.css v3.0.1 . styles.css如下所示。
body{font:62.5% arial, helvetica, sans-serif;min-width:815px;background-color:#f6f6ef}
.pageheader{font-size:1.4em;background-color:#f6f6ef;padding:0 2em;height:10em;border-bottom:1px solid #eae7d1}
.pageheader h1{margin:0;position:relative;top:1em;display:inline-block}
.pageheader h1 a{background:transparent url(images/logo.png) no-repeat left top;display:block;text-indent:-9999em;height:225px;width:207p
x}
/*logo flip*/
.pageheader h1 a:hover{
-webkit-transition-delay:.5s;
-moz-transition-delay:.5s;
-webkit-transform-style:preserve-3d;
-webkit-transition: -webkit-transform 1.7s;
-webkit-transform:rotateX(360deg);
-moz-transform:rotateX(360deg);
-moz-transform-style:preserve-3d;
-moz-transition-duration: 1.5s;
}
.tagline{font-size:2em;font-weight:bold;color:rgba(0,0,0,.1);
font-family:"Gill Sans","Gill Sans MT","Trebuchet MS",sans-serif;
text-shadow:1px 1px 3px rgba(0,0,0,.1);
margin:-6em 0 0 30%;
-moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;
}
.tagline:hover{color:rgba(0,0,0,.2);text-shadow:3px 3px 4px rgba(0,0,0,.2);}
h1,h2,h3,.h1,.h2,.h3,.inline{font-family:"Gill Sans","Gill Sans MT","Trebuchet MS",sans-serif;color:#444}
.content div section p strong {font-weight:bold;font-size:18px} [28/1894]
.content a {color:#449}
.content a :hover{color:#66c}
h1{margin:.5em 0 .25em}
h2{margin:.6666em 0 .3333em}
h3{font-size:16px;margin:7px 0 5px}
.content{font-size:1.3em;background-color:#fff;padding:0 2em;z-index:10}
.content p{line-height:1.7142;margin:.5em 0}
.content ul{list-style-position:outside;padding-left:1em;list-style-type:none}
.pagenav{margin:.6em 0 0 30%}
.pagenav a{font-size:1.0714em;color:#4646e9;font-weight:bold;text-transform:uppercase;text-decoration:none;text-shadow:1px 1px 2px rgba(0
,0,0,.2);
-moz-transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
}
.pagenav a:hover{
text-decoration:underline;
/* just a little too much
font-size:110%;
-moz-transform:scale(2);
-webkit-transform:scale(2);
-moz-text-size-adjust: 120%;
-webkit-text-size-adjust: 120%;*/
}
ul.inline_list{list-style-type:none;padding:0;margin:0}
ul.inline_list li{display:inline;margin-right:1em}
.col{padding:1em 0}
.secondary{line-height:1.6;float:left;width:25%;overflow:hidden;padding-top:11em}
.primary{font-size:1.0769em;line-height:1.6;width:60%;margin-left:30%;max-width:700px;padding-bottom:3em}
footer{font-size:1.3em;clear:both;background-color:#f6f6ef;padding:.5em 2em;border-top:1px solid #092694;height:14em}
footer .primary{padding-top:0;padding-bottom:0}
footer .primary nav{margin-top:.5em}
.bluebar{
background-image: linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -o-linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -moz-linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -webkit-linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -ms-linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #092794),
color-stop(1, #5475EE)
);
}
footer p{margin:.5em 0}
.bluebar{height:20px}
footer h1{font-size:1.2em}
.email{margin-right:1em}
.shadow{box-shadow:1px 1px 2px rgba(0,0,0,.2)}
.footnav ul{list-style-type:none;position:absolute;top:-6em;left:27em}
.hw{border-bottom:1px solid #eee;padding-bottom:3em}
.hw,.tob{margin:3em 0}
聪明人提供的线索将帮助我重新开始行动。
最佳答案
这可能是您本地计算机上运行的广告拦截软件造成的。
关于html - 图像未显示 - 样式 "display: none"来自哪里？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24808567/
我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar
我有一大串格式化数据(例如JSON)，我想使用Psychinruby同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择