div + css简单网站布局
需积分: 0 136 浏览量
更新于2009-08-15
收藏 879KB RAR 举报
在网页设计领域，`div` 和 `css` 是构建页面布局不可或缺的基础元素。`div` 是HTML中的一个块级元素，常被用作容器来组织和分隔网页内容，而CSS（Cascading Style Sheets）则负责定义这些元素的样式、布局和视觉表现。本教程将深入探讨如何利用 `div` 和 `css` 创建简单的网站布局。
我们需要理解 `div` 元素。`<div>` 是 "division" 的缩写，它没有特定的意义，但可以容纳任何类型的内容，如文本、图片或其他HTML元素。`div` 通常与其他CSS属性结合使用，如 `id` 或 `class`，以便对其进行精确的样式控制。例如：
```html
<div id="header">这是头部</div>
```
在上面的代码中，`id="header"` 可用于在CSS中引用该元素并为其设置样式。
接着，我们探讨CSS布局。CSS提供了多种布局方式，包括流体布局、固定布局、网格布局等。对于简单的网站布局，我们可以从以下几种基本布局开始：
1. **固定布局**：在这种布局中，元素的宽度和高度是固定的，不会随浏览器窗口大小改变而变化。例如：
```css
#header {
width: 960px;
margin: 0 auto; /* 居中显示 */
}
```
2. **流体布局**：元素宽度基于浏览器窗口的百分比，使页面具有响应性。例如：
```css
.container {
width: 100%;
}
```
3. **Flexbox布局**：适用于一维布局，如行或列。它可以轻松实现对齐、填充和自动缩放。例如：
```css
.container {
display: flex; /* 开启flex布局 */
justify-content: center; /* 水平居中 */
}
```
4. **Grid布局**：适用于二维布局，如复杂的网格系统。它允许在行和列上精确控制元素位置。例如：
```css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3等份列宽 */
gap: 10px; /* 列之间的间隔 */
}
```
在实际应用中，我们通常会结合使用这些布局方法，以创建更复杂和灵活的页面结构。例如，使用 `div` 创建一个包含头部、主体和底部的简单网站布局：
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>简单的div+css布局示例</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
#header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
#main {
display: flex;
justify-content: center;
padding: 20px;
}
#sidebar {
width: 200px;
background-color: #f0f0f0;
padding: 20px;
}
#content {
flex: 1;
background-color: #fff;
padding: 20px;
}
#footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div id="header">欢迎来到我的网站</div>
<div id="main">
<div id="sidebar">侧边栏内容</div>
<div id="content">主要内容</div>
</div>
<div id="footer">版权所有 © 2022</div>
</body>
</html>
```
这个例子中，我们使用了 `div` 创建了四个部分：头部、主体（包含侧边栏和主要内容）、以及底部，并使用 `css` 进行了相应的样式设置，实现了基本的页面布局。
在学习和实践过程中，你可以根据需求调整 `div` 结构和 `css` 样式，以创建不同类型的网站布局。记住，关键在于理解每个元素的作用，以及如何通过 CSS 来控制它们的外观和位置。不断练习和尝试，你将能够熟练掌握 `div + css` 的网站布局技巧。
div + css简单网站布局.rar （75个子文件） 
项目 css 
Main.css 828B
fourModel.html 10KB twoModel.html 6KB threeModel.html 7KB images 
wwew.JPG 693B
复件 新建 文本文档1.bmp 2.25MB cen04.jpg 3KB cen04~.jpg 3KB htmlmoban.js 217B daohan_5.jpg 2KB cen03~.jpg 3KB
index_1.gif 8KB cen01.jpg 3KB bg05.gif 810B cen05.gif 2KB dot01.gif 76B bg06.gif 4KB
banner.swf 31KB index_10.gif 3KB bg04.gif 78B button05.jpg 1KB bg02.gif 96B bg14.JPG 698B bg10.gif 155B left03.gif 4KB 复件 新建 文本文档3.bmp 2.25MB dot02.gif 153B daohan_6.jpg 1KB left02.gif 4KB button06.jpg 1KB daohan_3.jpg 1KB line01.gif 114B daohan_4.jpg 2KB button03.gif 660B bg01.gif 128B bg03.gif 275B 复件 新建 文本文档2.bmp 2.25MB index_6.gif 169B bg07.gif 79B index_3.gif 107B daohan_7.jpg 1KB index_11.gif 8KB button07.jpg 1KB logo.jpg 6KB cen02~.jpg 4KB index_4.gif 3KB daohan_1.jpg 1KB button02.gif 664B logo.gif 4KB cen04.gif 121B 新建 文本文档.jpg 2.25MB button01.gif 652B iboy.gif 125B banner.gif 30KB bg11.gif 66B cen03.jpg 3KB index_5.gif 138B bg09.gif 283B isms.gif 162B bg12.gif 66B line02.gif 393B cen01~.jpg 4KB bg13.gif 109B daohan_2.jpg 983B left01.jpg 1KB index_9.gif 130B cen06.gif 3KB left04.gif 4KB cen02.jpg 3KB bg08.gif 81B igirl.gif 124B cen02.gif 121B js Main.js 577B
板块背景表格摸版.txt 378B oneModel.html 10KB2009-09-25 上传
5星 · 资源好评率100%198 浏览量
5星 · 资源好评率100%170 浏览量
5星 · 资源好评率100% 5星 · 资源好评率100%111 浏览量
5星 · 资源好评率100%154 浏览量
140 浏览量
2009-12-20 上传
5星 · 资源好评率100%187 浏览量
2013-05-17 上传
2009-12-20 上传
143 浏览量
150 浏览量
101 浏览量
资源评论
飞飞0001
- 粉丝: 2
- 资源: 10
最新资源
- 基于Python的南京二手房数据采集及可视化分析.zip
- 大数据采集、抽取平台，zdh-web是zdh系列服务的可视化管理平台，包含数据采集、调度、权限、导航流、私域营销等模块.zip
- 基于注意力的多尺度卷积神经网络轴承故障诊断 针对传统方法在噪声环境下诊断精度低的问题，提出了一种多尺度卷积神经网络的滚动轴承故障诊断方法 首先，构建多尺度卷积提取不同尺度的故障特征，同时引入通道注意
- 常用文本匹配模型tf版本，数据集为QA-corpus，持续更新中.zip
- 安卓项目源码Android安卓游戏打地鼠源码
- 开放旋转机械故障数据集（旋转机械开源故障数据集整理）.zip
- 机械设计新能源电池管壳组装线体sw18非常好的设计图纸100%好用.zip
- 开源SFT数据集整理、随时补充.zip
- 安卓项目源码Android仓库管理系统源码
- 机械设计轧机机架step非常好的设计图纸100%好用.zip
- 微信HOOK、微信机器人wxhook，数据库解密微信公众号采集微信公众号爬虫，企业微信HOOK.zip
- 安卓项目源码Android操作数据库实例
- C++实现斗地主游戏：包含玩家、牌型与出牌规则
- musetalk嘴型同步
- JLINK V9插入电脑没反应
- 安卓项目源码Android城市天气预报源码
