如何让 Dropzone.js 看起来像网站上的主题？答案

【问题标题】：How to make Dropzone.js appear like the theme on the site?如何让 Dropzone.js 看起来像网站上的主题？
【发布时间】：2015-04-18 22:07:17
【问题描述】：

我一直在尝试使用一小段示例代码和 dropzone.css 使 Dropzone.js 看起来像网站 (dropzonejs.com) 上的主题。这是我的代码：

<html>
<head>
<script src="dropzone.js"></script>
<link rel="stylesheet" type="text/css" href="dropzone.css">
<link rel="stylesheet" type="text/css" href="basic.css">
</head>
<form action="/upload-target" class="dropzone"></form>
</html>

我检查了文件路径，这些都很好。最终结果看起来像 http://www.dropzonejs.com/examples/simple.html 但我的预期结果就像主页上的示例“试试吧！”部分。

如果您能提供帮助，请告诉我。

【问题讨论】：

如果你click right> inspect element 你会使用他们使用的.css，只需复制粘贴它，我也没有看到“尝试”部分，你能指点我吗？请链接
如果你看下“试试看！”部分你会看到一个 Dropzone 的实现，我想要那个 Dropzone 的样式。
dropzonejs.com 试用版块。

标签： javascript css dropzone.js

【解决方案1】：

对于主题本身，只要您遵循css 规则中的相同结构，它似乎就可以正常工作：main section .dropzone。

<html>
    <head>
        <link rel="stylesheet" href="dropzone.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <main>
            <section>
                 <h1 id="try-it-out">Try it out!</h1>

                <div id="dropzone">
                    <form action="" class="dropzone dz-clickable" id="demo-upload">
                        <div class="dz-message">Drop files here or click to upload.
                            <br> <span class="note">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>

                        </div>
                    </form>
                </div>
            </section>
        </main>
    </body>
</html>

另外，请确保您的示例中有两个 css 文件

见小提琴：http://jsfiddle.net/jnoxvc7t/

【讨论】：

试过了，还是不行，只是一个通用的版本。你能压缩你使用的代码并分享链接吗？谢谢！
完美。愚蠢的我，只是一些糟糕的HTML。非常感谢！
@jameshk 没问题 :)
仅供参考：您的 JS Fiddle 不起作用。拖动文件会导致浏览器打开文件。
确实，在我尝试之前这看起来已经很糟糕了。