深藍色論壇

如何製作出帶有scroll bar的文字區域(不使用textarea)

一般我們在網站上看到一些有程式碼(code)的網頁, 會利用一個類似 textarea 的區域將其包裝起來, 以方便排版及閱讀, 而且不佔用網頁的排版空間, 但如何製作出來呢?
我們先看個網頁範例, 如 ms 的 msdn 中的這頁,

http://support.microsoft.com/?kbid=308611

簡化該 html 後, 其實可以利用 css 達到這樣的效果, html code 如下,

代碼: 選擇全部

<html>
<body>
1.

So that your declarations will be form-level in scope, add the following code to the top of the <B>form1</B> class section, above the public <B>form1</B> function:<code></code>
<pre style='PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; PADDING-BOTTOM: 0.5em; MARGIN: 1em; OVERFLOW: scroll; COLOR: maroon; PADDING-TOP: 0.5em; FONT-FAMILY: "courier new", courier, monospace; BACKGROUND-COLOR: #eee; WIDTH: 460; WHITE-SPACE: normal'>
　private ADODB.Connection cn = new ADODB.Connection();
　private ADODB.Recordset rs = new ADODB.Recordset();
　private string cnStr;
　private string query;
</pre>

2.

So that your declarations will be form-level in scope, add the following code to the top of the <B>form1</B> class section, above the public <B>form1</B> function:<code></code>

<pre style='PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; PADDING-BOTTOM: 0.5em; MARGIN: 1em; OVERFLOW: scroll; COLOR: maroon; PADDING-TOP: 0.5em; FONT-FAMILY: "courier new", courier, monospace; BACKGROUND-COLOR: #eee; WIDTH: 460; WHITE-SPACE: normal; scrollbar-face-color: white; scrollbar-shadow-color: gainsboro; scrollbar-darkshadow-color: whitesmoke; scrollbar-highlight-color: gainsboro; scrollbar-3dlight-color: whitesmoke; scrollbar-track-color: white; scrollbar-arrow-color: gainsboro;'>
　private ADODB.Connection cn = new ADODB.Connection();
　private ADODB.Recordset rs = new ADODB.Recordset();
　private string cnStr;
　private string query;
</pre>

3.

<pre style='OVERFLOW: scroll; WIDTH: 120pt;'>
　private ADODB.Connection cn = new ADODB.Connection();
　private ADODB.Recordset rs = new ADODB.Recordset();
　private string cnStr;
　private string query;
</pre>

</body>
</html>