首页 > 代码库 > DIV+CSS布局基本流程及实例介绍
DIV+CSS布局基本流程及实例介绍
都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称。DIV+CSS布局是现在非常流行的布局方法,替代了原来的表格布局。下面我们先来看下学习DIV+CSS布局的基本步骤:
一、认清学习的要求
1、弄清目的,首先要认识为什么要学习CSS?
2、心态不能急,如果你很急躁,否则会很快丧失兴趣。
3、坚持,这个不是一到两天的事情,是一个漫长的过程(至少两个月)。
二、基础学习
1、了解CSS作用是什么?(即CSS、html和js的关系是什么,html结构重要性)
2、css基础知识、css属性样式
3、html
上面几点,一般都是很快的掌握了,也不需要做到精通,了解大概就可以。
差不多时候,开始在网上找一些psd设计稿,自己做做看,做完之后发现问题,并把他们进行总结。
三、学会分析别人网页布局
当你做psd设计的代码,发现问题,可能找不到答案或没有人帮你回答,也不要急,这时最好看看别人网页的布局结构,主要看html布局框架,进行借鉴(当然网上还有很多结构代码很槽糕)。然后了解美工图如何分析、如何使用PS工具切出需要的素材、如何使用这些切出的图片素材进行布局、布局技巧、兼容性解决与避免等。
总之:就是让自己布局时候能知道大的布局结构如何布局,建立布局思想与技巧。
四、代码的规范
当你看完很多别人的网页代码之后,你会发现,他们都有规范,这些规范网上有很多,你需要总结和背诵,当然不是死记硬背,主要在切图上多做多实践,熟了就能记住。
五、大量练习
练习是从始到终的,不要断,即使找一些简单的网页进行布局实践,开始可能开发很慢,会遇到很多小问题,也不急。
制作DIV CSS网页前思考布局:
由此我们就要写此页面CSS和html时候就先从上到下从外到内原则写CSS与html。
我们首先建一个web的文件夹并在此文件夹里新建html页面命名为index.html,CSS文件命名为index.css。这里有个诀窍就是可以导入模板方式来建CSS与html初始页面,然后将CSS文件引用到html,再在CSS模板的基础上再写再添加CSS。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html;charset=gb2312"/>
<