创建类似 Windows 11 小窗口的 HTML 页面 - 简单的灰色窗口设计
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: white;
}
<p>.window {
width: 300px;
height: 200px;
background-color: gray;
margin: 50px auto;
padding: 10px;
position: relative;
}</p>
<p>.title-bar {
background-color: darkgray;
height: 30px;
line-height: 30px;
padding-left: 10px;
color: white;
}</p>
<p>.icon {
width: 20px;
height: 20px;
background-image: url('./q.jpg');
background-size: cover;
position: absolute;
top: 5px;
left: 5px;
}
</style></p>
</head>
<body>
<div class="window">
<div class="title-bar">
<div class="icon"></div>
Window Title
</div>
<!-- Window content goes here -->
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/qlSo 著作权归作者所有。请勿转载和采集!