写一个横排六个格子的html
时间: 2023-07-31 14:07:25 浏览: 62
可以使用以下代码:
```html
<div style="display: inline-block;">
<div style="width: 50px; height: 50px; border: 1px solid black;"></div>
<div style="width: 50px; height: 50px; border: 1px solid black;"></div>
<div style="width: 50px; height: 50px; border: 1px solid black;"></div>
<div style="width: 50px; height: 50px; border: 1px solid black;"></div>
<div style="width: 50px; height: 50px; border: 1px solid black;"></div>
<div style="width: 50px; height: 50px; border: 1px solid black;"></div>
</div>
```
其中,`display: inline-block` 的作用是让六个格子横排显示;每个格子的大小可以根据实际需要进行调整,这里设置了宽度和高度均为 50px,并且添加了黑色边框,以便区分格子之间的界限。
相关问题
给我写一个使用html和elementUI写的横排导航栏的代码
好的,下面是一个使用HTML和ElementUI写的横排导航栏的代码:
```html
<template>
<div>
<el-menu
mode="horizontal"
:default-active="$route.path"
class="el-menu-demo"
@select="handleSelect"
>
<el-menu-item index="/">首页</el-menu-item>
<el-menu-item index="/about">关于我们</el-menu-item>
<el-menu-item index="/contact">联系我们</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
},
};
</script>
<style>
.el-menu-demo {
background-color: #f8f8f9;
}
.el-menu-demo .el-menu-item {
padding: 0 20px;
}
</style>
```
以上代码使用了ElementUI的`el-menu`和`el-menu-item`组件来创建横排导航栏。其中`mode="horizontal"`属性用于指定导航栏为横排模式,`:default-active="$route.path"`属性用于高亮当前选中的导航项,`@select="handleSelect"`属性用于监听导航项的选择事件。在`el-menu-item`标签中,`index`属性用于指定导航项对应的路由路径,导航项的文本内容则放置在标签内部。最后,使用CSS样式对导航栏进行了简单的美化。
给我写一个使用纯html和elementUI写的横排导航栏的代码
好的,下面是一个使用纯HTML和ElementUI写的横排导航栏的代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>横排导航栏</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-menu
mode="horizontal"
:default-active="activeIndex"
class="el-menu-demo"
@select="handleSelect"
>
<el-menu-item index="/">首页</el-menu-item>
<el-menu-item index="/about">关于我们</el-menu-item>
<el-menu-item index="/contact">联系我们</el-menu-item>
</el-menu>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
activeIndex: '/'
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
},
});
</script>
</body>
</html>
```
以上代码使用了ElementUI的`el-menu`和`el-menu-item`组件来创建横排导航栏。在HTML文件头部引入了ElementUI的CSS文件和Vue.js和ElementUI的JavaScript文件。在`el-menu`标签中,`mode="horizontal"`属性用于指定导航栏为横排模式,`:default-active="activeIndex"`属性用于高亮当前选中的导航项,`@select="handleSelect"`属性用于监听导航项的选择事件。在`el-menu-item`标签中,`index`属性用于指定导航项对应的路由路径,导航项的文本内容则放置在标签内部。在JavaScript中,使用Vue.js来初始化Vue实例,并将`activeIndex`设置为当前选中的导航项的路由路径。最后,使用CSS样式对导航栏进行了简单的美化。