1. div 元素
div（division）元素是 HTML 中用于组合文档内容的通用容器，它可以将 HTML 文档分割为独立的、不同的部分。
例子：
<div id="header"><!-- 页眉内容 -->
</div>
<div id="content"><!-- 主内容 -->
</div>
<div id="footer"><!-- 页脚内容 -->
</div>
2. CSS 布局
CSS 布局涉及多种属性和方法，以下是一些关键的布局技术：
2.1 盒模型（Box Model）
margin：元素外边距border：元素边框padding：元素内边距width和height：元素宽度和高度
例子：
#content {margin: 10px;border: 1px solid #000;padding: 20px;width: 80%;height: 300px;
}
2.2 定位（Positioning）
static：默认定位，没有特别的定位，遵循正常的文档流。relative：相对定位，相对于其正常位置进行定位。absolute：绝对定位，相对于最近的已定位祖先元素进行定位。fixed：固定定位，相对于浏览器窗口进行定位。
例子：
#header {position: fixed;top: 0;width: 100%;
}
2.3 浮动（Float）
float: left;：元素向左浮动float: right;：元素向右浮动
例子：
2.4 Flexbox 布局
Flexbox 是一种用于在容器内分配和对齐元素的一维布局方法。
例子：
.container {display: flex;justify-content: space-between; /* 水平方向对齐 */align-items: center; /* 垂直方向对齐 */
}2.5 Grid 布局
CSS Grid 布局是一种用于创建复杂网页布局的二维布局方法。
例子：
复制
.grid-container {display: grid;grid-template-columns: auto auto auto; /* 定义三列 */gap: 10px; /* 列与列之间的间隔 */
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.container {display: flex;}.left-column {flex: 1; /* 占据剩余空间 */background-color: lightgrey;padding: 20px;}.right-column {flex: 2; /* 占据两倍于 left-column 的空间 */background-color: lightblue;padding: 20px;}
</style>
</head>
<body><div class="container"><div class="left-column"><h2>左侧栏</h2><p>这是左侧栏的内容。</p></div><div class="right-column"><h2>右侧栏</h2><p>这是右侧栏的内容。</p></div>
</div></body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>完整布局示例</title>
<style>body {margin: 0;font-family: Arial, sans-serif;}.header {background-color: #333;color: white;padding: 10px 20px;text-align: center;}.nav {background-color: #444;color: white;padding: 10px;}.nav ul {list-style-type: none;padding: 0;}.nav ul li {display: inline;margin-right: 20px;}.nav ul li a {color: white;text-decoration: none;}.nav ul li a:hover {text-decoration: underline;}.main {float: left;width: 70%;padding: 15px;background-color: #f1f1f1;}.sidebar {float: left;width: 30%;padding: 15px;background-color: #ddd;}.footer {clear: both;background-color: #333;color: white;text-align: center;padding: 10px;}
</style>
</head>
<body><div class="header"><h1>我的网站</h1>
</div><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">新闻</a></li><li><a href="#">联系我们</a></li><li><a href="#">关于</a></li></ul>
</div><div class="main"><h2>主体内容</h2><p>这是主体内容区域。在这里可以放置文章、图片、视频等内容。</p>
</div><div class="sidebar"><h2>侧边栏</h2><p>这是侧边栏区域。通常用来放置广告、搜索框、链接列表等。</p>
</div><div class="footer"><p>版权所有 © 2023 我的网站</p>
</div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>示例9.10</title><style>.all {width: 1000px;height: 400px;border: 2px solid red;margin: 0px auto;}.top {width: 1000px;height: 50px;background-color: lightcyan;}.main {width: 1000px;height: 320px;}.main .left {width: 230px;height: 300px;background-color: yellow;float: left;margin: 10px;}.main .right {width: 730px;height: 300px;background-color: lightgreen;float: left;margin: 10px;}.footer {width: 1000px;height: 30px;background-color: lightgrey;}</style></head><body><div class="all"><div class="top"></div><div class="main"><div class="left"></div><div class="right"></div></div><div class="footer"></div></div></body>
</html> 
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>示例9.11</title><style>* {margin: 10px auto;padding: 0px auto;font-size: large;}.all {background-color: red;width: 700px;height: 500px;}.left,.main,.right {text-align: center;height: 480px;line-height: 480px;float: left;}.left {background-color: antiquewhite;width: 150px;}.main {background-color: lightcyan;width: 400px;}.right {background-color: antiquewhite;width: 150px;}</style></head><body><div class="all"><div class="left">导航菜单</div><div class="main">视觉集中区域，主要内容</div><div class="right">表单或链接</div></div></body>
</html>
<html><head><meta charset="utf-8" /><title>示例9.12</title><style>* {margin: 0px auto;padding: 0px auto;font-size: large;}.all {background-color: red;text-align: center;width: 700px;height: 500px;}.top {background-color: antiquewhite;width: 680px;height: 80px;line-height: 80px;}.main {background-color: lightcyan;width: 680px;height: 340px;line-height: 340px;}.footer {background-color: antiquewhite;width: 680px;height: 80px;line-height: 80px;}</style></head><body><div class="all"><div class="top">导航或者横幅广告</div><div class="main">视觉集中区域，主要内容</div><div class="footer">版权信息</div></div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>示例9.13</title><style>* {margin: 0px auto;/*设置浏览器元素水平居中*/padding: 0px auto;width: 100%;height: 100%;/*先设置父元素的宽度和高度为100%。*/}.all {border: 2px dashed red;width: 95%;height: 98%;}.top {background-color: pink;width: 100%;height: 15%;}.main {width: 100%;height: 75%;}.left {background-color: yellow;width: 20%;float: left;}.center {background-color: lightcyan;width: 60%;float: left;}.right {background-color: yellow;/*中间div的右侧div宽度自适应*/}.footer {background-color: pink;width: 100%;height: 10%;}</style></head><body><div class="all"><div class="top"></div><div class="main"><div class="left"></div><div class="center"></div><div class="right"></div></div><div class="footer"></div></div></body>
</html> 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0px auto;}.all{width: 1000px;height: 840px;background-image: url(img/764b371b5324c91d88b1f28d5990272.jpg);}.top{width: 1000px;height: 150px;} .main{background-color: aliceblue;width: 1000px;height: 630px;}.left{padding-top: 30px;padding-left: 20px;width: 200px;height: 580px;float: left;}.center{border-left: 2px dashed blue;border-right: 2px dashed blue;padding-top: 50px;width: 500px;height: 580px;float: left;}.right{padding-left: 20px;width: 250px;height: 630px;float: left;}.footer{width: 1000px;height: 60px;font-family: "kaiti";font-size: 18px;text-align: center;line-height: 30px;}a,span{color: red;font-weight: 700px;text-align: center;}p{font-family: "heiti";font-weight: 700px;color: blue;font-size: 28px;text-align: center;}table{font-family: "heiti";font-weight: 700px;color: blue;font-size: 20px;line-height: 55px;}</style></head><body><div class="all"><div class="top"><img src="img/193e2e36174140fb579e64fd1bb8261.jpg"/></div><div class="main"><div class="left"><p><img src="img/b3477344cbdad25e19df7d149143532.jpg"/></p ><p><img src="img/5d59b0d40f6757467060be8fb992cfa.jpg"/></p ><p><img src="img/83962f84c2fa955e20eea0f96511aaa.jpg"/></p ><p><img src="img/a0272700a36e6465f8dd586cd85e04a.jpg"/></p ><p>相关信息</p >四大学历提升方案<br />新报考解读击<br />六大类专业报考指南<br />更多信息请点击</div><div class="center"><p>入学报名表</p ><form id="form2" name="form2" method="post" action=""><table width="400" border="0" align="center" cellpadding="0" cellpadding="0"><tr><td width="158" align="right">姓名：<label for="textfield"></label></td><td width="242"><input type="text" name="textfield" id="textfield"/></td></tr><tr><td align="right">联系电话：</td><td><input type="text" name="textfield2" id="textfield2"/></td></tr><tr><td align="right">邮箱：</td><td><input type="text" name="textfield3" id="textfield3"/></td></tr><tr><td align="right">资料邮寄地址：</td><td><input type="text" name="textfield4" id="textfield4"/></td></tr><tr><td align="right">最高学历：</td><td><select name="select2" id="select2"><option>本科</option><option>大专</option><option>高中</option><option>初中</option><option>小学</option></select></td></tr><tr><td align="right">选择的课程：</td><td><input type="text" name="textfield6" id="textfield6"/></td></tr><tr><td align="right">意向学习方式：<label for="select2"></label></td><td><select name="select2" id="select2"><option>网络授课</option><option>周末班</option><option>全日制</option></td></tr><tr><td colspan="2" align="center"><input type="image" name="imageField" id="imageField" src="img/14d973bfdab7a2aa75f0a63fffc2d69.jpg"/></td></tr></table></form></div><div class="right"><img src="img/273602823a329f55bbed6bd74beab68.jpg"/><img src="img/8924bbc559c839db4a1eb1fc5e06e76.jpg"/><img src="img/8e900644243bacf6c62d44139d7dc93.jpg"/><img src="img/adfeb4204b794bf21add758e896c24b.jpg"/></div></div><div class="footer"><span>免费电话：</span>400-XXX-XXX(18条线)！！<span>(北京校区)</span>北京路xx大厦一楼0000号；||<span>(上海校区)</span>上海路XX科技园7栋9999号<br />此网站信息最终解释权©众诚远程教育</div></div></body>
</html> 
