手机访问 | 设为首页 | 加入收藏 | 网站地图

当前位置:电脑中国 > 网络创业 > CSS DIV >

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

2017-05-18 11:28|来源:未知 |作者:dnzg |点击:

都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称。DIV+CSS布局是现在非常流行的布局方法,替代了原来的表格布局。下面我们先来看下学习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网页前思考布局
 
首先我们可以分析出我们DIV 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"/> 
<title>css布局案例实验页面-www.DIV CSS5.com.cn</title> 
<link href="index.css"rel="stylesheet"type="text/css"/> 
</head>copyrightwww.DIV CSS5.comDIV CSS5  
<body> 
<div id="header">我是头部(上)</div> 
<div id="centers"> 
<div class="c_left">我是中的左</div> 
<div class="c_right">我是中的右</div> 
<div class="clear"> </div> 
</div> 
<div id="footer">我是底部(下)</div> 
</body> 
</html> 
index.css的CSS代码如下:
以下为引用的内容:
body,div,address,blockquote,iframe,ul,ol,dl,dt,dd,li,dl,h1,h2,h3,h4,h5,h6,p,pre,table,  
 
caption,th,td,form,legend,fieldset,input,button,select,textarea{margin:0;padding:0;  
 
font-weight:normal;font-style:normal;font-size:100%;font-family:inherit;}  
ol,ul,li{list-style:none;}  
img{border:0;}  
body{color:#000;background:#FFF;text-align:center;font:12px/1.5Arial,Helvetica,sans-serif;}  
.clearfix:after{clear:both;content:".";display:block;height:0pt;visibility:hidden;overflow:hidden;}  
 
.clear{clear:both;height:1px;margin-top:-1px;width:100%;}  
 
.dis{display:block;}  
.undis{display:none;}  
 
/*此上面代码是初始CSS模板,下面是新写CSS布局框架代码*/  
 
#header,#centers,#footer{width:100%;margin:0auto;  
 
clear:both;font-size:18px;line-height:68px;font-weight:bold;}  
#header{height:68px;border:1pxsolid#CCCCCC;}  
#centers{padding:8px0;}  
#footer{border-top:1pxsolid#CCCCCC;background:#F2F2F2;}  
 
#centers.c_left{float:left;width:230px;border:1pxsolid#00CC66;  
 
background:#F7F7F7;margin-right:5px;}  
#centers.c_right{float:left;width:500px;border:1pxsolid#00CC66;background:#F7F7F7}  
你可以考出此两段代码新建个试试。

按以下步骤来建设一个网站的页面:

1、顶部部分,其中包括了LOGO、MENU和一幅Banner图片;

2、页面中间部分,那就是我们的主体了,要求打开首页快速,所以我们在网站发布的信息设计为三列。

3、底部,包括一些版权信息。

根据以上设想,我们定义如下div的结构
 
DIV结构如下:
  
│body {} /*这是一个HTML元素*/
  
└#Container {} /*页面层容器*/
     
├#Header {} /*页面头部*/
     
├#MianBody {} /*页面主体*/
     
│ ├#mainbody-left {} /*主体页面左边*/
     
│ └#mainbody-center {} /*主体页面中间*/
│ └#MainBody -right{} /*主体页面右边*/
 
└#footer {} /*页面底部*/


用DIV+CSS做一个导航栏是非常容易的,而且我们可以通过css来对导航栏的样式方便的作出调整。用div设置导航栏一般就用<ul>和<li>标签。

4、高度显示效果不同
一般情况下只需要使用height: 100px;即可,当显示效果不同时,则可以_height: 100px;来对IE6的高度进行设置。
(责任编辑:dnzg)