DIV+CSS布局入门：构建网站结构与样式

需积分: 9 101 浏览量更新于2024-07-31 收藏 314KB DOC 举报

"本篇DIV+CSS布局入门教程由aultoale于2006年6月10日发布，主要针对初学者提供关于网页布局的设计方法。文章强调了在开始布局前，掌握HTML基础知识的重要性，因为教程会涉及CSS的使用。教程以实例为导向，首先引导读者构思和草图设计网页布局，例如，区分出页面的主要部分，如顶部（包含Logo、菜单和Banner）、主体内容（分为侧边栏和主体）以及底部版权信息。作者详细解释了页面布局的过程，通过分析构思图，确定了各个部分的层次结构，然后使用DIV（一种用于定义网页结构的HTML元素）进行组织。整个页面的HTML结构被划分为五个主要区域：body、Container（页面容器）、Header（头部）、PageBody（主体，进一步细分为Sidebar和MainBody）、以及Footer（底部）。作者还提供了具体的代码示例，指导如何创建这些div元素并使用CSS进行样式定义。在实践中，作者建议在桌面上创建一个名为"DIV+CSS布局练习"的文件夹，并在这个文件夹下创建两个空的记事本文档，以实际操作HTML和CSS，将理论知识应用到实际网页布局中。通过这个教程，读者可以逐步学习和掌握如何利用DIV和CSS进行灵活、精细的网页布局，从而提升网页设计技能。"

</head>

<body>

</body>

</html>

这是 XHTML 的基本结构，将其命名为 index.htm，另一个记事本文档则命名为

css.css。

下面，我们在<body></body>标签对中写入 DIV 的基本结构，代码如下：

<div id="container">[color=#aaaaaa][/color]

<div id="Header">[color=#aaaaaa][/color]

　　</div>

<div id="PageBody">[color=#aaaaaa][/color]

<div id="Sidebar">[color=#aaaaaa][/color]

　　　　</div>

<div id="MainBody">[color=#aaaaaa][/color]

　　　　</div>

<div id="Footer">[color=#aaaaaa][/color]

　　</div>

为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开 css.css 文件，写

入 CSS 信息，代码如下：

/*基本信息*/

body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

/*页面层容器*/

#container {width:100%}

/*页面头部*/

#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

剩余15页未读，继续阅读

BY_CJ

粉丝: 0

DIV+CSS布局入门：构建网站结构与样式

网页设计基础Div+CSS布局入门教程

Div+CSS布局入门教程(一二三四)

Div+CSS布局入门教程

Div+Css布局入门教程

算法_Java转C_红宝书重要程序_学习参考_1741862469.zip

人脸识别_活体检测_眨眼检测_自动捕捉服务名Face_Liv_1741771519.zip

视觉处理_自动裁剪_显著区检测_OpenCV_图像优化用途_1741779446.zip

基于pringboot框架的图书进销存管理系统的设计与实现（Java项目编程实战+完整源码+毕设文档+sql文件+学习练手好项目）.zip

基于动态规划和模型预测控制的并联混合电动汽车最佳控制 简介：利用动态规划，使用模型预测控制，实现对并联混合动力电动汽车的最佳控制，并降低总体成本函数 使用动态规划可以实现混合动力电动汽车的优化控制

人脸识别_性别年龄检测_白色方框标识_娱乐社交用途_1741779124.zip

最新资源

基于动态规划和模型预测控制的并联混合电动汽车最佳控制简介：利用动态规划，使用模型预测控制，实现对并联混合动力电动汽车的最佳控制，并降低总体成本函数使用动态规划可以实现混合动力电动汽车的优化控制