热门关键字:
jquery > jquery教程 > jquery教程 > DIV+CSS布局基本流程及实例介绍分享

DIV+CSS布局基本流程及实例介绍分享

467
作者:管理员
发布时间:2021/3/29 18:09:31
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4305
  一、认清学习的要求


  1、弄清目的,首先要认识为什么要学习CSS?


  2、心态不能急,如果你很急躁,否则会很快丧失兴趣。


  3、坚持,这个不是一到两天的事情,是一个漫长的过程(至少两个月)。


DIV+CSS布局基本流程及实例介绍分享



  二、基础学习


  1、了解CSS作用是什么?(即CSS、html和js的关系是什么,html结构重要性)


  2、css基础知识、css属性样式


  3、html


  上面几点,一般都是很快的掌握了,也不需要做到精通,了解大概就可以。


  差不多时候,开始在网上找一些psd设计稿,自己做做看,做完之后发现问题,并把他们进行总结。


  三、学会分析别人网页布局


  当你做psd设计的代码,发现问题,可能找不到答案或没有人帮你回答,也不要急,这时最好看看别人网页的布局结构,主要看html布局框架,进行借鉴(当然网上还有很多结构代码很槽糕)。然后了解美工图如何分析、如何使用PS工具切出需要的素材、如何使用这些切出的图片素材进行布局、布局技巧、兼容性解决与避免等。


  总之:就是让自己布局时候能知道大的布局结构如何布局,建立布局思想与技巧。


  四、代码的规范


  当你看完很多别人的网页代码之后,你会发现,他们都有规范,这些规范网上有很多,你需要总结和背诵,当然不是死记硬背,主要在切图上多做多实践,熟了就能记住。


DIV+CSS布局基本流程及实例介绍分享



  五、大量练习


  练习是从始到终的,不要断,即使找一些简单的网页进行布局实践,开始可能开发很慢,会遇到很多小问题,也不急。


  首先我们拿到一张网页美工图片我们将从上下、上中下、左右、上中(中包括左右)下布局框架来思考。


  下面通过一个实例讲解下CSS布局分析,我们以DIV CSS5列表页面分析css布局:


  首先我们可以分析出我们DIV CSS布局重构此页面结构框架,我们可以看出是上、中、下结构,其中又包括了左右结构。


  由此我们就要写此页面CSS和html时候就先从上到下从外到内原则写CSS与html。


  我们首先建一个web的文件夹并在此文件夹里新建html页面命名为index.html,CSS文件命名为index.css。这里有个诀窍就是可以导入模板方式来建CSS与html初始页面,然后将CSS文件引用到html,再在CSS模板的基础上再写再添加CSS。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