论坛 › 马黑黑教程专版 › CSS模拟Win11记事本界面改进版

马黑黑 发表于 2022-1-11 16:11

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

本帖最后由 马黑黑 于 2022-1-11 16:14 编辑 <br /><br /><style type="text/css">

.父框 {
        margin: 30px auto;
        width: 600px;
        height: 380px;
        background: #fff;
        border:1px solid #000;
        border-radius: 10px;
        font-family: 'Microsoft Yahei';
        box-shadow: 1px 1px 2px #aaa;
        resize: both;
        overflow: hidden;
        display: flex;
        flex-direction: column;
}

.标题栏 {
        margin: -1px;
        height: 30px;
        line-height: 30px;
        padding: 0 16px 0 30px;
        color: #eee;
        font-size: 14px;
        background: #46474b url('https://www.huachaowang.com/data/attachment/forum/202201/11/161225k0o04yfkyzqn2qcz.png') 8px 4px no-repeat;
        border-radius: 10px 10px 0 0 ;
}

.菜单栏 {
        height: 25px;
        line-height: 25px;
        font-size: 0.8em;
        background: #fff;
        border-bottom: 2px solid #ddd;
}
.编辑框 {
        flex-grow: 2;
        display: flex;
        flex-direction: row;
}
.输入栏 {
        height: 20px;
        width: 70px;
        line-height: 20px;
        font-size: 14px;
        padding: 0 0 0 2px;
        border-right: 1px solid #000;
        display: inline-block;
        animation: 光标闪烁 1s infinite;
}
.纵滚动条 {
        width: 4px;
        font-size: 10px;
        background: #eee url('https://www.huachaowang.com/data/attachment/forum/202201/11/161225ykus2e2zlizszusg.png') 4px 100% no-repeat;
        color: #999;
        padding: 0 14px 0 4px;
}

.横滚动条 {
        height: 22px;
        font-size: 12px;
        background: #eee;
        color: #999;
        padding: 0 26px 0 4px;
}

.右浮动 { float: right; }

.拉伸 { flex-grow:2; }

@keyframes 光标闪烁 { to { border-right: 1px #fff; } }

</style>

<div class="父框">
        <div class="标题栏">*无标题 - 记事本<span class="右浮动">━&nbsp; &nbsp; 口&nbsp; &nbsp; ×</span></div>
        <div class="菜单栏">&nbsp; 文件(F)    编辑(E)    格式(O)    视图(V)帮助(H)</div>
        <div class="编辑框">
                <div class="输入栏">Hello CSS!</div>
                <div class="拉伸"></div>
                <div class="纵滚动条">▲</div>
        </div>
        <div class="横滚动条">◀<span class="右浮动">▶</span></div>
</div>

马黑黑 发表于 2022-1-11 16:12

本帖最后由 马黑黑 于 2022-1-11 16:17 编辑

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



记事本logo ：




全部代码：

<style type="text/css">

.父框 {
        margin: 30px auto;
        width: 600px;
        height: 380px;
        background: #fff;
        border:1px solid #000;
        border-radius: 10px;
        font-family: 'Microsoft Yahei';
        box-shadow: 1px 1px 2px #aaa;
        resize: both;
        overflow: hidden;
        display: flex;
        flex-direction: column;
}

.标题栏 {
        margin: -1px;
        height: 30px;
        line-height: 30px;
        padding: 0 16px 0 30px;
        color: #eee;
        font-size: 14px;
        background: #46474b url('https://www.huachaowang.com/data/attachment/forum/202201/11/161225k0o04yfkyzqn2qcz.png') 8px 4px no-repeat;
        border-radius: 10px 10px 0 0 ;
}

.菜单栏 {
        height: 25px;
        line-height: 25px;
        font-size: 0.8em;
        background: #fff;
        border-bottom: 2px solid #ddd;
}
.编辑框 {
        flex-grow: 2;
        display: flex;
        flex-direction: row;
}
.输入栏 {
        height: 20px;
        width: 70px;
        line-height: 20px;
        font-size: 14px;
        padding: 0 0 0 2px;
        border-right: 1px solid #000;
        display: inline-block;
        animation: 光标闪烁 1s infinite;
}
.纵滚动条 {
        width: 4px;
        font-size: 10px;
        background: #eee url('https://www.huachaowang.com/data/attachment/forum/202201/11/161225ykus2e2zlizszusg.png') 4px 100% no-repeat;
        color: #999;
        padding: 0 14px 0 4px;
}

.横滚动条 {
        height: 22px;
        font-size: 12px;
        background: #eee;
        color: #999;
        padding: 0 26px 0 4px;
}

.右浮动 { float: right; }

.拉伸 { flex-grow:2; }

@keyframes 光标闪烁 { to { border-right: 1px #fff; } }

</style>

<div class="父框">
        <div class="标题栏">*无标题 - 记事本<span class="右浮动">━    口    ×</span></div>
        <div class="菜单栏">文件(F)    编辑(E)    格式(O)    视图(V)帮助(H)</div>
        <div class="编辑框">
                <div class="输入栏">Hello CSS!</div>
                <div class="拉伸"></div>
                <div class="纵滚动条">▲</div>
        </div>
        <div class="横滚动条">◀<span class="右浮动">▶</span></div>
</div>

红影 发表于 2022-1-11 16:14

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

马黑黑 发表于 2022-1-11 16:15

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

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

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

马黑黑 发表于 2022-1-11 16:25

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

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

马黑黑 发表于 2022-1-12 18:17

☞<button onclick="javascript:alert('Hello JavaScript!');">点我瞧瞧</button>

查看完整版本: CSS模拟Win11记事本界面改进版