|
|
@@ -0,0 +1,222 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ /* css reset */
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ li {
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 工具类 */
|
|
|
+ .main-width {
|
|
|
+ width: 1226px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ background-color: rgb(249, 250, 251);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* header start */
|
|
|
+ header {
|
|
|
+ height: 100px;
|
|
|
+ background-color: #4F46E5;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ header .main-width {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* header end */
|
|
|
+ /* content start */
|
|
|
+ .content {
|
|
|
+ padding-top: 80px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content aside h2 {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content aside {
|
|
|
+ width: 480px;
|
|
|
+ height: 830px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 30px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content aside p {
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content aside input[type="range"] {
|
|
|
+ width: 100%;
|
|
|
+ background-color: rgb(229, 231, 235);
|
|
|
+ /* -webkit-appearance:none; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .content .color-content {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content .color-content input[type="color"] {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content .color-content input[type="text"] {
|
|
|
+ width: 100px;
|
|
|
+ height: 36px;
|
|
|
+ flex-grow: 1;
|
|
|
+ border: 1px solid rgb(209, 213, 219);
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content .inp9 button {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ background-color: rgb(243, 244, 246);
|
|
|
+ border: none;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .content select {
|
|
|
+ width: 100%;
|
|
|
+ height: 36px;
|
|
|
+ border: 1px solid rgb(209, 213, 219);
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content article {
|
|
|
+ width: 710px;
|
|
|
+ height: 830px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 30px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content article .bg {
|
|
|
+ background-color: #aaa;
|
|
|
+ width: 100%;
|
|
|
+ height: 650px;
|
|
|
+ margin-top: 30px;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content article .box {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background-color: gray;
|
|
|
+ border:1px solid blue;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /* content end */
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="container">
|
|
|
+ <header>
|
|
|
+ <div class="main-width">
|
|
|
+ <h1>交互式元素编辑器</h1>
|
|
|
+ <p>通过表单控件实时修改元素样式和内容</p>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+ <div class="content main-width">
|
|
|
+ <aside>
|
|
|
+ <h2>控制面板</h2>
|
|
|
+ <div class="inp1">
|
|
|
+ <p>元素大小: 200px</p>
|
|
|
+ <input type="range" min="100" max="400">
|
|
|
+ </div>
|
|
|
+ <div class="inp2">
|
|
|
+ <p>圆角大小: 10px</p>
|
|
|
+ <input type="range" min="0" max="50">
|
|
|
+ </div>
|
|
|
+ <div class="inp3">
|
|
|
+ <p>背景颜色</p>
|
|
|
+ <div class="color-content">
|
|
|
+ <input type="color">
|
|
|
+ <input type="text">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="inp4">
|
|
|
+ <p>元素文本</p>
|
|
|
+ <div class="color-content">
|
|
|
+ <input type="text">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="inp5">
|
|
|
+ <p>边框样式</p>
|
|
|
+ <div class="color-content">
|
|
|
+ <input type="color">
|
|
|
+ <input type="text">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="inp6">
|
|
|
+ <p>边框样式</p>
|
|
|
+ <select>
|
|
|
+ <option value="solid">实线</option>
|
|
|
+ <option value="dashed">虚线</option>
|
|
|
+ <option value="dotted">点线</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="inp7">
|
|
|
+ <p>边框宽度: 2px</p>
|
|
|
+ <input type="range" min="1" max="10">
|
|
|
+ </div>
|
|
|
+ <div class="inp8">
|
|
|
+ <p>阴影效果</p>
|
|
|
+ <input type="checkbox" id="is-shadow">
|
|
|
+ <label for="is-shadow">开启阴影</label>
|
|
|
+ </div>
|
|
|
+ <div class="inp9">
|
|
|
+ <button>重置样式</button>
|
|
|
+ </div>
|
|
|
+ </aside>
|
|
|
+ <article>
|
|
|
+ <h2>预览区域</h2>
|
|
|
+ <div class="bg">
|
|
|
+ <div class="box">
|
|
|
+ hello world
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </article>
|
|
|
+ </div>
|
|
|
+ <footer>
|
|
|
+
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
