设计一个盒子为毛玻璃效果,高度占页面的百分之70,宽度占页面的百分之八十,将盒子上下一分为二,上面的盒子占整个高度百分之30靠右侧有一个装图片的盒子高度50px,宽度80px ,且边角为圆角,左侧有一个大标题,和两列无序列表,下面的盒子用来装文字
时间: 2024-05-03 11:19:12 浏览: 9
可以使用CSS来实现这个盒子的设计,以下是一个可能的实现方案:
```html
<div class="glass-box">
<div class="glass-box-top">
<div class="image-box">
<img src="your-image-url" alt="Your image" />
</div>
<div class="title">
Your title
</div>
<div class="list-container">
<ul class="list-left">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ul class="list-right">
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ul>
</div>
</div>
<div class="glass-box-bottom">
Your content goes here
</div>
</div>
```
```css
.glass-box {
height: 70%;
width: 80%;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.2); /* 设置背景透明度 */
border-radius: 10px; /* 设置边角为圆角 */
overflow: hidden; /* 隐藏盒子内的溢出内容 */
}
.glass-box-top {
height: 30%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 10px;
}
.image-box {
height: 50px;
width: 80px;
border-radius: 5px;
overflow: hidden;
}
.image-box img {
height: 100%;
width: 100%;
object-fit: cover;
}
.title {
font-size: 24px;
font-weight: bold;
}
.list-container {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 10px;
}
.list-left,
.list-right {
list-style-type: none;
margin: 0;
padding: 0;
}
.list-left li,
.list-right li {
margin-bottom: 5px;
}
.glass-box-bottom {
height: 70%;
padding: 10px;
overflow-y: scroll; /* 允许盒子内的内容滚动 */
}
```
这个方案中,首先使用一个容器div来代表整个盒子,设置其高度为70%、宽度为80%、背景色为白色并设置透明度,边角设置为圆角。然后在盒子内部分为上下两个部分,上部分使用一个容器div来代表,设置其高度为30%、flex布局并居中对齐,边距设置为10px。上部分内部分为三个部分,分别是图片、标题和两列无序列表。图片部分使用一个容器div来代表,设置高度为50px、宽度为80px,设置边角为圆角,并设置溢出内容隐藏。标题使用一个普通的div元素,并设置字体大小和粗细。两列无序列表使用两个ul元素,分别设置其样式和内容。下部分就是一个简单的div元素,用来装文字,并设置滚动条样式。