CSS模拟Win11记事本界面改进版

马黑黑

*无标题 - 记事本━    口    ×

  文件(F) 编辑(E) 格式(O) 视图(V) 帮助(H)

Hello CSS!

▲

◀▶

马黑黑

用到两张图——
纵向滚动条：

np1

记事本logo ：

np2

全部代码：

1. <style type="text/css">
   
2. 
   
3. .父框 {
   
4.         margin: 30px auto;
   
5.         width: 600px;
   
6.         height: 380px;
   
7.         background: #fff;
   
8.         border:1px solid #000;
   
9.         border-radius: 10px;
   
10.         font-family: 'Microsoft Yahei';
    
11.         box-shadow: 1px 1px 2px #aaa;
    
12.         resize: both;
    
13.         overflow: hidden;
    
14.         display: flex;
    
15.         flex-direction: column;
    
16. }
    
17. 
    
18. .标题栏 {
    
19.         margin: -1px;
    
20.         height: 30px;
    
21.         line-height: 30px;
    
22.         padding: 0 16px 0 30px;
    
23.         color: #eee;
    
24.         font-size: 14px;
    
25.         background: #46474b url('https://www.huachaowang.com/data/attachment/forum/202201/11/161225k0o04yfkyzqn2qcz.png') 8px 4px no-repeat;
    
26.         border-radius: 10px 10px 0 0 ;
    
27. }
    
28. 
    
29. .菜单栏 {
    
30.         height: 25px;
    
31.         line-height: 25px;
    
32.         font-size: 0.8em;
    
33.         background: #fff;
    
34.         border-bottom: 2px solid #ddd;
    
35. }
    
36. .编辑框 {
    
37.         flex-grow: 2;
    
38.         display: flex;
    
39.         flex-direction: row;
    
40. }
    
41. .输入栏 {
    
42.         height: 20px;
    
43.         width: 70px;
    
44.         line-height: 20px;
    
45.         font-size: 14px;
    
46.         padding: 0 0 0 2px;
    
47.         border-right: 1px solid #000;
    
48.         display: inline-block;
    
49.         animation: 光标闪烁 1s infinite;
    
50. }
    
51. .纵滚动条 {
    
52.         width: 4px;
    
53.         font-size: 10px;
    
54.         background: #eee url('https://www.huachaowang.com/data/attachment/forum/202201/11/161225ykus2e2zlizszusg.png') 4px 100% no-repeat;
    
55.         color: #999;
    
56.         padding: 0 14px 0 4px;
    
57. }
    
58. 
    
59. .横滚动条 {
    
60.         height: 22px;
    
61.         font-size: 12px;
    
62.         background: #eee;
    
63.         color: #999;
    
64.         padding: 0 26px 0 4px;
    
65. }
    
66. 
    
67. .右浮动 { float: right; }
    
68. 
    
69. .拉伸 { flex-grow:2; }
    
70. 
    
71. @keyframes 光标闪烁 { to { border-right: 1px #fff; } }
    
72. 
    
73. </style>
    
74. 
    
75. <div class="父框">
    
76.         <div class="标题栏">*无标题 - 记事本<span class="右浮动">━    口    ×</span></div>
    
77.         <div class="菜单栏">  文件(F)    编辑(E)    格式(O)    视图(V)  帮助(H)</div>
    
78.         <div class="编辑框">
    
79.                 <div class="输入栏">Hello CSS!</div>
    
80.                 <div class="拉伸"></div>
    
81.                 <div class="纵滚动条">▲</div>
    
82.         </div>
    
83.         <div class="横滚动条">&#9664;<span class="右浮动">&#9654;</span></div>
    
84. </div>
    

复制代码

红影

比较了一下，是改进了那个闪动的光标么？

马黑黑

红影 发表于 2022-1-11 16:14
比较了一下，是改进了那个闪动的光标么？

还在编辑中呢。现在差不多了。

你再仔细瞅瞅，好像区别不止这些

马黑黑

这个模拟，觉得难度在纵向滚动条的下三角方向键，简洁的处理方法是给它（一个div）加一个定位底图。

闪烁输入光标借用 div 右边框（border-right）变色动画完成（第一个版本用的是字符 | 的变色）。

马黑黑

☞ 点我瞧瞧