随笔 - 9  文章 - 21  trackbacks - 0
<2008年2月>
272829303112
3456789
10111213141516
17181920212223
2425262728291
2345678

常用链接

留言簿(1)

随笔分类(9)

随笔档案(9)

搜索

  •  

最新评论

阅读排行榜

评论排行榜

摘要

我们在写blog或写文档说明的时候,有时候说明在控制台中怎样使用,在windows xp/2000中就是cmd命令。 为了表达这种在控制台中的操作,我写了个 CSS来呈现效果。

需求和设计要求

  1. 在网页文档中(blog或用户手册),呈现一个控制台的样式,有边框和标题栏,黑色背景。如下图
  2. 这个控制台可以真实的控制台那样可以,在适当的时候,有上下或左右滚动条
  3. 控制台里允许加入的元素有<p>块。
  4. 为了区分控制台里的输入和输出字符串,分别可以用<kbd>和<samp>括起来,然后设置他们的CSS样式
  5. 当前目录提示符,用<span>元素表达。
  6. <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 &quot;console_box&quot; 的内容</p>
<p>此处显示 class &quot;console_box&quot; 的内容</p>
<p>此处显示 class &quot;console_box&quot; 的内容</p>
<p>此处显示 class &quot;console_box&quot; 的内容</p>
<p>此处显示 class &quot;console_box&quot; 的内容</p>
<p>此处显示 class &quot;console_box&quot; 的内容</p>
<p>此处显示 class &quot;console_box&quot; 的内容</p>
<p>此处显示 class &quot;console_box&quot; 的内容</p>
<p>此处显示 class &quot;console_box&quot; 的内容</p>
<p>此处显示 class &quot;console_box&quot; 的内容</p>
<p>此处显示 class &quot;console_box&quot; 的内容</p>
<p>此处显示 class &quot;console_box&quot; 的内容</p>
</div>
</div>

可以在<div class="console" ...>中设置高度来设置控制台的高度。

后记

一个控制台的效果基本出来了。在IE6和Firefox中测试通过。还有工作可做

  • 为了区分控制台中的输入和输出,建议用<kbd>和<samp>标签,并设置这写标签的CSS样式。
  • 更改标题栏图标和设置一下CSS样式,就可以实现Linux或Mac等操作系统中的控制台效果
  • 还有一些没遇到和想到的问题

这是我第一次用Blog,还不知道上传。这些源代码和图片的,请留下EMail,或等我熟悉了Blog再下载。

posted on 2008-02-04 17:45 李四飞刀 阅读(2075) 评论(11)  编辑  收藏 所属分类: Blog面膜

FeedBack:
# re: CSS实现的控制台效果 2008-02-04 19:48 QBomber
3Q~
quickbomber@gmail.com  回复  更多评论
  
# re: CSS实现的控制台效果 2008-02-05 09:04 如坐春风
页面相当漂亮啊。  回复  更多评论
  
# re: CSS实现的控制台效果 2008-02-07 00:50 李四飞刀
@如坐春风
谢谢夸奖  回复  更多评论
  
# re: CSS实现的控制台效果 2008-02-08 13:13 caike
很不错, 给我也发一份吧, jsnail#gmail.com
thanks.  回复  更多评论
  
# re: CSS实现的控制台效果 2008-02-10 18:19 philodewer
太感谢了,刚好需要这个。
philodewATgmail.com  回复  更多评论
  
# re: CSS实现的控制台效果[未登录] 2008-02-13 11:15 fatbear
good,想看看
zhengwing2008@163.com  回复  更多评论
  
# re: CSS实现的控制台效果 2008-02-13 20:09 leson
leson.zhu@gmail.com
谢谢。  回复  更多评论
  
# re: CSS实现的控制台效果 2008-02-14 09:10 pover
非常好,代理解决方案http://www.tgod.com.cn  回复  更多评论
  
# re: CSS实现的控制台效果 2008-02-15 09:08 wen
retfu1@163.com,谢谢  回复  更多评论
  
# re: CSS实现的控制台效果 2008-02-17 12:32 91cn33
非常不错呀,收下了   回复  更多评论
  
# re: CSS实现的控制台效果 2008-02-19 18:58 lsqlister
lsqlister@gmail.com ,谢谢  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: