网页中标记代码内容使用code和pre标签

要在HTML中显示标签本来的样子需要转化为实体

　　在此附上百度的实体字符：http://baike.baidu.com/view/4757776.htm#3

code标签标注行内的代码内容

　　我要在代码中显示如下效果：

　　　　

　　　　需要这么使用code标签

　　　　在前面几节中有是否还是记得：我们在 <code>&lt;div&gt;&lt;/div&gt;</code>标签中添加了一个类<code>.page-header</code>来显示一条分割线

pre标签标注一段代码内容--同样需要转化实体

　　<pre>

　　　　&lt;script type='text/javascript' src='./bootstrap/bootstrap.js'&gt&lt;/script&gt;

　　</pre>

　　效果如图：

　　　　

　　bootstrap为代码和代码块提供了好看的样式，我们只需要调用它的code或者pre标签即可，值得注意的是需要注意将需要显示的HTML特殊标签转化为实体

　　下面我们来讲讲，如何更加美化自己要美化的代码块<pre></pre>中的代码

　　①首先网上搜索google-code-prettify ，下载得到2个文件

　　　　prettify.js 和prettify.css 

　　②分别保存在路径中然后引入这2个文件

　　　　<link href="./bootstrap/css/prettify.css" rel="stylesheet">

　　　　<script type="text/javascript" src="./bootstrap/js/prettify.js"></script>

　　③要显示行号，需要添加如下css样式在 <style type='text/css'></style>标签中

　　　　li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8{ list-style-type: decimal !important }

　　　　如果不添加行CSS代码那么显示的效果是每隔5行显示一个行号即 5n (n为整数) 才会显示一个行号

　　④给body标签添加onload='prettyPrint();' --> 注意有大写

　　　　<body onload='prettyPrint();'></body>

　　⑤给pre标签添加class='prettyprint linenums' -->注意是小写

　　　　<pre class='prettyprint linenums'></pre>

　　如图效果：

　　　　

　　看这样效果是不是很赞！！！

Bootstrap页面布局10 - BS代码的更多相关文章

  1. Bootstrap页面布局10 - BS表格

    ①了解需要怎样的表格标签结构 ②bootstrap为我们提供了一些类来变换表格样式 1.table中添加 <table class='table'></table> 如图: 2 ...

  2. Bootstrap页面布局3 - BS布局以及流动布局

    1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...

  3. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  4. Bootstrap页面布局9 - BS列表

    列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编 ...

  5. Bootstrap页面布局17 - BS选项卡

    代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...

  6. Bootstrap页面布局24 - BS旋转木马功能

    代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...

  7. Bootstrap页面布局23 - BS折叠内容

    <div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3> <!--如 ...

  8. Bootstrap页面布局20 - BS缩略图

    <div class='container-fluid'> <h2 class='page-header'>Bootstrap 缩略图</h2> <ul cl ...

  9. Bootstrap页面布局19 - BS提示信息

    提示信息的设计 提示信息的类: .alert:提示信息类 .alert alert-danger: .alert alert-error: .alert alert-success: .alert a ...

随机推荐

  1. Grid画边框

    public class GridHelper { //请注意:可以通过propa这个快捷方式生成下面三段代码 public static bool GetShowBorder(DependencyO ...

  2. ASP.NET服务器端执行耗时操作的工作记录

    公司之前有这样一个业务需求: 一名同事做出文件a0和b0,然后将a0加密为a1.b0加密为b1:再将文件a0.a1.b0和b1上传至服务器M:同时要将服务器N上的数据表添加一条记录,该记录的ID就是前 ...

  3. Java Hour 46 SLF4J

    SLF4J(Simple Logging Facade for Jave). 上个章节在配置启动项目后,会报一个奇怪的错误,一开始以为是Maven 依赖有冲突,其实是和slf4j 密切相关的. 本文原 ...

  4. 同网段下，windows自带远程桌面连接

    1.服务器关闭防火墙 2.右键点击’我的电脑‘进入’属性‘点击左侧菜单栏中的’远程设置‘: 把远程桌面选项设置成’允许运行任意版本远程桌面的计算机连接‘. 3.客户端点击“开始”在附件菜单下面找到“远 ...

  5. MySQL用户与权限管理

    执行mysql select 查询报错: SELECT command denied to user 'root'@'localhost' for table "xxx" 问题原因 ...

  6. java 文件md5+字符串md5 实现

    import org.apache.commons.codec.binary.Hex; import org.apache.commons.codec.digest.DigestUtils; impo ...

  7. ZOJ3791 An Easy Game（DP）

    给两个长n的01串s1和s2,要对s1进行k次修改,每次修改m个不同位置,问有几种方式修改成s2. 想偏了,只想到原始的01数值是不重要的,因为每个位置修改次数的奇偶性是确定的这一层.. 其实,这题只 ...

  8. 【python游戏编程之旅】第四篇---pygame中加载位图与常用的数学函数。

    本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 在上一篇博客中,我们学习了pygame事件与设备轮询.http://www.cnblogs.com/msxh ...

  9. POJ 2117 (割点+连通分量)

    题目链接: http://poj.org/problem?id=2117 题目大意:在一个非连通图中,求一个切除图中任意一个割点方案,使得图中连通分量数最大. 解题思路: 一个大陷阱,m可以等于0,这 ...

  10. Codeforces Round #204 (Div. 2) A.Jeff and Digits

    因为数字只含有5或0,如果要被90整除的话必须含有0,否则输出-1 如果含有0的话,就只需考虑组合的数字之和是9的倍数,只需要看最大的5的个数能否被9整数 #include <iostream& ...