前端入门级之如何从零开始前端(估计要被人鄙视成LOW货了)入门篇

王朝学院·作者佚名  2016-05-24
窄屏简体版  字體: 小  |  中  |  大  |  超大  

前端入门级之如何从零开始前端(估计要被人鄙视成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/*\**/: blue\9 }.header {width:300px;} /* 所有浏览器*/.header {width/*\**/:330px\9;} /* 所有浏览器IE浏览器 */.header {*width:310px;} /* IE7和IE6能识别,IE8和FF不能识别*/.header {_width: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 /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/

4.

汇总下IE各版本的csshack。

hack

示例

IE6(S)

IE6(Q)

IE7(S)

IE7(Q)

IE8(S)

IE8(Q)

*

*color

Yes

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航