css总结

DHTML(Dynamic HTML) 称为动态HTML    它是  HTML  CSS  JAVASCRIPT的集成
CSS层叠样式表:(cascading style sheet)  将对布局 字体 颜色 背景和其它
                               图文效果实现更加精确的控制
  javascript:它是一种script脚本语言
           脚本语言:就是可以和HTML混合在一起使用的语言,可以用来在IE的客户端进行程序编制,从而控制浏览器等对象的操作

   CSS层叠样式表       1996.12.17  css1
                       1998.5.12   css2  

     样式可以定义在HTML文档的标志(tag)里
         也可作为外部附加文档  此是将用于整个页面 甚至整个站点
          因此具有更好的易用性和扩展性
   CSS功能:   弥补HTML对网页格式化功能的不足 比如段落间距,行间距
              字体变化和大小
              页面格式的动态更新
              排版定位
 

  CSS的类型
    1.自定义CSS       .bg{background-image:url(bg.gif);}                                      <body class="bg">
    2.重定义标记的CSS   即定义的CSS将只用于选择的标记
                       p{color:#000099;font-size:9pt}
    3.CSS选择符     使用id作为属性   以保证文档具有唯一可用的值
         它有4种样式   a:  link   设定正常状态下连接文字的外观
                       a:  visited   设定访问过的连接外观
                       a: hover设定鼠标放置在连接文字之上时的文字的外观
                       a: active  设定鼠标单击时连接的外观
   a:link{color:#ff3366;font-family:"宋体";text-decoration:none;}
   a:hover{color:#ff6600;font-family:"宋体";text-                                             decoration:underline;}
   a:visited{color:#339900;font-family:"宋体";text-decoration:none;}


  CSS实现的方式
   1.在HEAD内的实现    以<style>开始</style>结束
        <HTML>
    <HEAD>
        <TITLE>欢迎进入 HTML 世界</TITLE>
                 <style type="text/css">
                 h1{font-size:x-large;color:red}
                 h2{font-size: large;color:blue}
                 p{font-size:x-large;color:green}
                </style>
    </HEAD>
    <BODY>
        <P>这会是一种很有趣的体验</P>
                 <h1>你好!!!</h1>
                 <h2>欢迎你!!!</h2>
    </BODY>
       </HTML>
   

  <HTML>
    <HEAD>
        <TITLE>欢迎进入 HTML 世界</TITLE>
                 <style type="text/css">
                 body{
                   font-family:"黑体";
                   font-size:12pt;
                   line-height:16pt;
                   color:#ffffff;
                   background-color:#006699;
                 }
                </style>
    </HEAD>
    <BODY>
        HTML 是一种标记语言
                 使用 HTML 标记和元素,可以:
                 控制页面和内容的外观
                 发布联机文档
                 使用 HTML 文档中插入的链接检索联机信息
                 创建联机表单,收集用户的信息、执行事务等等
                 插入动画
                 开发帮助文件
    </BODY>
</HTML>
                  line-height行的间距


2.在body内的实现
    <HTML>
    <HEAD><TITLE>设置属性</TITLE></HEAD>
<BODY>
<P style = "color:aqua;font-Style:italic;">
本段应用了内嵌样式<BR>
<P>本段以默认样式显示。<BR>
<P>您能发现本行中的
<SPAN style = "color:red">不同之处</SPAN>吗?
</BODY>
</HTML>
 
 3.在文件外的调用

   <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
         <LINK REL=stylesheet HREF="public.css" Type="text/css" >
    </HEAD>
    <BODY>
        HTML 是一种标记语言
                 使用 HTML 标记和元素,可以:
              控制页面和内容的外观    
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件
    </BODY>
</HTML>

    CSS的属性和之值
    字体属性:包括   字体族科   font-family
                     字体风格   font-style
                     字体加粗   font-weight
                     字体大小   font-size

    1.字体族科  font-family

         <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
         h1{font-family:"隶书"}
         .text{font-family:"宋体,仿宋_gb2312"}
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                 <p class="text">使用 HTML 标记和元素,可以:
              控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
    </BODY>
</HTML>


2.字体大小  font-size       单位pt   表示尺寸

   <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
         h1{font-size:14pt}
         .text{font-size:9pt}
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                 <p class="text">使用 HTML 标记和元素,可以:
              控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
    </BODY>
</HTML>

3.字体风格    font-style
            属性    normal  普通的文字
                    italic  斜体的文字
                    oblique 倾斜的文字

    <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
         h1{ font-style:italic}
         .text{ font-style:oblique}
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                 <p class="text">使用 HTML 标记和元素,可以:
              控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
    </BODY>
</HTML>


4字体的加粗     font-weight
        属性    值100-900
                normal    普通的文字
                bold      加粗    
                bolder    特粗
                lighter   加细

  <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
         h1{ font-weight:900}
         .text{ font-weight:bolder}
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                 <p class="text">使用 HTML 标记和元素,可以:
              控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
    </BODY>
</HTML>

文本属性
 
   Letter-spacing       定义一个附加在字符之间的间隔数量
   text-decoration      文本修饰属性
   text-align           文本水平的对齐方式  左对齐 右对齐 居中 两端对齐
   text-indent          文字的首行缩进
   Line-height          行高的属性      行的间距  

1.Letter-spacing 字母间隔属性 定义附加在字符之间的间隔数量 允许使用负数

<HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
         h1{ Letter-spacing:-10px}
         .text{Letter-spacing:5px}
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                 <p class="text">使用 HTML 标记和元素,可以:
              控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
    </BODY>
</HTML>


2  text-decoration      文本修饰属性
           属性   underline  下划线
                  overline   上划线
                  line-through  删除线
               
                  none        无任何修饰


<HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
        a:link{ font-family:宋体;text-decoration:none}
        a:visited{ font-family:宋体;text-decoration:none}
        a:hover{ text-decoration:underline}
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                 <p class="text">使用 HTML 标记和元素,可以:
              控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
   <a href="http:www.163.com">网易</a>
    </BODY>
</HTML>

3.text-align     文本水平的对齐方式  左对齐 右对齐  居中    两端对齐
                                    left   right   center  justify

      <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
         h1{text-align:center}
         .text{text-align:justify}
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                 <p class="text">使用 HTML 标记和元素,可以:
              控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
    </BODY>
</HTML>

 4.text-indent          文字的首行缩进
                可用于块级元素  p   h1等
          定义该元素第一行可以接受的缩进的数量
          该值必须是一个长度或一个百分比

  <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
         h1{text-indent:100pt}
         .text{text-indent:24pt}
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                 <p class="text">使用 HTML 标记和元素,可以:
              控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
    </BODY>
</HTML>

Line-height          行高的属性  行的间距
 
   <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
         h1{text-indent:100pt}
         .text{Line-height:24pt}
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                 <p class="text">使用 HTML 标记和元素,可以:
              控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
    </BODY>
</HTML>


颜色和背景属性
          color      定义颜色
          background-color     定义一个元素的背景颜色
          background-image     定义一个元素的背景图象
          background-repeat    决定一个指定的背景图象如何被重复
          background-position   设定水平和垂直方向上的位置

  1.color      定义颜色

   <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
         h1{color:#336699}
         .text{color:#ffcc00}
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                 <p class="text">使用 HTML 标记和元素,可以:
              控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
    </BODY>
</HTML>

2. background-color     定义一个元素的背景颜色

  <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
         body{background-color :#336699}
         h1{color:#ffffff}
         .text{color:#ffcc00}
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                 <p class="text">使用 HTML 标记和元素,可以:
              控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
    </BODY>
</HTML>

 3.background-image     定义一个元素的背景图象
   <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
         body{background-image :url(2008.jpg)}
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                 <p class="text">使用 HTML 标记和元素,可以:
              控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
    </BODY>
</HTML>

 4.  background-repeat    决定一个指定的背景图象如何被重复
 
        属性   repeat-x  图象横向重复
               repeat-y  图象纵向重复
               repeat    图象横向纵向重复
               no-repeat 图象不重复

  <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
         body{background-image :url(酷吧.gif);background-repeat:repeat-y}
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                 <p class="text">使用 HTML 标记和元素,可以:
              控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
    </BODY>
</HTML>

5. background-position   设定水平和垂直方向上的位置
            属性   left     背景图象居左
                   right    背景图象居右
                   center   背景图象水平居中  垂直居中
                   top      背景图象上对齐
                   bottom   背景图象下对齐
                   
   <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
         <style type="text/css">
         body{background-image :url(酷吧.gif);
              background-repeat:repeat-y;  
              background-position:right top}
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                 <p class="text">使用 HTML 标记和元素,可以:
              控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
    </BODY>
</HTML>

边框属性  : 用于设置一个元素边框的宽度式样和颜色
         边框属性         描述
         border         边框
         border-top     上边框
         border-left    左边框
         border-right   右边框
         border-bottom  下边框

         边框样式属性值         描述
              none             无边框
              dotted           边框由点组成
              dash             边框由短线组成
              solid            边框是实线
              double           边框是双实线
              groove           边框是带有立体感的沟槽
              ridge            边框成脊形
              inset            边框内嵌一个立体边框
              outset           边框外嵌一个立体边框
 
   <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
         p{
            border-top:2px  solid #990000;
            border-right:2px  solid #3399ff;
            border-bottom:2px  solid #00ff33;
            border-left:2px  solid #cc33ff;
           }
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                 <p class="text">使用 HTML 标记和元素,可以:
              控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
    </BODY>
</HTML>   



鼠标光标属性
               鼠标光标属性          描述
                 hand             手
                 cross-hair        交叉十字
                 text             文本选择符号
                 wait             WINDOWS的沙漏形状
                 default          默认的鼠标形状
                 help             带问号的鼠标
                 e-resize          向东的箭头
                 ne-resize         向东北的箭头
                 n-resize          向北的箭头
                 nw-resize         向西北的箭头
                 w-resize          向西的箭头
                 sw-resize         向西南的箭头
                 s-resize          向南的箭头
                 se-resize         向东南的箭头
                 
  <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
         body{
                 cursor:crosshair
              }
         img{  cursor:help}
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                <img src="酷吧.gif" align=left>
                 <p class="text">使用 HTML 标记和元素,可以:
              控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件</p>
    </BODY>
</HTML>

定位属性     CSS提供两种定位方法   
        相对定位:是指让操作的元素在相对其它的位置上进行偏移   
    
        绝对定位:是指让操作的元素参照原始文档进行偏移

    定位属性             描述
     position       absolute(绝对定位)  relative相对定位
     top            层距离定点纵坐标的距离
     left           层距离定点横坐标的距离
     width          层的宽度
     height         层的高度
     Z-index        决定层的先后顺序和覆盖关系 值高的覆盖值低的元素
     Clip           限定只显示剪切出来的区域 为矩形
                    只要设定两个点即可   top   left
                                         bottom  right
     overflow       当层的内容超出层所能容纳的范围时:
                     visible     层的 大小 内容会显示出来
                     hidden      隐藏超出层大小的内容
                     scrol       不管内容是否超出层的范围 都添加滚动条
                     auto        只在内容超出层的范围时才显示滚动条

     visibility    针对嵌套层的设置
                   inherit  子层继承父层的可见性
                            父层可见 子层也可见 父层不可见 子层也不可见
                   visible  无论父层可见与否子层都可见
                   hidden    无论父层可见与否子层都隐藏
  <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
         .self{
               position:absolute;
               top:80px;
               left:50px;
               300px;
               height:100px;
               overflow:auto;
               background-color:#336699;
               color:#ffffff;
               z-index:1;
               visibility:visible;
              }
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                <div class="self">使用 HTML 标记和元素,可以:
              控制页面和内容的外观发布联机文档使用 HTML文档中插入的接检索联机信息创建联机表单,收集用户的信息执行事务等等插入动画开发帮助文件
索联机信息创建联机表单,收集用户的信息执行事务等等插入动画开发帮助文件</div>
    </BODY>
</HTML>


区块属性   在格式化页面对象时,CSS将所有的对象都放置在一个容器里面
           这个容器成为块
        区块属性              描述
          width        设定对象的宽度       
          height       设定对象的高度
          float        让文字环绕在一个元素的四周
          clear        指定在某一元素的某一边是否允许有环绕的文字
         padding       决定了究竟在边框与内容之间应该插入多少空间距离
                        top   bottom  left  right
                        设定上下左右的填充距离
          margin        设置一个元素在4个方向上与IE窗口边界或上一级元素的边界距离
                        top   bottom  left  right
                        设定上下左右的距离

    <HTML>
    <HEAD>
     <TITLE>欢迎进入 HTML 世界</TITLE>
           <style type="text/css">
         .self{
               position:absolute;
               margin-top:20px;
               margin-right:30px;
               margin-bottom:20px;
               margin-left:30px;
               300px;
               height:100px;
              }
        </style>
    </HEAD>
    <BODY>
        <h1>HTML 是一种标记语言</h1>
                <div class="self">使用 HTML 标记和元素,可以:
              控制页面和内容的外观发布联机文档使用 HTML文档中插入的接检索联机信息创建联机表单,收集用户的信息执行事务等等插入动画开发帮助文件
索联机信息创建联机表单,收集用户的信息执行事务等等插入动画开发帮助文件</div>
    </BODY>
</HTML>


列表属性
                  列表属性              描述
              list-style-type      设定引导列表项目的符号类型
               bullet              选择图象作为项目的引导符号
              position             决定列表项目缩进的程度
                          outside  列表贴近左侧边框
                          inside   列表缩进
 
  符号类型属性值
               disc    实心圆
               circle   空心圆
               square    实心方块
               decimal    在文本前加普通的阿拉伯数字
               lower-roman   在文本前加小写罗马数字
               upper-roman   在文本前加大写罗马数字
               lower-alpha   在文本前加小写英文字母
               upper-alpha   在文本前加大写英文字母
               none           不显示任何项目符号和编号

   <HTML>
    <HEAD>
       <TITLE>学习HTML</TITLE>
            <style type="text/css">
            ol{
                 list-style-type:upper-roman;
               }
             </style>
    </HEAD>
    <BODY>
    
        <OL>
        <LI>简介HTML
        <LI>创建列表
        </OL>
        <LI>星期二
        <OL>
        <LI>创建表
        <LI>插入图像
        </OL>
    </BODY>
</HTML>

滤镜属性   可以把可视化的滤镜和
转换效果添加到一个标准的HTML元素

1.alpha 滤镜---设置透明层次
{filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,
  startx=startx,starty=starty,finishx=finishx,finishy=finishy)}

alpha:属性是把一个目标元素与背景混合  就是一个元素的透明度
opacity:   代表透明度水准
finishopacity:设置渐变的透明效果  范围1---100
style:指定透明区域的形状特征
        0 统一形状
        1 线形
        2 放射状
        3 长方形
startx和starty代表渐变透明效果开始的X和Y坐标
finishx和finishy代表渐变透明效果结束的X和Y坐标

<HTML>
    <HEAD>
       <TITLE>学习HTML</TITLE>
            <style type="text/css">
          img{
                 filter:alpha(opacity=30);
              }
             </style>
    </HEAD>
    <BODY>
     <h2>图像</h2>
         <img src=2008.jpg>
    </BODY>
</HTML>


2.blur滤镜---模糊效果
  语法:{filter:bur(add=add,direction=direction,strength=strength)}
  add:它是一个参数值为   true  false  
       指定图象是否被改变成印象派的模糊效果
  derection:用来设置模糊的方向  0表示垂直向上  每45度为一个单位
             默认值是向左270度
  strength   它代表有多少像素的宽度将受到模糊影响
                即模糊的强度   默认是5
  <HTML>
    <HEAD>
       <TITLE>学习HTML</TITLE>
            <style type="text/css">
          img{
                 filter:blur(add=true,strength=30,direction=0);
              }
             </style>
    </HEAD>
    <BODY>
     <h2>图像</h2>
         <img src=2008.jpg>
    </BODY>
</HTML>

3.  flipH   flipV滤镜----水平垂直翻转


<HTML>
    <HEAD>
       <TITLE>学习HTML</TITLE>
            <style type="text/css">
          img{
                 filter:Flipv;
              }
             </style>
    </HEAD>
    <BODY>
     <h2>图像</h2>
         <img src=2008.jpg>
    </BODY>
</HTML>

4.gray滤镜---灰度
          作用就是把一张图片变成灰度图
<HTML>
    <HEAD>
       <TITLE>学习HTML</TITLE>
            <style type="text/css">
          img{
                 filter:gray;
              }
             </style>
    </HEAD>
    <BODY>
     <h2>图像</h2>
         <img src=2008.jpg>
    </BODY>
</HTML>


5.invert滤镜---反转     显示底片的效果
                作用是把对象的可视化属性全部翻转
  <HTML>
    <HEAD>
       <TITLE>学习HTML</TITLE>
            <style type="text/css">
          img{
                 filter:invert;
              }
             </style>
    </HEAD>
    <BODY>
     <h2>图像</h2>
         <img src=2008.jpg>
    </BODY>
</HTML>


6.Xray滤镜---x射线        x光片的效果
       是让对象反映它的轮廓并把这些轮廓加亮    就是所谓的X光片
 <HTML>
    <HEAD>
       <TITLE>学习HTML</TITLE>
            <style type="text/css">
          img{
                 filter:xray;
              }
             </style>
    </HEAD>
    <BODY>
     <h2>图像</h2>
         <img src=2008.jpg>
    </BODY>
</HTML>



7.wave滤镜---波纹
语法:{filte:wave(add=add,freq=freq,lightstrength=strength
phase=phase,strength=strength)}
wave :属性把对象垂直的波形样式打乱  默认是TRUE(非0)
add:  表示是否把对象按照波形样式打乱
freq: 是波纹的频率,也就是指定在对象上一共需要产生多少个完整的波纹
lightstrength:可以增强波纹的光影的效果
phase:设置正线弦波的偏移量
strength:表示振幅的大小
<HTML>
    <HEAD>
       <TITLE>学习HTML</TITLE>
            <style type="text/css">
          img{
                 filter:wave(freq=2,lightstrength=50,phase=45,strength=10);
              }
             </style>
    </HEAD>
    <BODY>
     <h2>图像</h2>
         <img src=2008.jpg>
    </BODY>
</HTML>



原文地址:https://www.cnblogs.com/pengleibin-1993/p/5726721.html