发现与网页特定部分相关的 file/s

Question

我有一个网站，您可以在这里看到：Minutify。该网站基于wordpress，我安装了一些小部件。其中之一是供访问者输入他们的电子邮件。您可以在主页右侧的名为 "SUBSCRIBE TO MINUTIFY" 的框中看到它。

可以看出，输入邮件的框比外面的白框要窄。可以看到白框中间有两条垂直的边框线（SUBSCRIBE TO MINUTIFY），视觉上很不爽。

因为我对我们的网站设计和 css、html 等没有任何经验。我想知道找到 file/s 的好方法是什么控制网页的视觉效果，例如我正在谈论的框以及如何解决我在文件中谈论的问题。

例如，如果我在页面上单击并选择 "View page source"（在 chrome 中），我可以得到关于我应该查看哪些文件以及在哪里查看的线索吗？

Answer 1

您可以使用 Firebug 或检查器元素。右键单击要查看样式的元素，然后选择检查器元素或 Firebug 工具（您可以从互联网上免费获得）

据我所知，您可以通过编辑 http://www.minutify.com/wp-content/themes/Zoren/A.style.css,qver=4.1.pagespeed.cf.aQXaS7GeSC.css 文件轻松隐藏它 input[type="text"], input[type="email"], textarea{

将border: 1px solid #ccc;编辑为border: 1px solid #fff;

Answer 2

正如其他人所说，检查元素并查看应用了哪些 CSS 相当容易。在这种情况下，没有明确的宽度设置——浏览器的默认值有效。网站的 CSS 似乎正在合并和缓存，因此检查员可能不会报告您要编辑以进行更改的文件。在模板目录中查找 CSS 文件。

我将使用以下 CSS 为该元素应用宽度，几乎包含在您可用的任何 CSS 文件中：

.sml_emailinput {
    width: 100%;
    box-sizing: border-box;
    border: none;
}

这使得输入元素成为可用元素的全宽 space，从而使外观更加完整。

要使该小部件的外观类似于上面的搜索框，请尝试以下操作：

p.sml_email {
    background: #d0d0d0;
    padding-bottom: 20px !important;
}
input.sml_emailinput {
    width: 93%;
}

发现与网页特定部分相关的 file/s

Discovering the file/s relevant to a specific part of a webpage

html

css

wordpress