如何复制网站的CSS设计

Question

我有一个现有的父网站，我必须设计一个具有相似主题和CSS样式的新网站。

我无法访问父网站的代码，我可以在其中查看样式。

有没有办法可以提取或复制网站的CSS样式并将其用于新网站。我只需要在新网站上获得相同的主题。

我发现我可以使用一些adobe工具。

任何人都可以简单了解如何做到这一点，或者在复制样式时是否需要遵循一般程序。

Answer 1

我认为你试图用大炮射飞。查看来源时，所有javascript / css / html代码都在您手中。不需要高级工具。

为了更好地了解缩小文件您可以尝试使用现代浏览器（如chrome和firefox）提供的开发人员工具。

您也可以使用css和html之类的美化工具（如http://www.codebeautifier.com）来获得精美的缩进文档。

只需google html或css美化，找到最适合您需求的方式。其中大部分都是免费的在线工具。

Answer 2

使用您自己的，最合适的适当标记和CSS规则复制给定的设计，并使用某种QA流程来帮助您找到与外观和交互明显不一致的内容。

为什么我认为您不想从父网站复制HTML和CSS：

父网站可以在以后以不可预测的方式改变其风格。您必须复制这些更改。由于您提到您无权访问代码库，因此您不能仅仅将其更改区分开来并将其应用于代码库。

因此，我认为最好忽略原始的HTML和CSS，并且只需密切注意并制定质量保证书，仔细测试您的工作是否与原始版本保持一致。

（我不得不做一次类似的事情，我认为通常不需要跟随父网站像素完美 - 只要足够一致，以便为最终用户提供无痛导航。

在需要像素完美一致性的情况下，使用与原始代码库相同的代码库构建其他网站更有意义。你没有得到这种可能性，所以我怀疑你会要求完美。）

Answer 3

css可能缩小了。 This question显示了将其统一的方法，以便您可以阅读它。

Firefox和Chrome等浏览器都有内置的Code Inspector工具，可以显示应用于每个项目的样式。只需右键单击页面元素（例如，段落或标题），然后选择＆＃34; Inspect Element＆＃34;从出现的菜单中。窗口底部会出现一个工具栏。使用工具栏上的箭头选择要检查的不同元素。通常，该工具的左侧显示该元素的HTML，右侧显示应用的CSS样式以及它们来自的css行。您可以通过按F12键在IE中获得类似的工具。

如果您的文本编辑器允许在搜索中使用正则表达式（如果您有Creative Suite，则Dreamweaver会使用此表达式），请将此搜索词与＆＃34;正则表达式＆＃34;一起使用。选中框：＃[a-z | 0-9] {3,6}。这将找到所需颜色的所有十六进制值。它说要找到后面跟着三个或六个字母或数字的英镑符号，这些符号大部分都是十六进制值（例如＃333或＃333333表示深灰色）。它也可能会显示一些ID，您可以忽略它们并继续搜索。您还想搜索rgba，因为颜色可能会以这种方式列出。将此与浏览器的代码检查器结合使用将帮助您找出在不同元素上使用的颜色。有些东西可能有背景图像，因此您需要使用代码检查器来解决这个问题。代码检查器还将显示您需要的填充量，宽度等。