文章目录

一、网页底部盒子模型测量及样式
- 1、盒子布局说明
- 2、底部的大盒子测量及样式
- 3、版心盒子
- 4、版权盒子
- 5、链接盒子
二、代码示例
- 1、HTML 标签结构
- 2、CSS 样式
- 3、显示效果

绘制矩形框中的部分 :

一、网页底部盒子模型测量及样式

1、盒子布局说明

底部盒子主要由如下部分组成 :

红色盒子 : 最外层盒子水平方向充满整个浏览器 , 背景是白色 ;
蓝色盒子 : 内部版心位置的盒子 , 盛放主要内容 ;
绿色盒子 : 版心内部左侧的盒子存放 logo 按钮以及版权内容 ;
橙色盒子 : 版心内部右侧盒子 , 存放几排链接 ;

2、底部的大盒子测量及样式

底部的大盒子高度 415 像素 , 实际内容距离顶部有 30 像素的间隔 ,

这里使用 30 像素的内边距撑开该间隔 , ( 外边距会造成塌陷 ) ,

由于内边距会撑大盒子 , 这里使用 385 的内容尺寸 + 30 上内边距 = 415 组成盒子高度 ;

/* 底部大盒子样式 宽度充满浏览器 */
.footer {/* 高度为 415 由于 内边距会撑大盒子因此 这里设置 385 高度 + 30 内边距 */height: 385px;padding-top: 30px;/* 大盒子背景白色 */background-color: #fff;
}

3、版心盒子

版心盒子不需要进行特殊设置 , 只需要将之前定义的版心样式设置给改盒子即可 ;

/* 版心宽度 1200 像素 , 在浏览器中居中对齐 */
.w {width: 1200px;margin: auto;
}

4、版权盒子

整个版权盒子在版心盒子中 , 设置左浮动 ;

/* 版权所在盒子左浮动 */
.copyright {float: left;
}

文字大小 12 像素 , 颜色值 #666666 ; 文本样式如下 :

/* 版权盒子文本样式 */
.copyright p {/* 文本 12 像素 颜色值 #666 */font-size: 12px;color: #666;/* 上边距 20 像素 , 下边距 15 像素 */margin: 20px 0 15px 0;
}

按钮宽高 120x36 像素左右上下各有 1 像素边框 , 各减去 2 像素最终内存尺寸为 118x34 像素 ,

文本 16 像素 , 颜色值 #00a4ff ;

下载 APP 按钮样式 :

/* 版权盒子 下载 APP 按钮样式 */
.app {/* 显示模式 - 块级模式 */display: block;/* 按钮宽高 120x36 像素 左右上下 各有 1 像素边框 各减去 2 像素 最终内存尺寸为 118x34 像素 */width: 118px;height: 34px;/* 上下左右 1 像素边框 */border: 1px solid #00a4ff;/* 水平居中对齐 */text-align: center;/* 垂直居中对齐 - 行高 = 内容高度 */line-height: 34px;/* 文本大小和颜色值 */font-size: 16px;color: #00a4ff;
}

5、链接盒子

整个链接模块盒子在网页底部右侧 , 这里设置右浮动 ;

/* 整个链接模块盒子 右浮动 */
.links {float: right;
}

列表项标题 16 像素 , 颜色值 #666666 ;

/* 列表项 标题 样式 */
.links dt {height: 35px;font-size: 16px;color: #333;
}

普通的链接 12 像素 , 颜色值 #333333 ;

最终的 CSS 样式为 :

/* 整个链接模块盒子 右浮动 */
.links {float: right;
}/* dl 列表设置在 链接 盒子中左浮动 */
.links dl {float: left;/* 距离左侧 100 像素 */margin-left: 100px;
}/* 列表项 标题 样式 */
.links dt {height: 35px;font-size: 16px;color: #333;
}/* 列表项 链接样式 */
.links dd a {font-size: 12px;color: #333;
}/* 鼠标经过的样式 */
.links dd a:hover {color: #004aff;
}

二、代码示例

1、HTML 标签结构

核心代码 :

