响应式布局（三更）

今天所做的一些题和遇到的问题。

 

一：怎样最便捷的书写流式布局的开头

代码如下：

<div id="container">
    <div class="main">
        <div class="head"><img src="image/tmp/banner.jpg" alt=""/></div>
    </div>
</div>


#container{
    height:1000px;
    width:100%;
}
#container .main{
    max-width:12.8rem;
    min-width:6rem;
    height:auto;
    margin:0 auto;
}
#container .main .head{
    /*height:auto;*/
    width:100%;
}
#container .main .head img{
    height:100%;
    width:100%;
}

　　生成的原网页如下：

上面是初始化的图片，下面是网页随着屏幕大改变而改变。

 

二：应用JS加上响应式布局来完成input框按钮来改变字母数字的转换

代码如下：

  <input  class="txt-input txt-password " type="password" placeholder="请输入qq号码" name="password" style="display: inline;">
 <input  class="txt-input txt-password" type="password" placeholder="验证码" name="password" style="display: inline;">

<script>

    $(function() {
        $(".input-close").hide();
        displayPwd();
        displayClearBtn();
        setTimeout(displayClearBtn, 200 ); //延迟显示,应对浏览器记住密码
    });


    //显隐密码切换
    function displayPwd(){
        $(".tp-btn").toggle(
                function(){
                    $(this).addClass("btn-on");
                    var textInput = $(this).siblings(".plaintext");
                    var pwdInput = $(this).siblings(".ciphertext");
                    var pwdInput1 = $(this).siblings(".ciphertext1");
                    pwdInput.hide();
                    pwdInput1.hide();
                    textInput.val(pwdInput.val()).show().focusEnd();
                    textInput.val(pwdInput1.val()).show().focusEnd();
                },
                function(){
                    $(this).removeClass("btn-on");
                    var textInput = $(this).siblings(".plaintext");
                    var pwdInput = $(this).siblings(".ciphertext");
                    var pwdInput1 = $(this).siblings(".ciphertext1");
                    pwdInput.hide();
                    pwdInput1.hide();
                    textInput.val(pwdInput.val()).show().focusEnd();
                    textInput.val(pwdInput1.val()).show().focusEnd();
                }
        );
    }

                

　　生成的网页如下：在没有改变字母数字转换之前

 

　　改变字母数字的转换：

 

 

今天在做这个js的时候做了很久，可能好久都没有用到js来完成网页了，稍微有点疏漏，

明天的博客就写关于js的问题，就相当于回顾以前所学的知识。

转载于:https://www.cnblogs.com/yzhong/p/5068531.html