写一个好看简单的div边框样式

好的，我可以回答这个问题。以下是一个简单的div边框样式：

div {
  border: 2px solid #000;
  padding: 10px;
  border-radius: 5px;
}

这将创建一个黑色边框，内部有10像素的填充，并且边框角落有5像素的圆角。希望这可以帮助你！

相关问题

写一个好看的 vue-upload-component 样式

以下是一个简单的 vue-upload-component 样式示例：

<template>
  <div class="upload">
    <vue-upload-component
      ref="upload"
      :url="uploadUrl"
      :options="{params: {id: 123}}"
      @uploaded="onUpload"
      @failed="onUploadFailed"
      @input-filter="onInputFilter"
    >
      <div class="upload__dropzone">
        <div class="upload__icon">
          <i class="fas fa-cloud-upload-alt"></i>
        </div>
        <div class="upload__text">
          Drag and drop files here or click to select
        </div>
      </div>
    </vue-upload-component>
  </div>
</template>

<script>
import VueUploadComponent from 'vue-upload-component'

export default {
  components: {
    VueUploadComponent
  },
  data() {
    return {
      uploadUrl: 'https://api.example.com/upload'
    }
  },
  methods: {
    onUpload(response) {
      console.log(response.data)
    },
    onUploadFailed(err) {
      console.log(err)
    },
    onInputFilter(newFile, oldFile, prevent) {
      if (newFile && newFile.size > 10 * 1024 * 1024) {
        prevent()
        alert('File size exceeds 10MB limit')
      }
    }
  }
}
</script>

<style scoped>
.upload {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.upload__dropzone {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px dashed #ccc;
  border-radius: 5px;
  transition: border-color 0.2s ease-in-out;
}

.upload__dropzone.dragover {
  border-color: #0070f3;
}

.upload__icon {
  font-size: 2em;
  margin-bottom: 10px;
}

.upload__text {
  font-size: 1.2em;
  color: #666;
  text-align: center;
}
</style>

在上面的示例中，我们使用了 flex 布局来使 upload 组件垂直居中，并使用 border 和 border-radius 属性来创建一个漂亮的边框。同时，我们也为上传区域添加了一个拖动和放置的效果，当用户将文件拖动到上传区域上方时，边框颜色会改变。您可以根据您的需要进行自定义更改。

用vue写一个好看的管理界面

好的，下面我将给出一个简单的示例代码，你可以根据需要进行修改和完善。

首先，在你的Vue项目中安装Element UI组件库，可以使用以下命令：

npm install element-ui --save

然后，在你的Vue组件中引入Element UI：

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main Content</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
import { ElContainer, ElHeader, ElMain, ElFooter } from 'element-ui';

export default {
  name: 'AdminDashboard',
  components: {
    ElContainer,
    ElHeader,
    ElMain,
    ElFooter
  }
};
</script>

这是一个简单的管理界面布局，其中包含了一个顶部导航栏、一个主要内容区域和一个底部区域。你可以根据需要添加更多的组件和功能。

接下来，你可以使用Element UI提供的组件来美化你的管理界面，例如按钮、表格、表单等等。以下是一个简单的表格示例：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'AdminDashboard',
  data() {
    return {
      tableData: [
        {
          name: 'John',
          age: 25,
          address: 'New York'
        },
        {
          name: 'Jane',
          age: 30,
          address: 'Los Angeles'
        },
        {
          name: 'Bob',
          age: 35,
          address: 'Chicago'
        }
      ]
    };
  }
};
</script>

这是一个包含了三列数据的简单表格，你可以根据需要添加更多的列和数据。

最后，你可以使用CSS来进一步美化你的管理界面，例如改变颜色、字体和边框等等。以下是一个简单的CSS示例：

.el-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.el-table td {
  border: 1px solid #ccc;
  padding: 5px;
}

.el-button {
  background-color: #409EFF;
  color: #fff;
}

这是一个简单的CSS样式，它将表格头部的背景色改为灰色，将表格单元格的边框改为灰色，并将按钮的背景色改为蓝色。

这只是一个简单的示例，你可以根据需要修改和完善它，以创建一个更好看的管理界面。