Question

我有一个网站，您可以在此处看到：Minutify。该网站基于wordpress，我已经安装了许多小部件。其中一个是访问者输入他们的电子邮件。您可以在主页右侧的一个名为＆＃34; SUBSCRIBE TO MINUTIFY＆＃34;的框中看到它。

可以看出，输入电子邮件的框比外部白框窄。您可以看到白框中间有两条垂直边框线（SUBSCRIBE TO MINUTIFY），这在视觉上是令人不愉快的。

由于我对网站设计，css，html等没有任何经验，我想知道什么是找到哪些文件控制网页视觉效果的好方法，例如我正在讨论的框以及如何解决我在文件中讨论的问题。

例如，如果我在页面上点击并选择＆＃34;查看页面来源＆＃34; （在chrome中）我可以得到一些关于我应该查看哪些文件以及在哪里的线索？

Answer 1

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

我可以看到您可以使用编辑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;
}

这使输入元素成为可用空间的整个宽度，从而产生更加集成的外观。

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

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

发现与网页特定部分相关的文件

2 个答案: