DIV+CSS—菜鸟分享学习心得!入门篇

DIV+CSS遵循的是网页标准设计，也就是web标准，而web标准最注重的就是：“结构的语义化”(分别定义，区块分明，强化重用，代码易读)。

 

DIV排版的核心：即CSS盒子模式

 

CSS  每个div盒子模式包括：内容(content)、填充(padding)、边框(border)、边界(margin)

 

 

 

用DIV+CSS设计思路是这样的:

 1.用div来定义语义结构；给页面分块。

2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；

3.最后在这个CSS定义的盒子内加上内容，如文字、图片等

代码演示：（简单分块）

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml">

  type="text/css">

body{

       background-color:#FFCCFF;

       margin:1px 0px 0px 0px;

       padding:0px;

       font-size:12px;

       font-family:Arial, Helvetica, sans-serif;

}

#container{

       position:relative;

       margin:0px auto 0px auto;

       width:400px;

       text-align:center;

       height:900px;

}

#header{

       width:auto;

       margin:0  auto;

       height:100px;

       background:#FFCC99;

       border:1px solid #0000FF;

}

 

#main{

       width:auto;

       margin:0 auto;

       height:200px;

       background:#FFFFCC;

       border:1px solid #FF0000;

}

#Footer{

       width:auto;

       margin:0 auto;

       height:100px;

       background:#00FFFF;

       border:1px solid #9999FF;

}

 

  id="container">

头部分 包括导航等box

内容部分 包括页面上的一切内容/box（文字，图片，信息，咨询......）

 

版权部分 网站作者 版权 许可证以及超级连接）

显示效果：

 

 

然后就可以具体按块（或者说是box）给每个块 进行一个css的属性设置。比如background-color背景颜色设置  background-image背景图案，font-size:字体大小，color:字体颜色等  都可以达到很不一般的效果哦。

 

 

在制作网页的时候：CSS中的盒子宽度计算,最好的浏览效果是960-970px（参考sina、阿里吧吧、雅虎等大网站都是这个宽度,不过只要设置宽度在1004px之内，显示都是正常的）

其次，就是在写CSS的时候，要注意IE浏览器和FF浏览器的兼容问题，要考虑到用户在浏览我们网站时候，他浏览器的显示效果。