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

来源：互联网发布：单片机各种线介绍编辑：程序博客网时间：2024/05/18 12:35

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

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

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

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

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

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

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

代码演示：（简单分块）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

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;

}

</style>

<body>

<div id="header">头部分包括导航等box</div>

<div id="main">内容部分包括页面上的一切内容/box（文字，图片，信息，咨询......）</div>

<div id="Footer">版权部分网站作者版权许可证以及超级连接）</div>

</div>

</body>

</html>

显示效果：

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

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

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