用户输入密码显示隐藏代码

1、新建html文档。

2、书写hmtl代码。

<div class="container main">

  <div class="row">

    <div class="col-md-6">

      <div class="panel panel-success">

        <div class="panel-heading">Bootstrap v2 Demo:</div>

        <div class="panel-body">

          <iframe src="v2.html"></iframe>

        </div>

      </div>

    </div>

    <div class="col-md-6">

      <div class="panel panel-info">

        <div class="panel-heading">Bootstrap v3 Demo:</div>

        <div class="panel-body">

          <iframe src="v3.html"></iframe>

        </div>

      </div>

    </div>

    <div class="col-md-6">

      <div class="panel panel-info">

        <div class="panel-heading">Meterial Design icon:</div>

        <div class="panel-body">

          <iframe src="mt.html"></iframe>

        </div>

      </div>

    </div>

  </div>

</div>

3、书写css代码。

body, html{

font-size: 100%;

padding: 0;

margin: 0;

background: #494A5F;

color: #D5D6E2;

font-weight: 500;

font-size: 1.05em;

font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;

}

4、书写css代码。

<style>

.main { margin-top: 80px; }

.panel-body { height: 350px; }

iframe { display: block; width: 100%; height: 100%; border: none; }

</style>

5、代码整体结构。

6、查看效果。