响应式布局（三更）

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

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

代码如下：

<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的问题，就相当于回顾以前所学的知识。