DIV+CSS—菜鸟分享学习心得!入门篇
是菜鸟,可能写的不好,不够明朗,还忘大虾提点,也希望可以和新手一起学习
首先申明，我觉得div+css样式布局 入门是非常简单的，只是简单的属性，与属性值而已。但是要想用好他，我觉得那是一门艺术，速成不了。
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style 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;
}
</style>
<body>
<div id="container">
<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浏览器的兼容问题，要考虑到用户在浏览我们网站时候，他浏览器的显示效果。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）