Html模拟命令窗,CSS3 DOS命令行窗口模拟

最新推荐文章于 2021-06-08 10:48:29 发布
最新推荐文章于 2021-06-08 10:48:29 发布
阅读量595 收藏
点赞数
文章标签： Html模拟命令窗
这段CSS代码展示了如何创建一个具有@import导入字体、背景颜色、标题和按钮样式的交互式Shell界面。界面包括最大化、最小化和关闭按钮，以及自定义字体和颜色的主题。代码中还包含了滚动条和输入框的样式设计。
摘要由CSDN通过智能技术生成

CSS

语言：

CSSSCSS

确定

@import "https://fonts.googleapis.com/css?family=Inconsolata|Merriweather";

html {

background-color: #028090;

}

html h1,

html h2,

html h3,

html h4,

html h5 {

font-family: 'Merriweather', serif;

color: #00FF00;

}

html p,

html input,

html select,

html button {

font-family: 'Inconsolata', monospace;

color: #00FF00;

}

.container {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

display: flex;

}

.container .shell-container {

margin: auto;

background-color: #000000;

width: 900px;

height: 500px;

box-shadow: 0 0 10px #000000;

display: flex;

flex-direction: column;

}

.container .shell-container .header-shell {

margin: auto;

background-color: white;

width: 100%;

height: 35px;

display: flex;

}

.container .shell-container .header-shell .cli-img {

margin: auto 5px;

width: 20px;

height: 20px;

}

.container .shell-container .header-shell .shell-title {

font-size: 13px;

margin: auto 0;

color: #000000;

}

.container .shell-container .header-shell .minimize {

margin: 1px 1px 1px auto;

width: 35px;

height: 33px;

display: flex;

}

.container .shell-container .header-shell .minimize:hover {

background-color: #DFDFDF;

color: #FFFFFF;

}

.container .shell-container .header-shell .minimize:after {

content: '';

transform: rotate(90deg);

margin: auto;

border: 1px solid gray;

height: 10px;

}

.container .shell-container .header-shell .minimize:hover:after {

border-color: #000000;

}

.container .shell-container .header-shell .maximize {

display: flex;

margin: 1px 0;

width: 35px;

height: 33px;

content: "-";

}

.container .shell-container .header-shell .maximize:hover {

background-color: #DFDFDF;

color: #FFFFFF;

}

.container .shell-container .header-shell .maximize:after {

content: '';

transform: rotate(90deg);

margin: auto;

border: 1.5px solid gray;

height: 7.5px;

width: 7.5px;

}

.container .shell-container .header-shell .maximize:hover:after {

border-color: #000000;

}

.container .shell-container .header-shell .close {

display: flex;

margin: 1px;

width: 35px;

height: 33px;

content: "-";

}

.container .shell-container .header-shell .close:hover {

background-color: #FF0000;

color: #FFFFFF;

}

.container .shell-container .header-shell .close:before {

content: '';

transform: rotate(-135deg) translate(-50%, 0%);

margin: auto 0 auto auto;

border: 1px solid gray;

height: 11px;

}

.container .shell-container .header-shell .close:hover:before {

border-color: #FFFFFF;

}

.container .shell-container .header-shell .close:after {

content: '';

transform: rotate(135deg) translate(50%, 0%);

margin: auto auto auto 0;

border: 1px solid gray;

height: 11px;

}

.container .shell-container .header-shell .close:hover:after {

border-color: #FFFFFF;

}

.container .shell-container .body-shell {

margin: auto;

overflow-y: scroll;

height: 470px;

width: 100%;

line-height: 0px;

display: flex;

flex-direction: column;

font-size: 14px;

}

.container .shell-container .body-shell .microsoft-label {

margin: 9px 0;

}

.container .shell-container .body-shell .input {

margin-top: 25px;

display: flex;

}

.container .shell-container .body-shell .input .ping {

margin: auto 2px -5px;

width: 7px;

height: 4px;

animation: pong 1s infinite;

}

@keyframes pong {

0% {

background-color: #DFDFDF;

}

50% {

background-color: #DFDFDF;

}

51% {

background-color: #000000;

}

}

