Html 如何复制网站的CSS设计

我有一个现有的家长网站，我必须设计一个类似的主题和css风格的新网站

我没有访问父网站的代码，我可以在其中查看样式

是否有一种方法可以提取或复制网站的css样式，并将其用于新的css样式。我只需要得到同样的主题去在新的网站以及

我发现我可以使用一些adobe工具来实现同样的目标

---

有没有人能简单介绍一下如何做到这一点，或者在复制这种风格时有没有一个通用的程序。

我想你是想用加农炮射击苍蝇。查看源代码时，所有javascript/css/html代码都在您的手中。不需要高级工具

为了更好地查看缩小的文件，您可以尝试chrome和firefox等现代浏览器提供的开发人员工具

您也可以使用css和html的美化工具来获得漂亮的缩进文档

---

只需谷歌html或css美化，并找到一个最适合你的需要在最佳方式。大多数都是免费的在线工具。

使用您自己的、最合适的标记和CSS规则复制给定的设计，并具有某种QA流程，可以帮助您发现外观和交互方面的明显不一致

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

父网站可以在以后以不可预测的方式更改其样式。您必须复制这些更改。因为您提到您没有访问代码库的权限，所以您不能仅仅区分它们的更改并将它们应用到您的代码库中

因此，我认为最好忽略原始的HTML和CSS，只需关注您的眼睛，并有一个QA，将仔细测试您的工作与原始的一致性

我曾经做过类似的事情，我认为通常不需要遵循家长网站的像素完美，只要足够一致，就可以为最终用户提供无痛导航

---

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

css可能已经缩小。显示取消整理的方法，以便您可以阅读

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

---

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

您可以下载现有网站的样式表。URL将位于使用URL的任何页面的页面源中。这可能会让你开始。@MikeW：试过了，得到了一个压缩的css文档，有点难以理解，我有没有办法使用Photoshop和Dreamweaver来完成这个任务。它只需要漂亮的打印吗？@b.j.g:如果你说的漂亮打印是指外观和感觉应该与父网站相似，是的。但我不需要遵循确切的样式规则，但总体样式应该相似。是的，我不需要像素完美的一致性。只要外观和感觉是相似的，这对我来说就完美了。我也得到了adobe的工具，我看到了很多将PSD转换为HTML5和CSS的教程。有没有什么方法可以让我得到一个家长网站的PSD，这种方法会对我的场景有用。如果你有家长网站的PSD设计，我建议研究如何将其转化为HTML5和CSS，并以此为基础。我自己没有用过Adobe工具，所以我帮不了你。我甚至不知道是否有PSD可以导出为HTML/CSS，

---

或者它必须是精心制作的。搜索StackOverflow，也许-我肯定以前有人问过。谢谢。我没有父站点的PSD，我希望我可以通过访问站点来创建一个。