如何使 Dropzone.js 看起来像网站上的主题?
How to make Dropzone.js appear like the theme on the site?
我一直在尝试使用一小段示例代码和 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 但我的预期结果就像主页 "Try It!" 部分中的示例。
如果你能帮忙,请告诉我。
对于主题本身,只要您遵循 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
文件
参见fiddle:http://jsfiddle.net/jnoxvc7t/
我一直在尝试使用一小段示例代码和 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 但我的预期结果就像主页 "Try It!" 部分中的示例。
如果你能帮忙,请告诉我。
对于主题本身,只要您遵循 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
文件
参见fiddle:http://jsfiddle.net/jnoxvc7t/