在页面左边制作一个悬浮两行的列表 内容为学号和姓名,有背景图片且有CSS设置样式
时间: 2024-03-16 09:43:33 浏览: 90
好的,下面是一个实现您要求的悬浮框 CSS 样式:
```css
.floating-list {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: #fff;
background-image: url('your-image-url');
background-repeat: no-repeat;
background-size: cover;
padding: 20px;
border-radius: 10px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
font-size: 18px;
line-height: 1.5;
}
.floating-list p {
margin: 0;
padding: 5px 0;
}
```
您可以将上面的代码添加到您的 CSS 文件或 `<style>` 标签中,然后在 HTML 中使用以下代码来创建悬浮框:
```html
<div class="floating-list">
<p>学号:123456</p>
<p>姓名:张三</p>
</div>
```
这将在页面左侧创建一个带有背景图片、边框和阴影的悬浮框,包含学号和姓名两行内容。您可以根据需要自定义样式,例如更改背景图片链接、边框半径、字体大小和行高等。
相关问题
在页面左边制作一个悬浮两行的列表 内容为学号和姓名
好的,您可以使用以下代码来实现:
```html
<div style="position: fixed; top: 50%; left: 0;">
<p>学号:123456</p>
<p>姓名:张三</p>
</div>
```
这将在页面左侧创建一个悬浮的列表,包含学号和姓名两行内容。您可以根据需要自定义样式和位置。
阅读全文