首页带行号显示的文本输入框用html代码展示

带行号显示的文本输入框用html代码展示

时间: 2023-06-27 13:05:18 浏览: 74

可以使用`<pre>`标签来展示带行号的文本输入框，同时可以使用CSS样式来美化它。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>带行号的文本输入框</title> <style> pre { background-color: #f5f5f5; border: 1px solid #ddd; padding: 10px; white-space: pre-wrap; font-family: 'Courier New', monospace; line-height: 1.6; tab-size: 4; } pre code { display: block; } pre code:before { content: counter(line-number); counter-increment: line-number; margin-right: 10px; color: #999; font-size: 14px; font-family: 'Courier New', monospace; text-align: right; display: inline-block; width: 20px; } </style> </head> <body> <pre><code> 1. 第一行代码 2. 第二行代码 3. 第三行代码 4. 第四行代码 </code></pre> </body> </html> ``` 效果如下： ![带行号的文本输入框](https://i.imgur.com/Q6bLlIr.png)