第6章 CSS的盒模型
习题解答
编程题
1. 使用图文混排技术制作如图 6-47 所示的书城页面。
这道题考查的是 float 浮动实现图文混排。仔细观察截图可以看到：页面有一个大标题"求知书城简介"，然后正文部分有两张图片分别浮动在左侧和右侧，文字环绕图片流动。底部还有一段不带图片的纯文字段落。
核心思路：
- 图片使用
float: left或float: right，让文字自动环绕图片 - 用 margin 控制图片与文字之间的间距
- 最后一段用
clear: both清除浮动
完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>求知网上书城简介</title>
<style type="text/css">
* { margin: 0; padding: 0; }
body { font-family: "Microsoft YaHei", sans-serif; background: #fff; }
.container {
width: 540px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
}
h2 {
font-size: 18px;
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 2px solid #333;
}
.img-left {
float: left; /* 图片左浮动 */
width: 120px;
height: 100px;
background: #a0a0a0; /* 占位色块代替图片 */
margin: 5px 15px 10px 0; /* 上 右 下 左 */
}
.img-right {
float: right; /* 图片右浮动 */
width: 120px;
height: 100px;
background: #888; /* 占位色块代替图片 */
margin: 5px 0 10px 15px;
}
p {
font-size: 14px;
line-height: 1.8;
text-indent: 2em; /* 首行缩进 */
margin-bottom: 12px;
}
.clear { clear: both; } /* 清除浮动 */
</style>
</head>
<body>
<div class="container">
<h2>求知书城简介</h2>
<!-- 第一段：图片左浮动，文字环绕右侧 -->
<div class="img-left"></div>
<p>求知网上书城是综合性中文网上购物商城，
由多家国内著名出版机构和求知创业基金共同投资成立。
求知网上书城在库图书近60万种，注册用户遍及全国32个省、
市、自治区和直辖市，每天有上万人在书城浏览购物。</p>
<div class="clear"></div>
<!-- 第二段：图片右浮动，文字环绕左侧 -->
<div class="img-right"></div>
<p>求知网上书城自开业三年来，一直与国内外
五百家出版社、近千家发行单位保持着良好的合作关系，
以其集文化传播、艺术鉴赏、休闲为一体的新新经营方式，
一流的购书环境及优质的服务，赢得了众多的赞誉，
成为河南省最大的图书、音像制品、文化用品于一体的图书零售企业。</p>
<div class="clear"></div>
<!-- 第三段：纯文字，无图片 -->
<p>书城连续三年获得"讲信誉、重服务"单位的光荣称号。
书城不仅是出版发行部门开拓图书市场、开辟货源渠道的驿站，
更是广大读者朋友读书、选书、购书的最佳场所，
是读者走向知识经济新时代的桥梁和纽带。</p>
</div>
</body>
</html>代码要点说明：
float: left让图片脱离文档流向左浮动，后面的文字自动环绕在图片右侧 -- 这就是"图文混排"的核心float: right同理，图片浮动到右边，文字环绕左侧clear: both用来清除浮动，让下面的内容不再受浮动影响，回到正常文档流margin控制图片与环绕文字之间的间距，避免文字紧贴图片- 这里用灰色色块
background: #a0a0a0代替实际图片，实际使用时换成<img>标签即可
参见 6.3.2 CSS浮动属性float、6.3.3 清除浮动属性clear
2. 使用盒模型技术制作如图 6-48 所示的抽象艺术页面。
这道题考查的是 盒模型综合运用：padding、margin、border、背景色、box-shadow 等属性配合使用，打造一个有设计感的艺术页面。观察截图可以看到：深灰色背景上有一个浅灰色内容区，顶部有英文艺术标题 "The Art Gallery"，左侧有一张抽象拼图图片，右侧是文字介绍。
完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>艺术殿堂</title>
<style type="text/css">
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #555; /* 深灰色背景 */
font-family: "Microsoft YaHei", serif;
}
.page {
width: 780px;
margin: 30px auto;
background: #d0d0d0; /* 浅灰色内容区背景 */
border: 1px solid #999;
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
padding: 30px 40px;
}
.header {
text-align: center;
margin-bottom: 25px;
border-bottom: 1px solid #999;
padding-bottom: 15px;
}
.header h1 {
font-family: Georgia, "Times New Roman", serif;
font-size: 28px;
color: #333;
letter-spacing: 3px;
}
.header p {
font-size: 13px;
color: #666;
margin-top: 4px;
}
.content { overflow: hidden; /* 清除浮动 */ }
.art-img {
float: left;
width: 240px;
height: 260px;
background: #a8a8a8; /* 占位色块代替抽象拼图图片 */
margin-right: 25px;
border-radius: 4px;
}
.art-text h2 {
font-size: 18px;
margin-bottom: 10px;
color: #333;
}
.art-text p {
font-size: 14px;
line-height: 1.9;
color: #444;
text-indent: 2em;
}
</style>
</head>
<body>
<div class="page">
<div class="header">
<h1>The <span style="font-size:36px;">Art</span> Gallery</h1>
<p>艺术的天堂</p>
</div>
<div class="content">
<div class="art-img"></div>
<div class="art-text">
<h2>抽象艺术</h2>
<p>抽象艺术指艺术形象较大程度偏离或完全
抛弃自然对象外观的艺术。抽象艺术一般被认为是一种
不描述自然世界的艺术，它透过形状和颜色，以主观方式
来表达。抽象艺术的特点是尝试打破绘画必须模仿自然的
传统观念。风格独特且极具视觉冲击力，
充满了想象力和创造力。</p>
</div>
</div>
</div>
</body>
</html>代码要点说明：
box-shadow给整个页面容器添加阴影，营造立体感- 图片区域用
float: left浮动，文字自然排列在右侧 - 父容器
overflow: hidden是清除子元素浮动的一种常用技巧，让容器能正确包裹浮动子元素 box-sizing: border-box让 padding 和 border 包含在 width 内，方便计算盒子总尺寸
参见 6.1 CSS盒模型的组成和大小、6.2.5 盒模型的阴影属性box-shadow、6.3.2 CSS浮动属性float
3. 制作三行两列宽度固定布局。页面效果如图 6-49 所示。
这道题考查的是 经典三行两列固定宽度布局。观察截图：页面由上到下分为 Header、中间内容区（左侧 mainBox + 右侧 SideBox）、Footer 三行。中间两列使用 float 实现左右并排。每个区域都有边框装饰（螺旋纹理边框效果），内容区有图片和文字。
完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>经典的两列布局——三行两列宽度固定</title>
<style type="text/css">
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "Microsoft YaHei", sans-serif;
background: #e8e8e8;
font-size: 14px;
}
.wrapper {
width: 800px;
margin: 10px auto;
}
/* === Header === */
.header {
background: #f0f0f0;
border: 3px solid #999;
padding: 15px 20px;
margin-bottom: 8px;
}
.header h2 { font-size: 20px; color: #333; }
.header .more {
float: right;
font-size: 12px;
color: #666;
}
/* === 中间内容区 === */
.middle { overflow: hidden; margin-bottom: 8px; }
.main-box {
float: left; /* 左浮动 */
width: 520px; /* 主内容区宽度 */
background: #f5f5f5;
border: 3px solid #999;
padding: 15px 20px;
}
.side-box {
float: right; /* 右浮动 */
width: 268px; /* 侧边栏宽度 */
background: #f5f5f5;
border: 3px solid #999;
padding: 15px 20px;
}
.main-box h3, .side-box h3 {
font-size: 16px;
margin-bottom: 10px;
}
.box-img {
width: 80px;
height: 80px;
background: #bbb; /* 占位色块 */
float: right;
margin: 0 0 10px 10px;
border-radius: 4px;
}
.main-box p, .side-box p {
line-height: 1.8;
text-indent: 2em;
margin-bottom: 8px;
}
.more-link {
display: block;
text-align: right;
font-size: 12px;
color: #666;
}
/* === Footer === */
.footer {
background: #f0f0f0;
border: 3px solid #999;
padding: 15px 20px;
clear: both; /* 清除浮动 */
}
.footer h3 { font-size: 16px; margin-bottom: 8px; }
.footer p { line-height: 1.8; text-indent: 2em; }
</style>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div class="header">
<h2>Header</h2>
<span class="more">查看详细信息>></span>
</div>
<!-- 中间两列 -->
<div class="middle">
<div class="main-box">
<h3>mainBox</h3>
<div class="box-img"></div>
<p>对于一个网页设计者来说，HTML语言一定不会感到陌生，
因为它是所有网页制作的基础。但是如果希望网页能够美观、
大方，并且升级方便，维护轻松，那么仅仅HTML是不够的。
CSS在这中间扮演着重要的角色，本课从CSS的基本概念出发，
介绍CSS语言的特点，以及如何在网页中引入CSS，
并对CSS进行初步的体验。</p>
<p>对于一个网页设计者来说，HTML语言一定不会感到陌生，
因为它是所有网页制作的基础。但是如果希望网页能够美观、
大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，
CSS在这中间扮演着重要的角色。</p>
<span class="more-link">查看详细信息>></span>
</div>
<div class="side-box">
<h3>SideBox</h3>
<div class="box-img"></div>
<p>对于一个网页设计者来说，HTML语言一定不会感到陌生，
因为它是所有网页制作的基础。但是如果希望网页能够美观、
大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，
CSS在这中间扮演着重要的角色。</p>
<p>但是如果希望网页能够美观、大方，
并且升级方便，维护轻松，那么仅仅HTML是不够的，
CSS在这中间扮演着重要的角色。</p>
<span class="more-link">查看详细信息>></span>
</div>
</div>
<!-- Footer -->
<div class="footer">
<h3>Footer</h3>
<p>这是一行文本，这里作为样例，显示在布局框中。</p>
<span class="more-link">查看详细信息>></span>
</div>
</div>
</body>
</html>代码要点说明：
- 三行两列布局的关键：Header 和 Footer 各占一整行，中间内容区用
float: left+float: right实现两列并排 .main-box宽 520px 左浮动，.side-box宽 268px 右浮动，两者宽度之和加上间距不超过容器 800px- Footer 使用
clear: both清除上面的浮动，确保它出现在两列下方 - 小图片同样用
float: right实现图文混排效果
参见 6.6.2 CSS布局样式 - 两栏布局样式、6.3.2 CSS浮动属性float
4. 制作三行三列宽度固定布局。页面效果如图 6-50 所示。
这道题是上一题的升级版，把两列扩展为 三列布局。观察截图：中间内容区有三列 -- 左侧 SubsideBox、中间 mainBox、右侧 SideBox。三列都使用浮动实现横向排列。
完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>经典的三列布局——三行三列宽度固定</title>
<style type="text/css">
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "Microsoft YaHei", sans-serif;
background: #e8e8e8;
font-size: 14px;
}
.wrapper {
width: 820px;
margin: 10px auto;
}
.header, .footer {
background: #f0f0f0;
border: 3px solid #999;
padding: 15px 20px;
margin-bottom: 8px;
overflow: hidden;
}
.header h2, .footer h3 {
float: left;
font-size: 18px;
}
.more {
float: right;
font-size: 12px;
color: #666;
line-height: 28px;
}
/* === 三列区域 === */
.middle {
overflow: hidden; /* 包裹浮动子元素 */
margin-bottom: 8px;
}
.sub-side {
float: left;
width: 170px; /* 左侧栏 */
background: #f5f5f5;
border: 3px solid #999;
padding: 12px 15px;
margin-right: 8px;
}
.main-box {
float: left;
width: 380px; /* 中间主内容 */
background: #f5f5f5;
border: 3px solid #999;
padding: 12px 15px;
margin-right: 8px;
}
.side-box {
float: left;
width: 240px; /* 右侧栏 */
background: #f5f5f5;
border: 3px solid #999;
padding: 12px 15px;
}
.col h3 { font-size: 15px; margin-bottom: 8px; }
.col-img {
width: 70px; height: 70px;
background: #bbb;
float: right;
margin: 0 0 8px 8px;
border-radius: 4px;
}
.col p {
line-height: 1.8;
text-indent: 2em;
margin-bottom: 6px;
font-size: 13px;
}
.col .more-link {
display: block;
text-align: right;
font-size: 12px;
color: #666;
}
.footer { clear: both; }
.footer p { line-height: 1.8; text-indent: 2em; }
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h2>Header</h2>
<span class="more">查看详细信息>></span>
</div>
<div class="middle">
<div class="sub-side col">
<h3>SubsideBox</h3>
<p>对于一个网页设计者来说，HTML语言一定不会感到陌生，
因为它是所有网页制作的基础。</p>
<span class="more-link">查看详细信息>></span>
</div>
<div class="main-box col">
<h3>mainBox</h3>
<div class="col-img"></div>
<p>对于一个网页设计者来说，HTML语言一定不会感到陌生，
因为它是所有网页制作的基础。但是如果希望网页能够美观、
大方，并且升级方便，维护轻松，那么仅仅HTML是不够的。
CSS在这中间扮演着重要的角色，本课从CSS的基本概念出发，
介绍CSS语言的特点。</p>
<span class="more-link">查看详细信息>></span>
</div>
<div class="side-box col">
<h3>SideBox</h3>
<p>对于一个网页设计者来说，HTML语言一定不会感到陌生，
因为它是所有网页制作的基础。</p>
<span class="more-link">查看详细信息>></span>
</div>
</div>
<div class="footer">
<h3>Footer</h3>
<p>这是一行文本，这里作为样例，显示在布局框中。</p>
<span class="more">查看详细信息>></span>
</div>
</div>
</body>
</html>代码要点说明：
- 三列全部使用
float: left，按 HTML 书写顺序从左到右排列 - 三列宽度之和（170 + 380 + 240 = 790px）加上 margin 和 border 不超过容器宽度 820px
- 使用
box-sizing: border-box后，border 和 padding 都包含在 width 内，计算更简单 - 与两列布局相比，三列布局只是多加了一列，核心思路完全一样
参见 6.6.2 CSS布局样式 - 三栏布局样式
5. 使用 Div+CSS 布局制作"电脑学堂"页面，如图 6-51 所示。
这道题是一个 综合性的企业/门户网站页面。观察截图可以分析出页面结构：顶部右上角有"设为首页|加入收藏"链接；Logo 区域有"电脑学堂 Crown School"字样；导航栏（深色背景+白色文字）；主内容区左侧有"学堂区"文章列表，中间有"学堂特色"图文介绍，右侧有"学堂宗旨"说明；下方有图标按钮区和底部版权信息。
完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>电脑学堂</title>
<style type="text/css">
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei", sans-serif; background: #f0f0f0; }
a { text-decoration: none; color: #333; }
.wrapper { width: 960px; margin: 0 auto; }
/* 顶部工具栏 */
.top-bar {
text-align: right;
padding: 8px 0;
font-size: 12px;
color: #666;
}
.top-bar a { color: #666; margin: 0 5px; }
/* Logo区域 */
.logo-area {
padding: 15px 0;
overflow: hidden;
}
.logo-area h1 { font-size: 28px; float: left; }
.logo-area .slogan {
float: left;
font-size: 14px;
color: #888;
font-style: italic;
margin-left: 15px;
line-height: 40px;
}
/* 导航栏 */
.nav {
background: #555;
border-radius: 5px;
padding: 0 10px;
overflow: hidden;
}
.nav a {
display: inline-block;
color: #fff;
padding: 10px 18px;
font-size: 14px;
}
.nav a:hover { background: #777; }
/* 主内容区 */
.main-content {
overflow: hidden;
margin-top: 15px;
min-height: 300px;
}
/* 左侧：学堂区 */
.left-col {
float: left;
width: 300px;
}
.section-title-bar {
background: #eee;
padding: 6px 12px;
font-size: 14px;
border-bottom: 2px solid #ccc;
margin-bottom: 10px;
}
.article-list { list-style: none; padding: 0 10px; }
.article-list li {
padding: 4px 0;
font-size: 13px;
border-bottom: 1px dotted #ddd;
overflow: hidden;
}
.article-list li span {
float: right;
color: #999;
font-size: 12px;
}
/* 中间：学堂特色 */
.center-col {
float: left;
width: 340px;
padding: 0 20px;
text-align: center;
}
.feature-img {
width: 160px;
height: 120px;
background: #c0c0c0; /* 占位色块 */
margin: 10px auto;
border-radius: 8px;
}
.feature-text {
font-size: 18px;
color: #555;
margin: 8px 0;
}
.feature-sub {
font-size: 14px;
color: #888;
}
/* 右侧：学堂宗旨 */
.right-col {
float: right;
width: 300px;
border: 1px solid #ccc;
border-radius: 8px;
padding: 15px;
}
.right-col h3 {
font-size: 16px;
margin-bottom: 10px;
color: #333;
}
.right-col p {
font-size: 13px;
line-height: 1.8;
text-indent: 2em;
color: #555;
}
/* 图标按钮区 */
.icon-bar {
clear: both;
padding: 20px 0;
overflow: hidden;
}
.icon-item {
float: left;
width: 160px;
text-align: center;
}
.icon-circle {
width: 60px;
height: 60px;
background: #bbb; /* 占位色块 */
border-radius: 50%;
margin: 0 auto 6px;
}
.icon-item p { font-size: 12px; color: #666; }
/* 底部版权 */
.footer {
clear: both;
text-align: center;
padding: 15px 0;
border-top: 2px solid #ccc;
font-size: 12px;
color: #888;
line-height: 1.8;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="top-bar">
<a href="#">设为首页</a> | <a href="#">加入收藏</a>
</div>
<div class="logo-area">
<h1>电脑学堂</h1>
<span class="slogan">Crown School</span>
</div>
<div class="nav">
<a href="#">商城首页</a>
<a href="#">网购学堂</a>
<a href="#">购物指南</a>
<a href="#">经验交流</a>
<a href="#">支付选择</a>
<a href="#">维修常识</a>
<a href="#">安全网购</a>
<a href="#">学堂活动</a>
</div>
<div class="main-content">
<div class="left-col">
<div class="section-title-bar">学堂区</div>
<ul class="article-list">
<li>电脑商城个人网店申请注册指南 <span>2012-6-10</span></li>
<li>云计算的发展趋势与未来前景 <span>2012-5-22</span></li>
<li>SAAS组件化网店服务最新动态 <span>2012-4-15</span></li>
<li>网店后台管理维护视频教程 <span>2012-4-10</span></li>
<li>商务网站发展的瓶颈与机遇 <span>2012-3-20</span></li>
</ul>
</div>
<div class="center-col">
<div class="feature-img"></div>
<p class="feature-text">学堂特色</p>
<p class="feature-sub">集思广益<br/>寓教于乐</p>
</div>
<div class="right-col">
<h3>学堂宗旨</h3>
<p>在电脑学堂，您可以分享网络购物的经验和乐趣。
同时，您也能结交到来自四面八方的朋友。学堂将为您提供
一个自由宽松的学习交流环境，还会经常组织各种活动丰富
大家的业余生活。我们秉承"没有最好，只有更好"的服务理念，
为客户提供一流的服务，让您足不出户便知天下事。</p>
</div>
</div>
<div class="icon-bar">
<div class="icon-item">
<div class="icon-circle"></div>
<p>资讯中心</p>
</div>
<div class="icon-item">
<div class="icon-circle"></div>
<p>资源交流</p>
</div>
<div class="icon-item">
<div class="icon-circle"></div>
<p>视频教程</p>
</div>
<div class="icon-item">
<div class="icon-circle"></div>
<p>作品展示</p>
</div>
<div class="icon-item">
<div class="icon-circle"></div>
<p>学堂互动</p>
<p style="font-size:11px;color:#999">COMMUNICATION</p>
</div>
<div class="icon-item">
<div class="icon-circle"></div>
<p>商城加盟</p>
<p style="font-size:11px;color:#999">DECLARATION FORM</p>
</div>
</div>
<div class="footer">
<p>地址：浙江省杭州市电脑商城客户服务部 邮编：310002</p>
<p>Email: gykf@126.com</p>
<p>Copyright © 2018 电脑工作室 All Rights Reserved</p>
</div>
</div>
</body>
</html>代码要点说明：
- 这是一个较为完整的门户页面，使用 三列浮动布局：左栏 300px、中栏 340px、右栏 300px
- 导航栏用
display: inline-block或直接对<a>设 padding 实现水平导航 - 文章列表中日期用
float: right让日期靠右显示 - 图标按钮区每个图标用
float: left等宽排列，配合border-radius: 50%做圆形图标
参见 6.6 CSS基本布局样式、6.3.2 CSS浮动属性float、6.2.4 圆角边框属性border-radius
6. 使用 Div+CSS 布局制作"美食之家"页面，如图 6-52 所示。
这道题要求制作一个 美食主题的页面。观察截图可分析：顶部有 Logo "TEA & MEAL" 和右上角的花卉装饰图案；下面是深色导航栏；主内容区标题"推荐套餐"下方是四列美食图片+文字介绍；底部有版权信息。
完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>美食</title>
<style type="text/css">
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei", sans-serif; background: #fff; }
a { text-decoration: none; color: #fff; }
.wrapper { width: 900px; margin: 0 auto; }
/* Logo 区域 */
.header {
padding: 20px 0;
position: relative;
border-bottom: 1px solid #ddd;
}
.header h1 {
font-family: Georgia, serif;
font-size: 32px;
color: #333;
}
.header .tagline {
font-size: 11px;
color: #888;
letter-spacing: 2px;
}
/* 右上角装饰 */
.header .decor {
position: absolute;
top: 0; right: 0;
width: 180px; height: 80px;
background: #c0c0c0; /* 占位色块代替花卉装饰 */
border-radius: 0 0 0 40px;
}
/* 导航栏 */
.nav {
background: #444;
padding: 0;
overflow: hidden;
}
.nav a {
display: inline-block;
padding: 10px 20px;
font-size: 13px;
}
.nav a:first-child { background: #c0392b; }
.nav a:hover { background: #666; }
/* 推荐套餐区 */
.recommend {
padding: 20px 0;
}
.recommend h2 {
font-size: 18px;
margin-bottom: 15px;
padding-left: 10px;
border-left: 4px solid #333;
}
.food-list {
overflow: hidden; /* 清除浮动 */
}
.food-item {
float: left;
width: 212px;
margin-right: 16px;
margin-bottom: 15px;
}
.food-item:last-child { margin-right: 0; }
.food-img {
width: 100%;
height: 140px;
background: #aaa; /* 占位色块代替美食图片 */
margin-bottom: 8px;
border-radius: 4px;
}
.food-item h3 {
font-size: 14px;
margin-bottom: 5px;
color: #333;
}
.food-item p {
font-size: 12px;
color: #666;
line-height: 1.6;
}
/* 底部 */
.footer {
clear: both;
text-align: center;
padding: 15px 0;
border-top: 2px solid #444;
font-size: 12px;
color: #888;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>TEA & MEAL</h1>
<p class="tagline">TASTE THE BEST MEAL WITH THE BEST TEA.</p>
<div class="decor"></div>
</div>
<div class="nav">
<a href="#">首页</a>
<a href="#">茶叶</a>
<a href="#">烘焙</a>
<a href="#">美食</a>
<a href="#">公司</a>
<a href="#">联系</a>
</div>
<div class="recommend">
<h2>推荐套餐</h2>
<div class="food-list">
<div class="food-item">
<div class="food-img"></div>
<h3>西湖牛肉</h3>
<p>它是传统名品，原产地是杭州市周围，
深受食客喜爱的美味佳肴。</p>
</div>
<div class="food-item">
<div class="food-img"></div>
<h3>翡翠包汤</h3>
<p>极有地方特色，是一道不可多得的经典美食，
清鲜可口回味无穷。</p>
</div>
<div class="food-item">
<div class="food-img"></div>
<h3>绿蔬清草</h3>
<p>新鲜、爽口，尤其适合夏季食用，
营养丰富，清凉爽口。</p>
</div>
<div class="food-item">
<div class="food-img"></div>
<h3>封坛</h3>
<p>酒香、肉香融为一体，
口感独特令人难忘。</p>
</div>
</div>
</div>
<div class="footer">
Copyright © 2018 美食之家 | Designed by 创意天下
</div>
</div>
</body>
</html>代码要点说明：
- 四列美食卡片使用
float: left横向排列，每张卡片宽 212px，加上 margin 间距正好填满 900px 容器 - 右上角装饰用
position: absolute定位到右上角 - 导航栏第一个按钮用不同背景色（红色）表示当前选中状态
- 这种"卡片式布局"是非常常见的商品/内容展示方式
参见 6.6 CSS基本布局样式、6.4.2 定位方式属性position
7. 整合社区网中心内容的 4 个板块，如图 6-53 所示。
这道题要求制作一个 社区网的中心内容区域，包含 4 个板块。观察截图可以看到：页面顶部有横幅标语"法治为魂 依法治用 学法用法"；下面分成左右两大列，每列各有两个板块（热点关注、精选信息、社区服务、社区生活），每个板块有标题栏和列表内容，列表项右侧有日期。
完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style type="text/css">
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "Microsoft YaHei", sans-serif;
background: #f0f0f0;
font-size: 13px;
}
a { text-decoration: none; color: #333; }
.wrapper { width: 860px; margin: 10px auto; }
/* 顶部横幅 */
.banner {
background: #444;
color: #fff;
text-align: center;
padding: 15px 0;
font-size: 22px;
letter-spacing: 8px;
border: 3px solid #333;
margin-bottom: 10px;
}
/* 两列容器 */
.content { overflow: hidden; }
.col-left {
float: left;
width: 425px;
}
.col-right {
float: right;
width: 425px;
}
/* 板块通用样式 */
.panel {
background: #fff;
border: 1px solid #ddd;
margin-bottom: 10px;
}
.panel-header {
background: #555;
color: #fff;
padding: 6px 12px;
font-size: 14px;
font-weight: bold;
overflow: hidden;
}
.panel-header .more {
float: right;
font-size: 12px;
color: #ccc;
}
.panel-body { padding: 8px 12px; }
/* 带图片的板块 */
.panel-img {
float: left;
width: 120px;
height: 90px;
background: #bbb; /* 占位色块 */
margin-right: 10px;
margin-bottom: 5px;
}
.panel-intro p {
line-height: 1.6;
margin-bottom: 4px;
}
/* 列表 */
.news-list { list-style: none; }
.news-list li {
padding: 4px 0;
border-bottom: 1px dotted #e0e0e0;
overflow: hidden;
line-height: 1.8;
}
.news-list li:last-child { border-bottom: none; }
.news-list li span {
float: right;
color: #999;
font-size: 12px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="banner">法治为魂 依法治用 学法用法</div>
<div class="content">
<!-- 左列 -->
<div class="col-left">
<!-- 热点关注 -->
<div class="panel">
<div class="panel-header">
热点关注
<span class="more">more>></span>
</div>
<div class="panel-body">
<div class="panel-img"></div>
<div class="panel-intro">
<p><strong>今日新生报到开学</strong></p>
<p>今天对学生来说，是重要的一天，2020年9月1日新生报到开学。
学生们穿着校服，背着书包高高兴兴到学校……</p>
</div>
<div style="clear:both"></div>
<ul class="news-list">
<li>2020年9月1日新生报到开学1 <span>2020-09-01</span></li>
<li>2020年9月1日新生报到开学2 <span>2020-09-01</span></li>
<li>2020年9月1日新生报到开学3 <span>2020-09-01</span></li>
<li>2020年9月1日新生报到开学4 <span>2020-09-01</span></li>
</ul>
</div>
</div>
<!-- 社区服务 -->
<div class="panel">
<div class="panel-header">
社区服务
<span class="more">more>></span>
</div>
<div class="panel-body">
<ul class="news-list">
<li>1多社区治山免费辅导班，检测汉语<span>2020-05-14</span></li>
<li>2多社区治山免费辅导班，检测汉语<span>2020-05-14</span></li>
<li>3多社区治山免费辅导班，检测汉语<span>2020-05-14</span></li>
<li>4多社区治山免费辅导班，检测汉语<span>2020-05-14</span></li>
<li>5多社区治山免费辅导班，检测汉语<span>2020-05-14</span></li>
<li>6多社区治山免费辅导班，检测汉语<span>2020-05-14</span></li>
<li>7多社区治山免费辅导班，检测汉语<span>2020-05-14</span></li>
</ul>
</div>
</div>
</div>
<!-- 右列 -->
<div class="col-right">
<!-- 精选信息 -->
<div class="panel">
<div class="panel-header">
精选信息
<span class="more">more>></span>
</div>
<div class="panel-body">
<ul class="news-list">
<li>1在这边因缘每到最新金蝉的新闻都在此<span>2020-08-23</span></li>
<li>2在这边因缘每到最新金蝉的新闻都在此<span>2020-08-23</span></li>
<li>3在这边因缘每到最新金蝉的新闻都在此<span>2020-08-23</span></li>
<li>4在这边因缘每到最新金蝉的新闻都在此<span>2020-08-23</span></li>
<li>5在这边因缘每到最新金蝉的新闻都在此<span>2020-08-23</span></li>
<li>6在这边因缘每到最新金蝉的新闻都在此<span>2020-08-23</span></li>
</ul>
</div>
</div>
<!-- 社区生活 -->
<div class="panel">
<div class="panel-header">
社区生活
<span class="more">more>></span>
</div>
<div class="panel-body">
<ul class="news-list">
<li>1孩子们过期教育活动安全系列<span>2020-12-10</span></li>
<li>2孩子们过期教育活动安全系列<span>2020-12-10</span></li>
<li>3孩子们过期教育活动安全系列<span>2020-12-10</span></li>
<li>4孩子们过期教育活动安全系列<span>2020-12-10</span></li>
<li>5孩子们过期教育活动安全系列<span>2020-12-10</span></li>
<li>6孩子们过期教育活动安全系列<span>2020-12-10</span></li>
<li>7孩子们过期教育活动安全系列<span>2020-12-10</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>代码要点说明：
- 整体采用 两列浮动布局，左右各 425px，总宽 860px
- 每个板块（panel）结构统一：深色标题栏 + 白色内容区，这种"模块化"设计让代码很好维护
- "热点关注"板块内部又用了 float 做图文混排（图片左浮动 + 文字在右）
- 列表项日期用
float: right靠右对齐，标题自然在左侧
参见 6.7 实训——制作社区网网页
8. 整合社区网新闻、通告和登录 3 个板块，如图 6-54 所示。
这道题是社区网的另一个区域，包含 3 个板块：左侧上方是"新闻图片"轮播区（大图+标题），左侧下方是"通知公告"列表，右侧是"登录"区域（含用户名密码输入框）和一些快捷链接。整体也是左右两列布局。
完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>板块</title>
<style type="text/css">
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "Microsoft YaHei", sans-serif;
background: #f0f0f0;
font-size: 13px;
}
a { text-decoration: none; color: #333; }
.wrapper { width: 750px; margin: 15px auto; overflow: hidden; }
/* === 左列 === */
.left-col {
float: left;
width: 480px;
}
/* 新闻图片区 */
.news-pic {
background: #fff;
border: 1px solid #ddd;
margin-bottom: 10px;
}
.news-pic-header {
background: #555;
color: #fff;
padding: 6px 12px;
font-weight: bold;
}
.news-banner {
width: 100%;
height: 200px;
background: #a0b0a0; /* 占位色块代替风景图 */
position: relative;
}
.news-banner .caption {
position: absolute;
bottom: 0; left: 0; right: 0;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 6px 12px;
font-size: 13px;
}
/* 通知公告 */
.notice {
background: #fff;
border: 1px solid #ddd;
}
.notice-header {
background: #555;
color: #fff;
padding: 6px 12px;
font-weight: bold;
}
.notice-body { padding: 8px 12px; }
.notice-list { list-style: none; }
.notice-list li {
padding: 4px 0;
border-bottom: 1px dotted #e0e0e0;
overflow: hidden;
line-height: 1.8;
}
.notice-list li:last-child { border-bottom: none; }
.notice-list li span {
float: right;
color: #999;
font-size: 12px;
}
/* === 右列 === */
.right-col {
float: right;
width: 255px;
}
/* 登录区 */
.login-box {
background: #fff;
border: 1px solid #ddd;
margin-bottom: 10px;
padding: 15px;
}
.login-box h3 {
font-size: 15px;
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 1px solid #eee;
}
.login-box label {
display: block;
font-size: 13px;
margin-bottom: 4px;
color: #555;
}
.login-box input[type="text"],
.login-box input[type="password"] {
width: 100%;
padding: 6px 8px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
font-size: 13px;
}
.login-box button {
width: 100%;
padding: 8px;
background: #555;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 14px;
}
.login-box button:hover { background: #333; }
/* 快捷链接 */
.quick-links {
background: #fff;
border: 1px solid #ddd;
padding: 12px 15px;
}
.quick-links h3 {
font-size: 14px;
margin-bottom: 8px;
}
.link-list { list-style: none; }
.link-list li {
padding: 3px 0;
font-size: 13px;
}
.link-list li a:hover { color: #0066cc; }
/* 右下角装饰 */
.decor-area {
margin-top: 10px;
width: 100%;
height: 120px;
background: #b8c8a8; /* 占位色块代替装饰图案 */
border-radius: 6px;
text-align: center;
line-height: 120px;
color: #fff;
font-size: 18px;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- 左列 -->
<div class="left-col">
<div class="news-pic">
<div class="news-pic-header">新闻图片</div>
<div class="news-banner">
<div class="caption">旅游旺季来临……</div>
</div>
</div>
<div class="notice">
<div class="notice-header">通知公告</div>
<div class="notice-body">
<ul class="notice-list">
<li>《关于进一步加强社区管理的通知》<span>2020-10-08</span></li>
<li>《社区环境卫生整治工作方案》<span>2020-10-05</span></li>
<li>《关于组织开展安全隐患排查的通知》<span>2020-09-28</span></li>
<li>《社区文化活动中心开放时间调整》<span>2020-09-20</span></li>
<li>《关于做好冬季消防安全工作的通知》<span>2020-09-15</span></li>
</ul>
</div>
</div>
</div>
<!-- 右列 -->
<div class="right-col">
<div class="login-box">
<h3>登录</h3>
<label>用户名</label>
<input type="text" placeholder="请输入用户名" />
<label>密码</label>
<input type="password" placeholder="请输入密码" />
<button>登 录</button>
</div>
<div class="quick-links">
<h3>快捷入口</h3>
<ul class="link-list">
<li><a href="#">百姓呼声</a></li>
<li><a href="#">登记献策</a></li>
<li><a href="#">代表言论</a></li>
</ul>
</div>
<div class="decor-area"></div>
</div>
</div>
</body>
</html>代码要点说明：
- 整体是 两列浮动布局：左列 480px 放新闻图片+通知公告，右列 255px 放登录框+快捷链接
- 新闻图片区域用
position: relative+position: absolute实现图片上的半透明文字覆盖层 - 登录表单用
input和button元素，宽度设为 100% 撑满容器 - 这种"新闻+登录"组合是门户/社区网站非常经典的布局模式
参见 6.7 实训——制作社区网网页、6.4 CSS盒子定位属性