哇，前端，你好帅

　　前端发展这么多年，从最初的电脑文字排版像报纸一样到现在的多彩多样，就像刚进大学的女大学生，很清纯，不化妆，很普通，很大众，在人群中都看不到找不到，但是三年过后足够可以惊艳你，前端也是惊艳到我啦，炫酷的效果，只有你想不到的，没有什么事做不出来的，。

　　还是先说下HTML布局，以前布局都是从头到身体再到脚一步一步的写出来，现在直接布局一句代码就可以把结构明了的写出来。

	 .container>.header>.top>.logo+.nav+.top-right^.banner^.main>.main-top>div*3^.main-mid>div*2^.main-bot>div*5^^.footer

　　就是这样一行代码，思维清晰的话马上就写出来了，以前还会一个一个代码的鼓捣半天，我想真正的效果就是看到一个psd图，只要不是特别难，这样直接布局的代码就马上出现在脑海中可以写出来才算正常，这个孰能生巧，布局布好了，后面css就差不多水到渠成了，布局布不好，css是没有办法写的。一一列举了，知道布局了，知道怎么用类名控制了，html就查不到了。

　　另外在说一个细节问题，被细心的朋友发现了，当光标聚焦到搜索框的时候里面的文字为什么不消失，浏览了一些网站，发现有些会消失，有些不会消失，还是说说怎么让它消失吧，朋友说消失会比较好看，。这里就需要降到两个单词，聚焦焦点（onfocus）和失去焦点（onblur），聪明的人应该有思路了吧，上代码

<input type="text" value="你究竟有几个好妹妹" onfocus="if(this.value=='你究竟有几个好妹妹')this.value='';" onblur="if(this.value=='')this.value='你究竟有几个好妹妹';"> 

　　细节问题很重要，同样都能写网页的两个人，如何做的比别人更强，就是细节要特别注意。

　　另外在说一下文字垂直居中，一行文字就不说了，这里说的是多行文字垂直居中

<div class="footer"><div class="control"><p>版权©runoob.com<br/>版权©runoob.com</p></div></div>

.footer{
    background-color: #ccc;
    width: 100%;
    height: 200px;
    clear: both;
    margin-top: 920px;
    position: relative;
}
.control{
    position: absolute;
    left: 50%;
    top:50%;
     transform: translate(-50%, -50%);
}

　　运用了相对定位和绝对定位和translate等方面的知识，，特别说一下transform这个东西，里面的内容很多，可以实现很多意向不到的效果。

　　

　　　欢迎大家吐槽！