都说用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布局分析,我们以DIV CSS5列表页面分析css布局:
首先我们可以分析出我们DIV CSS布局重构此页面结构框架,我们可以看出是上、中、下结构,其中又包括了左右结构。
由此我们就要写此页面CSS和html时候就先从上到下从外到内原则写CSS与html。
我们首先建一个web的文件夹并在此文件夹里新建html页面命名为index.html,CSS文件命名为index.css。这里有个诀窍就是可以导入模板方式来建CSS与html初始页面,然后将CSS文件引用到html,再在CSS模板的基础上再写再添加CSS。
由此我们就要写此页面CSS和html时候就先从上到下从外到内原则写CSS与html。
我们首先建一个web的文件夹并在此文件夹里新建html页面命名为index.html,CSS文件命名为index.css。这里有个诀窍就是可以导入模板方式来建CSS与html初始页面,然后将CSS文件引用到html,再在CSS模板的基础上再写再添加CSS。
以下是index.html的html代码:
以下为引用的内容:<!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"/>
<