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

试用CSS模拟Win11记事本界面

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

.np-main {
        margin: 10px auto;
        width: 600px;
        height: 380px;
        background: #fff;
        border:1px solid #b3b3b3;
        border-radius: 10px;
        resize: both;
        overflow: auto;
        font-family: 'Microsoft Yahei';
}

.np-title {
        height: 30px;
        line-height: 30px;
        padding-left: 8px;
        padding-right: 8px;
        font-size:15px;
        margin-top: -1px;
        background: #46474b;
        border-radius: 10px 10px 0 0;
        color: #fff;
}

.np-menu {
        height: 25px;
        line-height: 25px;
        font-size: 0.8em;
        background: #eee;
}

.np-pointer {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        padding: 2px;
        color: #000;
}

.right { float: right; }
.np-fl {         animation: np-Flash 1s infinite; }

@keyframes np-Flash { 100% { color: #fff; } }

</style>

<div class="np-main">
        <div class="np-title">*无标题 - 记事本<span class="right">━&nbsp; &nbsp; 口 &nbsp; &nbsp; <strong>×</strong></span></div>
        <div class="np-menu">&nbsp; 文件(F)    编辑(E)    格式(O)    视图(V)帮助(H)</div>
        <div class="np-pointer">Hello CSS!<span class="np-fl">|</span></div>
</div>

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

未完成的项目：

[*]滚动条
[*]界面在桌面上呈现的立体感
[*]其他细节

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

输入光标模拟的不太像，看得出有渐变过程，现实是一闪一闪而已

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

看到这个，你会不会想在上面输入文字？{:4_170:}

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

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

一楼代码分享：

<style type="text/css">

.np-main {
        margin: 10px auto;
        width: 600px;
        height: 380px;
        background: #fff;
        border:1px solid #b3b3b3;
        border-radius: 10px;
        resize: both;
        overflow: auto;
        font-family: 'Microsoft Yahei';
}

.np-title {
        height: 30px;
        line-height: 30px;
        padding-left: 8px;
        padding-right: 8px;
        font-size:15px;
        margin-top: -1px;
        background: #46474b;
        border-radius: 10px 10px 0 0;
        color: #fff;
}

.np-menu {
        height: 25px;
        line-height: 25px;
        font-size: 0.8em;
        background: #eee;
}

.np-pointer {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        padding: 2px;
        color: #000;
}

.right { float: right; }
.np-fl {         animation: np-Flash 1s infinite; }

@keyframes np-Flash { 100% { color: #fff; } }

</style>

<div class="np-main">
        <div class="np-title">*无标题 - 记事本<span class="right">━    口   <strong>×</strong></span></div>
        <div class="np-menu">文件(F)    编辑(E)    格式(O)    视图(V)帮助(H)</div>
        <div class="np-pointer">Hello CSS!<span class="np-fl">|</span></div>
</div>


红影 发表于 2022-1-11 13:40

马黑黑 发表于 2022-1-11 11:27
看到这个，你会不会想在上面输入文字？

我刚想说，看到这个忍不住就想去输入内容{:4_173:}

红影 发表于 2022-1-11 13:44

马黑黑 发表于 2022-1-11 11:26
输入光标模拟的不太像，看得出有渐变过程，现实是一闪一闪而已

这个好像那种一闪一闪的提示符，原来是用语句模拟出来的，很赞{:4_187:}

马黑黑 发表于 2022-1-11 14:03

红影 发表于 2022-1-11 13:44
这个好像那种一闪一闪的提示符，原来是用语句模拟出来的，很赞

这个闪的不是很想输入光标，我再挑战一下

马黑黑 发表于 2022-1-11 14:03

红影 发表于 2022-1-11 13:40
我刚想说，看到这个忍不住就想去输入内容

挺有意思的

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

马黑黑 发表于 2022-1-11 14:03
这个闪的不是很想输入光标，我再挑战一下

饿呢，看到了改进版，哈哈，你这是让人被迷惑么{:4_173:}

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

马黑黑 发表于 2022-1-11 14:03
挺有意思的

是的，这个语句有趣，跟输入法里的光标太像了{:4_173:}

马黑黑 发表于 2022-1-11 17:20

红影 发表于 2022-1-11 16:53
是的，这个语句有趣，跟输入法里的光标太像了

animation动画神奇哦

马黑黑 发表于 2022-1-11 17:21

红影 发表于 2022-1-11 16:52
饿呢，看到了改进版，哈哈，你这是让人被迷惑么

你说的执着{:5_106:}

加林森 发表于 2022-1-11 19:43

谢谢老黑的教程！{:4_190:}

红影 发表于 2022-1-11 20:20

马黑黑 发表于 2022-1-11 17:20
animation动画神奇哦

是你把它用出新花样了{:4_173:}

红影 发表于 2022-1-11 20:20

马黑黑 发表于 2022-1-11 17:21
你说的执着

执着出精品{:4_187:}

马黑黑 发表于 2022-1-11 22:06

红影 发表于 2022-1-11 20:20
执着出精品

希望如此

马黑黑 发表于 2022-1-11 22:07

红影 发表于 2022-1-11 20:20
是你把它用出新花样了

工具在那里，由人去用

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

加林森 发表于 2022-1-11 19:43
谢谢老黑的教程！

不客气

加林森 发表于 2022-1-12 08:42

马黑黑 发表于 2022-1-11 22:12
不客气

嗯嗯
页: [1] 2 3
查看完整版本: 试用CSS模拟Win11记事本界面