2. 程式人生 > >CSS模擬實現windows控制檯介面

CSS模擬實現windows控制檯介面

阿新 • • 發佈：2018-11-28

文章目錄


只從前天晚上學了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>

製作流程

涉及知識點

border邊框
border-radius圓角:用於最外的邊框.
padding內邊距:用於讓標題文字能夠距離最外的邊框有一定距離.
base64圖片:左上角的圖片.
float:left應該是浮動的知識,讓圖片能夠和標題文字在一行.

如果你希望掌握

需要學習以下內容:

  • border 邊框
  • 外邊距:簡單
  • 內邊距:簡單
  • 盒模型

待改進之處

右上角的:最小化,最大化,邊框.沒有想好怎麼做.

相關推薦

CSS模擬實現windows控制檯介面

文章目錄 效果: 程式碼 製作流程 涉及知識點 如果你希望掌握 待改進之處 只從前天晚上學了CSS的部分知識後，現在看到什麼都想拆成CSS佈局來製作：所以就有了這件小De

用Wireshark抓包來揭開ftp client GG和ftp server MM的勾搭內容並用C程式碼來簡要模擬實現Windows自帶的ftp client

      前面， 我們玩過http, 頗有點意思， 在本文中， 我們繼續來玩ftp(file transfer protocol).   http和ftp都是建立在tcp之上的應用層協議， 無論他們怎麼包裝, 怎麼裝bigger， 最終還是基於tcp端到端傳輸的。本文主要

windows控制檯變ubuntu shell介面！！！

由於電腦配置較low，想裝ubuntu雙系統而不得，但是用windows的dos控制檯有非常的難看！！！故想方設法將windos控制檯換了下裝，效果還不錯，就像這樣，是不是很像呢？ 那麼這麼好看的windows控制檯是怎麼設定的呢？ 1.選擇字型 圖片上使用的是 Sou

CSS中實現文字兩端對齊的方法，登陸註冊介面經常用到

在寫登陸或註冊介面時，經常會遇到文字兩端對齊(word中有類似對齊方式)的問題，如下圖： 使用者名稱和密碼並沒有兩端對齊，那麼該怎樣處理 其實只需要兩行CSS程式碼就可以解決： 關鍵兩行是：text-align:justify;  text-align-last

c語言模擬實現順序表的所有介面

順序表的c語言實現 此專案建立了3個原始檔，test.h用來建立結構體和函式的宣告，main.c用來實現函式，test.c用來實現順序表的總邏輯。 test.h #include<stdio.h> #include<assert.h> #include&

使用RAP2和Mock.JS實現Web API介面的資料模擬和測試

最近一直在思考如何對Web API的其介面資料進行獨立開發的問題，隨著Web API的越來越廣泛應用，很多開發也要求前端後端分離，例如統一的Web API介面後，Winform團隊、Web前端團隊、微信小程式或者APP團隊大家可以同步開發，在最初約定一些介面的輸入JSON資料和輸出JSON資料，但是隨著專案的

最新駕校模擬考試題庫大全介面實現及程式碼示例

最新駕校模擬考試題庫整合API介面，方便呼叫。採用公安部最新駕校模擬考試題庫，可任意選擇科目一、科目四模擬考試試題，任選駕照型別，可選擇引數為：C1，C2，A1，A2，B1，B2。可選 介面平臺：聚

批處理指令碼實現WINDOWS系統的USB介面禁用

    此批處理程式最好在域環境下使用，因為被禁用的使用者如果有管理員許可權，這種禁用是可以被破的     1、禁用USB批處理：把下死文字儲存為.bat檔案，就成了禁用USB介面的指令碼：       @echo off     COPY %WINDIR%/inf/usb

vector 介面模擬實現

vector 介面模擬實現 vector部分常用成員函式的模擬實現 private: //成員資料 T* _start; //指向開頭地址 T* _finish;//指向最後有效長度的後一個地址 T* _endofstorage; //

windows API之控制檯介面

    在windows裡面，使用者介面包括控制檯（Console）形式的和視窗（Window）形式的。控制檯形式的介面我們也是經常接觸的，不就是那個黑色的框框嗎？但是我們並沒有直接使用Windows API，通常我們呼叫printf來輸出、scanf來輸入。實際上，這個c語言函式也是通過Windows AP

CSS完美實現iframe高度自適應（支持跨域）

真的 高度 org lns nal aid .org bsp 方法 Iframe的強大功能偶就不多說了，它不但被開發人員經常運用，而且黑客們也常常使用它，總之用過的人知道它的強大之處，但是Iframe有個致命的“BUG”就是iframe的高度無法自動適應，這一點讓很多人都頭

python基礎作業------模擬實現一個ATM + 購物商城程序

setting water 轉賬 atm 結算 pan auth hide use 模擬實現一個ATM + 購物商城程序 作業需求： 額度 15000或自定義 實現購物商城，買東西加入 購物車，調用信用卡接口結賬 可以提現，手續費5% 每月22號出賬單，每月10號為還款日

使用css 3實現 移動端 文本 點點的效果

ext overflow webkit wrap kit hidden -c pre idt { width: 200px; text-overflow: ellipsis; /*white-space: nowrap;*/ overflow: hi

CSS如何實現div寬度根據內容自適應

應用 錯誤 clas ftw strong 有效 不能 why 如何 CSS如何實現div寬度根據內容自適應:建議:盡可能的手寫代碼，可以有效的提高學習效率和深度。在實際應用中，可能有這樣的需求，那就是需要div根據內容進行寬度自適應。有很多開發者可能誤以為如果不設定div

JS+CSS簡單實現DIV遮罩層顯示隱藏【轉藏】

button left dtd -m javascrip htm width dex absolute <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

模擬實現簡化版List叠代器&嵌入List

元素 sort 可能 節點數 != ring type 部分 分配 1、叠代器（iterators）概念（1）叠代器是一種抽象的設計概念，其定義為：提供一種方法，使他能夠按順序遍歷某個聚合體（容器）所包含的所有元素，但又不需要暴露該容器的內部表現方式。 （2）叠代器是一種行

集合的模擬實現（函數模板）

delete bcd break 一行 其中 執行 eset 數據類型 turn 我們可以用一個數組來模擬集合，add運算用以實現集合元素的增加，delete運算用於實現集合元素的刪除，find運算用以實現集合元素的查找，但是目前集合元素類型未知，可以是int、char、d

利用BitviseSSH免root實現Windows vs Linux的文件互傳

中文 light 開始 cnblogs 需要 點擊 ref href 文件傳輸 虛擬機截圖，，，質量有點差，大家看看！ ------------------- 在拿不到Linux root賬戶的情況下，winscp等工具是無法實現文件傳輸的，此時我們可以借用Bitvise

html+css+jquery 實現模態盒（模式窗口對話框）

weight data- 動畫 lac .com 按鈕 oot display spl 最近在實現一些jQuery相關的組件，既是為了熟悉一下 jQuery 的語法，也是為了能夠了解一些 jQuery 插件底層的基本實現。 今天花了一些時間做的一個模態盒（這是谷歌翻譯的名字

利用jquer+css簡單實現購物網站的圖片增大。

char class 利用 block 項目 spl padding eight add 在我們瀏覽淘寶京東等網站的時候，瀏覽商品的圖片時，當我們把鼠標移動到圖片上的時候，會讓其變大，利於消費者觀察，接下來我將用jQuery+css技術對其功能進行一簡單實現。 第一步：創建