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

2025-11-12 07:40:37

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、查看效果。

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

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