使用Div+CSS进行网页布局设计的入门教程
需积分: 15 52 浏览量
更新于2024-07-20
收藏 824KB DOC 举报
"DivCSS布局入门教程"
在网页设计中，Div+CSS布局是一种常见的方法，它将内容和样式分离，使得网页结构更加清晰，易于维护和优化。本教程旨在帮助初学者掌握Div+CSS布局的基础知识。
首先，了解基本概念是至关重要的。CSS（Cascading Style Sheets）用于定义网页的样式，如颜色、字体、布局等；HTML（HyperText Markup Language）则用于构建网页的结构。在Div+CSS布局中，Div（Division）是HTML中的一个区块元素，常用来组织和分隔页面内容。
教程从页面布局与规划开始。在设计网页时，通常会先用图形软件（如Photoshop或FireWorks）草拟出界面布局图。例如，一个典型的网页可能包括顶部（LOGO、菜单、Banner）、侧边栏、主体内容以及底部（版权信息）等部分。
接着，需要对这些部分进行逻辑上的划分，并创建相应的Div层。在这个例子中，我们有以下几个主要的Div：
1. #Container：页面层容器，包裹整个页面内容。
2. #Header：页面头部，包含LOGO、菜单和Banner。
3. #PageBody：页面主体，分为#Sidebar（侧边栏）和#MainBody（主体内容）。
4. #Footer：页面底部，显示版权等信息。
Div的嵌套关系是构建页面结构的关键。每个Div都有其特定的样式和位置，通过CSS来控制。例如，我们可以设置Div的宽度、高度、背景色、边距等属性，以及使用浮动（float）、清除（clear）和边界（border）等来调整元素的位置和排列方式。
编写HTML时，需遵循XHTML标准，确保文档结构正确。在头元素（<head>）中，引入CSS样式表链接或者内联样式，如下所示：
```html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Div+CSS布局示例</title>
<style type="text/css">
/* 在这里编写CSS样式 */
</style>
</head>
```
在body元素（<body>）中，根据规划的Div结构插入对应的HTML标签，例如：
```html
<body>
<div id="Container">
<div id="Header">
<!-- 头部内容 -->
</div>
<div id="PageBody">
<div id="Sidebar">
<!-- 侧边栏内容 -->
</div>
<div id="MainBody">
<!-- 主体内容 -->
</div>
</div>
<div id="Footer">
<!-- 底部内容 -->
</div>
</div>
</body>
```
最后，通过浏览器预览并调试，不断调整CSS样式，直至达到预期的布局效果。
Div+CSS布局是一个需要理论知识和实践相结合的过程。理解Div的作用、CSS的规则以及如何通过它们来控制页面布局，是成为熟练的网页设计师的基础。通过本教程的学习，初学者可以逐步掌握这一技能，并能独立创建出结构清晰、美观的网页。
下格式：
#7F-.6F%N7=7HN& H- ；
表示：使用6%灰度色&填充整个层，使用 7=7H 做为背景图片，
H
表示图片位于当前层的左上端，- 表示仅显示图片大小而不填充满整
个层。
373H3;3-
用于定位背景图片，分别表示 上 3右 3下 3左 3中；还可以使用
#7F-.F%N7=7HN&> A>> AG
表示 座标为 > 像素，: 座标为 >> 像素的精确定位；
3- 3 A3 0
分别表示 填充满整个层 3不填充 3沿 轴填充 3沿 : 轴填充。
73?3
分别表示高度% A&、宽度% A&、字体颜色% 色系表&。
、如何使页面居中？
大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使
得页面居中显示呢？
是因为我们在6-- 中使用了以下属性：
;7-.>FG
按照前面的说明，可以知道，表示上下边距为 >，左右为自动，因此该层就会
自动居中了。
如果要让页面居左，则取消掉 F 值就可以了，因为默认就是居左显示的。
通过 ;7-.F 我们就可以轻易地使层自动居中了。
、这里我只介绍这些常用的 属性了，其他的请参看 => 中文手册。
当我们写好了页面大致的 结构后，我们就可以开始细致地对每一个部分进
行制作了。
在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把
$$=$$ 中的样式全部清除掉，重新写入以下样式代码：
34基本信息43
0 1H-. A ;G;7-.> AGA
7-.-G#7F-.6!!!G2
.-#O.$1H-$M. AGA-.--G2
.12
34页面层容器43
6--1?.L>> AG;7-.> AF2
样式说明：
.-#O.$1H-$M. AGA-.--G2
.12
这两项分别是控制页面中超链接的样式，具体我就不说明了，请大家参阅手册。
6--1?.L>> AG;7-.> AF2
指定整个页面的显示区域。
?.L>> A 指定宽度为 L>> 像素，这里根据实际所需设定。
剩余25页未读，继续阅读
2019-07-22 上传
2012-11-17 上传
2020-09-16 上传
点击了解资源详情
2009-01-12 上传
2024-11-23 上传
qq_35835008
- 粉丝: 0
- 资源: 2
我的内容管理
展开
最新资源
- 火炬连体网络在MNIST的2D嵌入实现示例
- Angular插件增强Application Insights JavaScript SDK功能
- 实时三维重建：InfiniTAM的ros驱动应用
- Spring与Mybatis整合的配置与实践
- Vozy前端技术测试深入体验与模板参考
- React应用实现语音转文字功能介绍
- PHPMailer-6.6.4: PHP邮件收发类库的详细介绍
- Felineboard：为猫主人设计的交互式仪表板
- PGRFileManager：功能强大的开源Ajax文件管理器
- Pytest-Html定制测试报告与源代码封装教程
- Angular开发与部署指南：从创建到测试
- BASIC-BINARY-IPC系统：进程间通信的非阻塞接口
- LTK3D: Common Lisp中的基础3D图形实现
- Timer-Counter-Lister:官方源代码及更新发布
- Galaxia REST API：面向地球问题的解决方案
- Node.js模块：随机动物实例教程与源码解析
