zoukankan      html  css  js  c++  java
  • 哇,前端,你好帅

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

      还是先说下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这个东西,里面的内容很多,可以实现很多意向不到的效果。

      

       欢迎大家吐槽!

      

  • 相关阅读:
    简单读取网上的文本文件
    学习官方示例 System.RunError
    上周热点回顾(9.209.26)
    上周热点回顾(9.69.12)
    中国程序员节,10月24日,你同意吗?
    上周热点回顾(9.139.19)
    博客园电子期刊2010年8月刊发布啦
    [每周特惠]敏捷软件开发(原书第2版) +敏捷开发的艺术
    Meego专题上线了
    【投票】中国程序员节选在哪天
  • 原文地址:https://www.cnblogs.com/hopeelephant/p/5980215.html
Copyright © 2011-2022 走看看