CSS模拟实现windows控制台界面

最新推荐文章于 2025-06-23 13:20:35 发布

原创最新推荐文章于 2025-06-23 13:20:35 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

有趣-好玩专栏收录该内容

54 篇文章

订阅专栏

本文介绍了一次使用CSS实现控制台样式的实践过程，详细展示了如何利用border、border-radius、padding等属性创建仿Windows控制台的布局效果。文章通过具体代码示例，解释了各属性的作用及使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

只从前天晚上学了CSS的部分知识后，现在看到什么都想拆成CSS布局来制作：所以就有了这件小Demo:

效果:

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="仿控制台" />
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  .title{
  float:left;
}
.outer-border{
  //width:0px;
  //height:0px;
  border: 1px solid;
  padding:5px;
  font-size:12px;
  border-radius:6px  
}
.inner-border{
 border: 1px solid; 
 margin: 23px 1px 1px 1px;
 font-size:15px;
 background-color:black;
 color:#ccc;
}
</style>
</head>
<body>
<div class="outer-border">
  <div class="title">
   <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAARCAYAAADZsVyDAAAAtklEQVQ4jWN89+3//4VzZjBQEySmZjAwUdVEJMACY7i4exKtaeqCjWA6O8EfzIbRIKAuycbACKQZYUFhbWVGFZcePXaKIQkYFHAXm5kYU8Xg/knTGUBOplkY09fg////gzEuOaIMRlYGM5CRkRGMkQ0h1kC4wfgkQYZjY+PzEVEGY3MxsgUEDCbNi8QCFmQOzDXYXIfLpbh8woJNMSHvErTwPygoaBMSCBeDsyKVAMitTDRyMAMAhc9K/K5z08wAAAAASUVORK5CYII=">
  </div>
  <div class="title">
    Administrator: C:\Windows\System32\cmd.exe  
    </div>
  
  <div class="inner-border">
  Microsoft Windows [Version 6.1.7601]<br/>
  Copyright (c) 2009 Microsoft Corporation.  All rights reserved.<br/>
<br/>
  C:\Users\Administrator>
  </div>
</div>
</body>
</html>