摘要
我們?cè)趯慴log或?qū)懳臋n說明的時(shí)候，有時(shí)候說明在控制臺(tái)中怎樣使用，在windows xp/2000中就是cmd命令。 為了表達(dá)這種在控制臺(tái)中的操作，我寫了個(gè) CSS來呈現(xiàn)效果。
需求和設(shè)計(jì)要求
- 在網(wǎng)頁文檔中(blog或用戶手冊(cè))，呈現(xiàn)一個(gè)控制臺(tái)的樣式，有邊框和標(biāo)題欄，黑色背景。如下圖
- 這個(gè)控制臺(tái)可以真實(shí)的控制臺(tái)那樣可以，在適當(dāng)?shù)臅r(shí)候，有上下或左右滾動(dòng)條
- 控制臺(tái)里允許加入的元素有<p>塊。
- 為了區(qū)分控制臺(tái)里的輸入和輸出字符串，分別可以用<kbd>和<samp>括起來，然后設(shè)置他們的CSS樣式
- 當(dāng)前目錄提示符，用<span>元素表達(dá)。
- <kbd>、<samp>和<span>元素只能包含在<p>元素中，不能直接在“控制臺(tái)”中。
實(shí)現(xiàn)
- 控制臺(tái)標(biāo)題用背景圖片實(shí)現(xiàn)
- 因?yàn)橥瑫r(shí)有標(biāo)題和滾動(dòng)條，所以為了不讓滾動(dòng)條覆蓋部分標(biāo)題，控制臺(tái)至少要用兩個(gè)<div>來表達(dá)，一個(gè)表示控制臺(tái)邊框，一個(gè)表示控制臺(tái)里內(nèi)容
- 控制臺(tái)的寬度是固定的，高度有控制臺(tái)的內(nèi)容層表達(dá)
CSS
@charset "utf-8";
/**
* Copyright (c) 李四 fourlee@live.cn
*/
/* 控制臺(tái)邊框?qū)?*/
.console_box {
background: #000000 url(Command_heading.jpg) no-repeat;
width: 660px; /* windows 控制臺(tái)默認(rèn)寬度 */
margin: 0px;
padding-top: 23px; /* 控制臺(tái)標(biāo)題欄高度 */
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border: 4px outset #FFFFFF;
}
/* 控制臺(tái)內(nèi)容層 */
.console_box .console {
background-color: #000000;
font-family: "Courier New", Courier, "宋體", monospace;
font-size: 12px;
color: #CCCCCC;
width: 656px;
height: 396px;
margin: 0px;
padding: 0px;
border: 2px inset #666666;
overflow: auto; /* 自動(dòng)加入滾動(dòng)條 */
}
.console_box .console p {
line-height: 120%;
margin: 0px;
padding-bottom: 1em; /* 段落下面留一空行的高度 */
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
}
HTML
<div class="console_box">
<div class="console"
style="height:200px;">
<p>此處顯示 class "console_box" 的內(nèi)容此處顯示 class "console_box" 的內(nèi)容此處顯示 class "console_box" 的內(nèi)容此處顯示 class "console_box" 的內(nèi)容此處顯示 class "console_box" 的內(nèi)容此處顯示 class "console_box" 的內(nèi)容此處顯示 class "console_box" 的內(nèi)容此處顯示 class "console_box" 的內(nèi)容此處顯示 class "console_box" 的內(nèi)容此處顯示 class "console_box" 的內(nèi)容此處顯示 class "console_box" 的內(nèi)容</p>
<p>此處顯示 class "console_box" 的內(nèi)容</p>
<p>此處顯示 class "console_box" 的內(nèi)容</p>
<p>此處顯示 class "console_box" 的內(nèi)容</p>
<p>此處顯示 class "console_box" 的內(nèi)容</p>
<p>此處顯示 class "console_box" 的內(nèi)容</p>
<p>此處顯示 class "console_box" 的內(nèi)容</p>
<p>此處顯示 class "console_box" 的內(nèi)容</p>
<p>此處顯示 class "console_box" 的內(nèi)容</p>
<p>此處顯示 class "console_box" 的內(nèi)容</p>
<p>此處顯示 class "console_box" 的內(nèi)容</p>
<p>此處顯示 class "console_box" 的內(nèi)容</p>
<p>此處顯示 class "console_box" 的內(nèi)容</p>
</div>
</div>
可以在<div class="console" ...>中設(shè)置高度來設(shè)置控制臺(tái)的高度。
后記
一個(gè)控制臺(tái)的效果基本出來了。在IE6和Firefox中測試通過。還有工作可做
- 為了區(qū)分控制臺(tái)中的輸入和輸出，建議用<kbd>和<samp>標(biāo)簽，并設(shè)置這寫標(biāo)簽的CSS樣式。
- 更改標(biāo)題欄圖標(biāo)和設(shè)置一下CSS樣式，就可以實(shí)現(xiàn)Linux或Mac等操作系統(tǒng)中的控制臺(tái)效果
- 還有一些沒遇到和想到的問題
這是我第一次用Blog，還不知道上傳。這些源代碼和圖片的，請(qǐng)留下EMail，或等我熟悉了Blog再下載。
posted on 2008-02-04 17:45
李四飛刀 閱讀(2141)
評(píng)論(11) 編輯 收藏 所屬分類:
Blog面膜