HTML 创建类似 Windows 11 风格的小窗口
<!DOCTYPE html>
<html>
<head>
<title>Windows 11 Style Window</title>
<style>
body {
background-color: white;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
<pre><code> .window {
background-color: #d3d3d3;
width: 300px;
height: 200px;
border-radius: 10px;
position: relative;
}
.window .title-bar {
background-color: #b3b3b3;
height: 30px;
display: flex;
align-items: center;
padding: 0 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.window .title-bar .icon {
width: 20px;
height: 20px;
background-image: url('./q.jpg');
background-size: cover;
margin-right: 5px;
}
.window .title {
color: white;
font-weight: bold;
}
.window .content {
padding: 10px;
}
</style>
</code></pre>
</head>
<body>
<div class='window'>
<div class='title-bar'>
<div class='icon'></div>
<div class='title'>Window Title</div>
</div>
<div class='content'>
<!-- Window content goes here -->
</div>
</div>
</body>
</html>
<p>在上面的代码中，我们使用了 CSS 来定义样式。'window' 类设置了窗口的样式，'title-bar' 类设置了标题栏的样式，'icon' 类设置了图标的样式。</p>
原文地址: https://www.cveoy.top/t/topic/qlSB 著作权归作者所有。请勿转载和采集!