weixin_39786617
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[网络安全自学篇] 九十二.《Windows黑客编程技术详解》之病毒启动技术创建进程API、突破SESSION0隔离、内存加载详解（3）
杨秀璋的专栏
07-27 2万+
这是作者网络安全自学教程系列，主要是关于安全工具和实践操作的在线笔记，特分享出来与博友们学习，希望您喜欢，一起进步。这篇文章将带着大家来学习《Windows黑客编程技术详解》，其作者是甘迪文老师，推荐大家购买来学习。作者将采用实际编程和图文结合的方式进行分享，并且会进一步补充知识点。第三篇文章主要介绍木马病毒启动技术，包括创建进程API、突破SESSION0隔离、内存加载详解，希望对您有所帮助。
[网络安全自学篇] 八十七.恶意代码检测技术详解及总结
热门推荐
杨秀璋的专栏
07-16 2万+
这是作者网络安全自学教程系列，主要是关于安全工具和实践操作的在线笔记，特分享出来与博友们学习，希望您喜欢，一起进步。前文分享了威胁情报分析，通过Python抓取FreeBuf网站“APT”主题的相关文章。这篇文章将详细总结恶意代码检测技术，包括恶意代码检测的对象和策略、特征值检测技术、校验和检测技术、启发式扫描技术、虚拟机检测技术和主动防御技术。基础性文章，希望对您有所帮助~
HTML仿命令行界面具体实现
09-28
本文为大家介绍下HTML仿命令行界面的具体实现，感兴趣的朋友不要错过
模拟命令行自动输入的HTML,模拟命令行输入
weixin_32457139的博客
06-01 194
/*** "\\s*send\\s+-[t]{1}\\s+([A-Za-z0-9]|[^\\x00-\\xff])+\\s*(\\s+-[fs]{1}\\s+([A-Za-z0-9]|[^\\x00-\\xff])+)*"* @param cmdName 命令 * @param needArgs 必须使用的参数,每次这使用一个 * @param attchArgs 可以不使用的参数 * */pri...
HTML仿命令行界面
学习笔记
12-16 5663
HTML部分 WeChat Manager $(document).ready(function(){ $(document).keyup(function(event){ if(event.keyCode ==13){ $.ajax({ type: "POST", url: "ok.php", data: "code="+$("#in").val(),
html模拟终端,shell – Meteor JS在客户端html上模拟服务器命令行
weixin_29688227的博客
06-08 309
我是Meteor的新手,想要制作一个简单的应用程序.根据http://terokaisti.blogspot.com/2012/10/writing-terminal-app-with-meteor-js.html,我无法模拟服务器端的命令行在客户端(Mac OSX Mavericks),结果只是空白我输入命令并点击“运行”按钮.我正在使用上面网站的确切代码,除了我有autorun和exec = ...
Javascript模拟的DOS窗口
10-09
- **动态文本生成**：通过JavaScript动态生成类似DOS命令行界面中的提示信息，包括“C:\WINDOWS\system32>”等命令行提示符。 - **随机位置初始化**：使用`GetRandomNum()`函数为新创建的窗口随机设置初始位置，增加...
Javascript模拟的DOS窗
03-26
在模拟的DOS窗口中，事件监听用于处理用户与虚拟命令行的交互，包括鼠标点击关闭、最大化和最小化按钮时触发的不同功能。例如，`CurrentCmdFocus(obj)` 和 `CurrentCmdBlur(obj)` 函数分别在元素获得和失去焦点时...
JS/UIX web形式的DOS窗口
09-24
**JS/UIX web形式的DOS窗口** ...通过JavaScript和UI设计，它在浏览器中实现了DOS命令行，为用户带来了跨平台的复古计算体验。随着Web技术的不断进步，JS/UIX有望在保留其复古魅力的同时，提供更加丰富和强大的功能。
HTML语法大全.dos
10-19
HTML语法大全.dos,是了解掌握HTML的好帮手
在Windows用HTML模仿Linux功能
04-18
在Windows用HTML模仿Linux功能（打开index.htm） ?
DOS命令集绵.html
11-01
DOS命令大全，DOS——一个经典的系统，命令大全。学习电脑从DOS开始。
hcs:一款概念式的以命令行方式，快速构建html页面的在线编辑工具
06-12
hcs 版本：1.0 demo：[) changelog V1.0 [!] 提供基础命令，及生成加载页面功能 [!] 解决dev undev 切换hug [!] css ../css/a.css引入css文件功能 [!] css 命令打开样式编辑器 远景 有一个浏览器就可以开始你的前端之旅了。用它完成开发预览调试。 初始化组件 请在chrome浏览器下使用。 下载hcs文件夹放到本地环境根目录，推荐使用 或者其他php环境 访问: localhost/hcs/index.html API说明 hcs所引入页面自动成为默认工程文件,初始是空的html页面。你可以自定义添加一些常用标签比如link script gallery 由于权限问题，save命令，新建目录和文件不能正常运行，下载到本地即可正常使用。 命令行 cd 指定一个节点 比如 cd div.nav 指定焦点到标签为div
模拟命令行自动输入的HTML,HTML5 命令行界面仿真和自动打字动画
weixin_27605509的博客
06-01 353
JavaScript语言：JaveScriptBabelCoffeeScript确定$.fn.typewriter = function() {this.each(function() {var c = $(this),b = c.html(),a = 0,d = 0;c.html("");var e = function() {if ("var f = new RegExp(/g = new R...
php模拟cmd操作页面,HTML仿命令行界面具体实现方法
weixin_30326905的博客
03-11 235
本文为大家介绍下HTML仿命令行界面的具体实现，感兴趣的朋友不要错过HTML部分代码如下:WeChat Manager$(document).ready(function(){$(document).keyup(function(event){if(event.keyCode ==13){$.ajax({type: "POST",url: "ok.php",data: "code="+$("#in...
html模仿windows窗口_使用 Mingw 在 Windows 上使用 GNU | Linux 中国
weixin_39766014的博客
11-20 206
导读：在 Windows 上安装 GNU 编译器集合(gcc)和其他 GNU 组件来启用 GNU Autotools。本文字数：2545，阅读时长大约：3分钟https://linux.cn/article-12549-1.html作者：Seth Kenlon译者：geekpi如果你是一名使用 Windows 的黑客，你不需要专有应用来编译代码。借助Minimalist GNU fo...
html仿命令行界面,HTML仿命令行界面具体实现方法
weixin_34963576的博客
06-07 525
本文为大家介绍下HTML仿命令行界面的具体实现，感兴趣的朋友不要错过HTML部分代码如下:WeChat Manager$(document).ready(function(){$(document).keyup(function(event){if(event.keyCode ==13){$.ajax({type: "POST",url: "ok.php",data: "code="+$("#in...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值