摘要
我們在寫blog或寫文檔說明的時候，有時候說明在控制臺中怎樣使用，在windows xp/2000中就是cmd命令。 為了表達這種在控制臺中的操作，我寫了個 CSS來呈現效果。
需求和設計要求
- 在網頁文檔中(blog或用戶手冊)，呈現一個控制臺的樣式，有邊框和標題欄，黑色背景。如下圖
- 這個控制臺可以真實的控制臺那樣可以，在適當的時候，有上下或左右滾動條
- 控制臺里允許加入的元素有<p>塊。
- 為了區分控制臺里的輸入和輸出字符串，分別可以用<kbd>和<samp>括起來，然后設置他們的CSS樣式
- 當前目錄提示符，用<span>元素表達。
- <kbd>、<samp>和<span>元素只能包含在<p>元素中，不能直接在“控制臺”中。
實現
- 控制臺標題用背景圖片實現
- 因為同時有標題和滾動條，所以為了不讓滾動條覆蓋部分標題，控制臺至少要用兩個<div>來表達，一個表示控制臺邊框，一個表示控制臺里內容
- 控制臺的寬度是固定的，高度有控制臺的內容層表達
CSS
@charset "utf-8";
/**
* Copyright (c) 李四 fourlee@live.cn
*/
/* 控制臺邊框層 */
.console_box {
background: #000000 url(Command_heading.jpg) no-repeat;
width: 660px; /* windows 控制臺默認寬度 */
margin: 0px;
padding-top: 23px; /* 控制臺標題欄高度 */
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border: 4px outset #FFFFFF;
}
/* 控制臺內容層 */
.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; /* 自動加入滾動條 */
}
.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" 的內容此處顯示 class "console_box" 的內容此處顯示 class "console_box" 的內容此處顯示 class "console_box" 的內容此處顯示 class "console_box" 的內容此處顯示 class "console_box" 的內容此處顯示 class "console_box" 的內容此處顯示 class "console_box" 的內容此處顯示 class "console_box" 的內容此處顯示 class "console_box" 的內容此處顯示 class "console_box" 的內容</p>
<p>此處顯示 class "console_box" 的內容</p>
<p>此處顯示 class "console_box" 的內容</p>
<p>此處顯示 class "console_box" 的內容</p>
<p>此處顯示 class "console_box" 的內容</p>
<p>此處顯示 class "console_box" 的內容</p>
<p>此處顯示 class "console_box" 的內容</p>
<p>此處顯示 class "console_box" 的內容</p>
<p>此處顯示 class "console_box" 的內容</p>
<p>此處顯示 class "console_box" 的內容</p>
<p>此處顯示 class "console_box" 的內容</p>
<p>此處顯示 class "console_box" 的內容</p>
<p>此處顯示 class "console_box" 的內容</p>
</div>
</div>
可以在<div class="console" ...>中設置高度來設置控制臺的高度。
后記
一個控制臺的效果基本出來了。在IE6和Firefox中測試通過。還有工作可做
- 為了區分控制臺中的輸入和輸出，建議用<kbd>和<samp>標簽，并設置這寫標簽的CSS樣式。
- 更改標題欄圖標和設置一下CSS樣式，就可以實現Linux或Mac等操作系統中的控制臺效果
- 還有一些沒遇到和想到的問題
這是我第一次用Blog，還不知道上傳。這些源代碼和圖片的，請留下EMail，或等我熟悉了Blog再下載。
posted on 2008-02-04 17:45
李四飛刀 閱讀(2139)
評論(11) 編輯 收藏 所屬分類:
Blog面膜