zoukankan      html  css  js  c++  java
  • 前端入门级之如何从零开始前端(估计要被人鄙视成LOW货了)入门篇

    <!------------------------------------------------------基本说明开始--------------------------------------------------------------->

     

    html....css....js/jq

    ps

    html不求多规范,当然能在严师逼迫下强行规范准则最好了(目前正在带一个小菜,逼迫他)

    最好有对结构的直感!能一眼就看出这个是由多少块,怎么排列的

     

    css至少能写出规定样式!

     

    然后灵活的运用firebug,等浏览器调试工具

    <!------------------------------------------------------基本说明结束 --------------------------------------------------------------->

     

     

     

    <!------------------------------------------------------简单的布局开始 --------------------------------------------------------------->

    最后写出此图!

     

    写此图的时注意float的用法,清除浮动clear

     

    好了这个图能够理解的话一般的布局就没问题了

     

    <!------------------------------------------------------ 简单的布局结束--------------------------------------------------------------->

    剩下的就需要去调整细节了。。。。。

     

    最后我希望大家可以会一点点PS。。。。不是要你作图

    <!------------------------------------------------------ps篇(如何找元素,拿图层,保存图层)--------------------------------------------------------------->

    至少你可以学会如何看字体大小,字体类型,行高之类的

     

    毕竟不会ps感觉设计师们也挺无奈的。。。素材要帮你切好......字体大小要告诉。。。然后你自己调的时候也会很麻烦,恶心了别人,还把自己一起恶心了

    最后如果你遇到的大的广告位的图记得ps保存的时候,改成web格式。。。毕竟图片太大。加载个图片等个半天这简直是噩梦,做手机端的浪费流量在这上面简直是浪费

    <!------------------------------------------------ps篇(如何找元素,拿图层,保存图层-结束)--------------------------------------------------------------->

    然后调啊调的调细节

     

    接着会遇到浏览器兼容问题(遇到问题先不要着急。hack就是为了解决这类问题尽管我不是很支持用hack)

    理论上来说一个合理的布局不说ie6,至少ie7是肯定看上去正常的

    本人表示我写一般的页面一次成型除ie6之外从不用HACK

    ie6我还真不是很敢打包票,万一牛皮吹大了,被人发现以前有用hack,这是被打脸的节奏

    <!------------------------------------------------------hack篇(浏览器兼容开始)------------------------------------------------------------------->

     

    1.‘9’:

        eg:.test { color/***/: blue9 }
    .header {300px;} /* 所有浏览器*/
    .header {width/***/:330px9;} /* 所有浏览器IE浏览器 */
    .header {*310px;} /* IE7和IE6能识别,IE8和FF不能识别*/
    .header {_290px;} /* IE6能识别,IE7、IE8和FF不能识别*/

     

    2.利用条件注释语句:<!–[if IE]> 此内容只有IE可见 <![endif]–>         

                    lt 表示less than 当前条件版本以下的版本,不包含当前版本。

                    gte 表示greeter than or equal 当前版本以上版本,并包含当前版本。

                    lte 表示less than or equal 当前版本以下版本,并包含当前版本。

     

    3.其它hack 技术:

    .color1{ color:#F00; color/***/:#00F /***/}/*IE6,IE7,IE8,FF,OP,SA识别*/
    .color2{ color:#F00; color /***/:#00F /*9**/}/*IE7,IE8,FF,OP,SA识别*/
    .color3{ color:#F00; color/***/:#00F 9}/*IE6,IE7,IE8识别*/
    .color4{ color:#F00; color /***/:#00F9}/*IE7,IE8识别*//*“color”和“/***/”之间有个空格*/

    4.

    汇总下IE各版本的css hack。

     

     

    hack 示例 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q)
    * *color Yes Yes Yes Yes No Yes
    + +color Yes Yes Yes Yes No Yes
    - -color Yes Yes No No No No
    _ _color Yes Yes No Yes No Yes
    # #color Yes Yes Yes Yes No Yes
    color No No No No Yes No
    9 color9 Yes Yes Yes Yes Yes Yes
    !important color:blue !important;
    color:green;
    No No Yes No Yes No

     

    标准模式中:

    1,减号(-)是IE6专有hack

    2,反斜杠零()是IE8专有hack

     

    <!------------------------------------------------------hack篇(浏览器兼容结束)------------------------------------------------------------------->

     

     

    <!--------------------------------------------JQ篇(最后对待新手么我也不指望你们能写js了,只求你们能完成点效果)---------------------------->

    锋利的jquery实际上我觉得买这本书就是浪费。。。我也不知道为什么买了

    实际上w3school上面jquery的手册写的挺全。。。。。。

     

    毕竟以工作为主。。。老板让你干活的,不是让你为了个小幻灯浪费一天时间的。。。。当年我就被这样逼出来的

     

     

    <!--------------------------------------------JQ篇(最后对待新手么我也不指望你们能写js了,只求你们能完成点效果)-结束--------------------------->

     

     

    最后总结

    如果是学生党看这篇文章的话那我又要表示,先从JS开始!毕竟如果你能把JS领悟了,那么你至少起点赢了!未来还是不错的!毕竟将来你去了大公 司,人生的规划肯定是要写出比Jquery更优秀的框架...祖国的未来,web上超越米国的梦想还是要落在年轻人+祖国的花朵身上-_-//我们已经老了,你看我都23了,HOHO,祝愿菜鸟们早日脱菜,小白们早日变黑。

  • 相关阅读:
    orcale 多列转一行显示
    orcale 树形结构查询
    orcale 32位guid转36位guid
    orcale 树形结构查询
    win7下安装virtualbox+Ubuntu12.04笔记
    Spring调度器corn表达式详解
    MYSQL之一主多从搭建方案
    None of the configured nodes are available:[{#transport#-1}解决方案
    大数据分批次提交保存
    ORACLE时间类型字段加减简便运算
  • 原文地址:https://www.cnblogs.com/LoveOrHate/p/4442275.html
Copyright © 2011-2022 走看看