<!-- 底部盒子模块 - 开始 --><div class="footer"><!-- 版心内容 --><div class="w"><!-- 左侧版权盒子 --><div class="copyright"><img src="data:images/logo.png" alt=""><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#" class="app"> 下载 app</a></div><!-- 右侧链接盒子 --><div class="links"><dl><dt>关于学成网</dt><dd><a href="#">关于</a></dd><dd><a href="#">管理团队</a></dd><dd><a href="#">工作机会</a></dd><dd><a href="#">客户服务</a></dd><dd><a href="#">帮助</a></dd></dl><dl><dt>新手指南</dt><dd><a href="#">如何注册</a></dd><dd><a href="#">如何选课</a></dd><dd><a href="#">如何拿到毕业证</a></dd><dd><a href="#">学分是什么</a></dd><dd><a href="#">考试未通过怎么办</a></dd></dl><dl><dt>合作伙伴</dt><dd><a href="#">合作机构</a></dd><dd><a href="#">合作导师</a></dd></dl></div></div></div><!-- 底部盒子模块 - 结束 -->

完整代码 :

<!DOCTYPE html>
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>课程网站</title><link rel="stylesheet" href="style.css">
</head>
<body><!-- 头部模块 - 开始 --><div class="header w"><!-- 1. 最左侧的 logo 标题 --><div class="logo"><!-- 图片 --><img src="data:images/logo.png" alt=""></div><!-- 2. 导航栏盒子 - 使用无序列表实现 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 3. 搜索栏盒子 --><div class="search"><!-- 文本输入框表单 --><input type="text" value="输入关键词"><button></button></div><!-- 4. 用户栏盒子 --><div class="user"><div class="user-img"><img src="data:images/head_icon.png" alt=""></div><div class="user-name">用户1</div></div></div><!-- 头部模块 - 结束 --><!-- Banner 模块 - 开始 --><div class="banner"><!-- 版心模块 --><div class="w"><!-- 左侧 侧导航栏  --><div class="subnav"><!-- 无序列表 --><ul><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">后端开发 <span>></span></a></li><li><a href="#">移动开发 <span>></span></a></li><li><a href="#">人工智能 <span>></span></a></li><li><a href="#">商业预测 <span>></span></a></li><li><a href="#">云计算&大数据 <span>></span></a></li><li><a href="#">运维&从测试 <span>></span></a></li><li><a href="#">UI设计 <span>></span></a></li><li><a href="#">产品 <span>></span></a></li></ul></div><!-- 右侧 课程栏 --><div class="course"><!-- 顶部的标题 --><div class="course-hd">我的课程表</div><div class="course-bd"><!-- 中部的 列表 --><ul><li><span class=".span1">继续学习</span> <span class=".span2">程序语言设计</span><p>正在学习-使用对象</p></li><li><span class=".span1">继续学习</span> <span class=".span2">程序语言设计</span><p>正在学习-使用对象</p></li><li><span class=".span1">继续学习</span> <span class=".span2">程序语言设计</span><p>正在学习-使用对象</p></li></ul><!-- 底部的 全部课程 按钮 --><a href="#" class="all">全部课程</a></div></div></div></div><!-- Banner 模块 - 结束 --><!-- 横向导航栏 模块 - 开始 --><div class="goods w"><h3> 精品推荐 </h3><div class="goods-item">|  <a href="#">jQuery</a>|  <a href="#">Spark</a>|  <a href="#">MySQL</a>|  <a href="#">JavaWeb</a>|  <a href="#">MySQL</a>|  <a href="#">JavaWeb</a></div><div class="mod"> 修改兴趣 </div>                                                                </div><!-- 横向导航栏 模块 - 结束 --><!-- 网格商品展示模块 - 开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><!-- 此地方一定要清除浮动，务必务必务必 --><div class="box-bd clearfix"><ul><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1200人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li></ul></div></div><!-- 网格商品展示模块 - 结束 --><!-- 底部盒子模块 - 开始 --><div class="footer"><!-- 版心内容 --><div class="w"><!-- 左侧版权盒子 --><div class="copyright"><img src="data:images/logo.png" alt=""><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#" class="app"> 下载 app</a></div><!-- 右侧链接盒子 --><div class="links"><dl><dt>关于学成网</dt><dd><a href="#">关于</a></dd><dd><a href="#">管理团队</a></dd><dd><a href="#">工作机会</a></dd><dd><a href="#">客户服务</a></dd><dd><a href="#">帮助</a></dd></dl><dl><dt>新手指南</dt><dd><a href="#">如何注册</a></dd><dd><a href="#">如何选课</a></dd><dd><a href="#">如何拿到毕业证</a></dd><dd><a href="#">学分是什么</a></dd><dd><a href="#">考试未通过怎么办</a></dd></dl><dl><dt>合作伙伴</dt><dd><a href="#">合作机构</a></dd><dd><a href="#">合作导师</a></dd></dl></div></div></div><!-- 底部盒子模块 - 结束 --></body>
</html>

2、CSS 样式