在网页中是代码像是在编辑器一样显示是怎么弄的,效果如下图
发布网友
发布时间:2022-05-19 09:16
我来回答
共5个回答
热心网友
时间:2023-10-09 16:49
哈哈,,,其实挺简单的,直接贴代码,我也是刚弄出来
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>html</title>
<style type="text/css">
*{margin:0; padding:0; font-size:13px; font-family:"微软雅黑", "宋体"; text-decoration:none;}
.html_box{margin:10px 5%; width:90%; border:1px solid #ccc;}
.html_box ul{background:#ccc;}
.html_box ul li{list-style: decimal-leading-zero; margin-left:50px; line-height:2em; padding-left:6px;}
.html_box li:nth-child(odd){background:#eee;}
.html_box li:nth-child(even){background:#fff;}
</style>
</head>
<body>
<div class="html_box">
<div style="line-height:3em; padding:0 10px; font-size:14px; background:#ddd; border-bottom:1px solid #ccc;"><h2>标题</h2></div>
<ul id="echo_html">
<li>*{margin:0; padding:0; font-size:13px; font-family:"微软雅黑", "宋体"; text-decoration:none;}</li>
<li>.html_box{margin:10px 5%; width:90%; border:1px solid #ccc;} </li>
<li>.html_box ul{background:#ccc;}</li>
<li>.html_box ul li{list-style: decimal-leading-zero; margin-left:50px; line-height:2em; padding-left:6px;}</li>
<li>.html_box li:nth-child(odd){background:#eee;}</li>
<li>.html_box li:nth-child(even){background:#fff;}</li>
</style>
</li>
</ul>
</div>
</body>
</html>
热心网友
时间:2023-10-09 16:50
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>html</title>
<style type="text/css">
*{margin:0; padding:0; font-size:13px; font-family:"微软雅黑", "宋体"; text-decoration:none;}
.html_box{margin:10px 5%; width:90%; border:1px solid #ccc;}
.html_box ul{background:#ccc;}
.html_box ul li{list-style: decimal-leading-zero; margin-left:50px; line-height:2em; padding-left:6px;}
.html_box li:nth-child(odd){background:#eee;}
.html_box li:nth-child(even){background:#fff;}
</style>
</head>
<body>
<div class="html_box">
<div style="line-height:3em; padding:0 10px; font-size:14px; background:#ddd; border-bottom:1px solid #ccc;"><h2>标题</h2></div>
<ul id="echo_html">
<li>*{margin:0; padding:0; font-size:13px; font-family:"微软雅黑", "宋体"; text-decoration:none;}</li>
<li>.html_box{margin:10px 5%; width:90%; border:1px solid #ccc;} </li>
<li>.html_box ul{background:#ccc;}</li>
<li>.html_box ul li{list-style: decimal-leading-zero; margin-left:50px; line-height:2em; padding-left:6px;}</li>
<li>.html_box li:nth-child(odd){background:#eee;}</li>
<li>.html_box li:nth-child(even){background:#fff;}</li>
</style>
</li>
</ul>
</div>
</body>
</html>
热心网友
时间:2023-10-09 16:50
使用<pre></pre>把代码包裹起来就可以了!
热心网友
时间:2023-10-09 16:51
你说的是在开发者工具里查看吧
热心网友
时间:2023-10-09 16:52
用的代码高亮插件