这是一个黑白风格的页面,分为左右两个部分。左边占 1/4 的宽度,是目录部分,其中有一个圆角矩形的目录项。右边占 3/4 的宽度,没有元素。
你可以使用 HTML 和 CSS 来实现这个页面。
HTML 代码如下:
<div class="page">
<div class="left">
<div class="menu-item">目录项</div>
</div>
<div class="right"></div>
</div>
CSS 代码如下:
.page {
display: flex;
}
.left {
width: 25%;
background-color: #000;
color: #fff;
}
.right {
width: 75%;
background-color: #fff;
color: #000;
}
.menu-item {
border-radius: 5px;
background-color: #fff;
color: #000;
padding: 5px 10px;
margin: 5px 0;
}
这样,你就可以创建一个黑白风格的页面,左边有一个圆角矩形的目录项,右边没有元素了。