前面学了这么多排列布阵的方法正好课上老师布置了任务要完成谢谢官网的仿设置那就一起来练练手吧学校官网实图可以看到官网的布局主要分3 层页头(学校名字和导航栏)、内容和页脚(最下面那行字)。我们可以看到内容的两边是有留白的通常来说这些地方可以放内容我们暂时先把盒子做出来看看排列的效果!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title经典三列布局position定位实现/title style /* 全局初始化清除所有元素默认的内外边距 */ * { margin: 0; padding: 0; } #navigator { width: 100%; height: 30px; background-color: orange; text-align: center; } #content { width: 100%; height: 800px; /* 父容器设置相对定位作为子元素绝对定位的参考基准 */ position: relative; } #div1 { width: 10%; height: 100%; background-color: red; /* 设置绝对定位固定在父容器左侧 */ position: absolute; /* 距离父容器左侧0像素 */ left: 0; /* 距离父容器顶部0像素 */ top: 0; } #div2 { width: 80%; height: 100%; background-color: green; /* 设置绝对定位位于左侧栏右边 */ position: absolute; /* 距离父容器左侧10%刚好在左侧栏后面 */ left: 10%; /* 距离父容器顶部0像素 */ top: 0; } #div3 { width: 10%; height: 100%; background-color: blue; /* 设置绝对定位固定在父容器右侧 */ position: absolute; /* 距离父容器右侧0像素 */ right: 0; /* 距离父容器顶部0像素 */ top: 0; } #footer { width: 100%; height: 30px; background-color: orange; text-align: center; } /style /head body div idnavigator网页导航栏/div div idcontent div iddiv1/div div iddiv2/div div iddiv3/div /div div idfooter网页页脚/div /body /html我们用颜色区分了各个区域可以更直观的看到排列的效果现在来模拟一下官网的排版!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title经典三列布局position定位实现/title style /* 全局初始化清除所有元素默认的内外边距 */ * { margin: 0; padding: 0; } #shouye { position: relative; width: 100%; height: 100px; background-image: url(C:/Users/FENG/Desktop/img_src/top.jpg); background-size: cover; } #bb{ position: absolute; width:450px; height: auto; top:10px; left: 400px; } #bbb{ position: absolute; width:350px; height: auto; top:16px; left: 850px; } #navigator { width: 100; height: 40px; background-color: rgb(11, 157, 43); text-align: center; line-height: 40px; } p{ word-spacing: 30px; } #content { width: 80%; height: 800px; margin:0 auto; position: relative; background-color: rgb(231, 231, 231); text-align: center; } #footer { width: 100%; height: 50px; background-color: rgb(255, 255, 255); text-align: center; line-height: 50px; } /style /head body div idshouye img idbb srclogo.png img idbbb srclogo2.png /div div idnavigator p 首页 学校概况 机构设置 院系专业 教学科研 信息公开 招生就业 实习备案专栏 实验室安全专栏 省高职院校高水平专业群/p/div div idcontent内容区域/div div idfooter粤ICP备2021088098号-1版权所有©2021广东云浮中医药职业学院/div /body /html