【HTML/CSS/JavaScript】网页设计实验四（DIV+CSS 综合运用）

DIV+CSS 综合运用项目 1 应用外部样式表设计新闻页面项目 2 设计“匾牌设计”页面项目 3 设计《中国教育网络》杂志简介项目 4 设计《京东商品导购》页面项目 5 设计“文轩图书榜”页面项目 6 设计“巴城老街风景”页面+++点击资源索引【查看其它实验】+++项目 1 应用外部样式表设计新闻页面使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图 4-1所示：（1

阿斯卡码

22648人浏览 · 2021-11-12 11:48:28

阿斯卡码 · 2021-11-12 11:48:28 发布

+++点击资源索引【查看其它实验】+++

项目 1 应用外部样式表设计新闻页面

使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图 4-1
所示：
（1）文件名：prj_4_1.html。（2）页面标题：“新闻”。
（3）编写外部样式表文件，名称为：prj_4_1.css，采用链接外部样式表的方
法。
（4）加载图像文件名为 prj_4_1.jpg。（5）定义两个图层，最外层图层包含一个图像和一个子图层，在子图层内
采用无序列表显示四行文字。
（6）对“央视”“腾讯”“跨界融合开放共赢”三个词采用 span 标记定义
加粗样式。
（7）对“联建杯”定义斜体、加粗、大小 24px。样式如下：
.it{font-style:italic;font-size:24px;font-weight:bold;}
图 4-1 新闻效果图


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新闻</title>
<link type="text/css" rel="stylesheet" href="prj_4_1.css">
</head>

<body>
<div
>
<img src="img/prj_4_1.jpg">
<div>
<ul>
<li>2017<span class="span1">央视</span>节目发力 彰显大爱</li>
<li>继北京，上海，2017<span class="span1">腾讯</span>有着广州发力</li>
<li>"<span class="span1">跨界融合 开放共赢</span>"新型模式</li>
<li>对<span class="it">"联建杯"</span>户外LED圆满结束</li>
</ul>
</div>
</div>

</body>
</html>

项目 2 设计“匾牌设计”页面

使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图 4-2
所示：
（1）文件名：prj_4_2.html。
（2）页面标题：“匾牌设计”。
（3）页面内容为一个图层中嵌入一个段落，段落的内容“海纳百川有容乃
大”。（4）段落的样式为“斜体、特粗、70px 大小、行高 1.5 倍、隶书”。
（5）图层 div 的#div0 样式：“宽度 800px、高度 100px、边框宽度 20px、线
型 outset、颜色#ff0000、填充 20px、边距 100px”。
（6）页面所有内容居中显示（body 标记的样式）。
图 4-2 匾牌设计


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>匾牌设计</title>
<link type="text/css" rel="stylesheet" href="prj_4_2.css">
</head>

<body>
<div id="div0">
<p class="p1">海纳百川 有容乃大</p>
</div>
</body>
</html>

项目 3 设计《中国教育网络》杂志简介

使用 Dreamweaver 等软件综合运用 DIV+CSS 设计《中国教育网络》杂志简介
页面，完成后的效果如图 4-3 所示。
（1）文件名：prj_4_3.html。（2）页面标题：“《中国教育网络》杂志简介”。
（3）在头部插入 style 标记。
（4）在 body 标记中插入第 1 个 div，id 为 div0。采用导入外部样式表
layout_import.css 的方式来定义 div 的样式。导入外部样式表格式如下：

在 layout_import.css 中定义 div 的样式。格式定义如下：
#div0{border:1px solid #cccccc; width:850px; height:780px; margin:5px auto;} （5）在 id 为 div0 的图层中插入 4 个子图层，分别插入标题字、无序列表、
定义列表、段落等标记完成页面设计。具体定义如下所示：
○1 插入 class 为 div1 的 div，第 1 个子图层应用行内样式表。style 属性设置
如下：

图 4-3 《中国教育网络》杂志简介页面在第 1 个子 div 中插入 h2、h4 标记，内容分别为“《中国教育网络》杂志简介” “2016-03-03”。 ○2 插入 class 为 div2 的 div，第 2 个子图层应用内部样式表。格式如下所示： .div2{width:100%;background:#F0F0F0;height:120px;line-height:1.5em;padding:10px auto;} 在 div 中插入 h3 标记，内容为“>>推荐阅读”。然后插入 1 个 ul 标记，插入 6 个列表项，分别设置为超链接。列表项内容分别如下： COST 论坛"迎新"系列视频讲座、技术应用升级百所高校 IPv6 蝶变、教育信息化关注"十二五"规划、下一代互联网发展和应用论坛、教育信息化服务器应用突破壁垒、强调应用移动 IPv6 发展空间无限 ○3 插入 id 为 div3 的 div，第 3 个子 div 应用导入样式表。样式定义格式如下： #div3{padding-left:40px;font-size:14px;clear:both;} 在第 3 个子 div 中插入 3 个段落。内容分别如下所示： 2004 年 12 月，《中国教育网络》杂志正式出版发行。经国家新闻出版署、科技部批准，教育部主管，教育部科技发展中心主办，中国教育和科研计算机网(CERNET)承办的国家级权威科技期刊《中国教育网络》正式出版发行。立足教育网络，服务于教育信息化，《中国教育网络》关注和解读国家信息化发展政策，全面报道中国教育网络建设现状及成就，研究探讨教育网络建设的经验与问题。介绍国际上先进的网络技术、理念，及时报道相关政策及重大事件，广泛反映围绕教育信息化的各种重大应用及重大事件，为领导、专家、师生及技术人员提供借鉴。依托高校及社会各界的优秀专家，《中国教育网络》突出权威性、政策性、前瞻性，为专家及业界人士提供一个权威的交流与沟通平台。《中国教育网络》已成为中国最具影响力、权威性的专业期刊，已成为与中国教育信息化同步发展的核心媒体。 ○4 插入 id 为 div4 的 div，第 4 个子 div 应用链接外部样式表。格式如下所示：在外部样式 layout_link.css 定义#div4 样式。定义格式如下所示： #div4{width:100%;height:160px;margin:10px auto;padding-left:40px;} 在#div4 中分别插入 3 个 h3 标记，内容分别为“目标”“定位”“杂志优势”。然后插入 2 个定义列表。内容如下所示：

始终保持教育信息化领域第一品牌的市场地位

成为与中国教育信息化同步发展的核心媒体

中国教育网络领域的综合杂志

——全面反映教育网络研究、建设、管理及应用、文化、产业化的成就及重大事件。

受人尊敬的专业权威杂志

——依托政府、教育界、IT 产业界专家，专注于教育网络领域，制作高水准的内容。

创新 IT 媒体服务

——以创新、深入的视角报道教育信息化的进展和变化。

影响高端人士，成为教育信息化宣传队

——服务于教育网络的研究、建设与使用者，通过对高端人群的影响，确立自己作为教育信息化权威窗口地位。

在#div4 中最后插入若干个段落。段落的内容分别如下：强有力的政府指导在教育部及相关部门的指导下，及时准确地传达、贯彻教育信息化发展的方针、政策、法规等，保证中国教育网络健康发展，推动教育网络建设与应用。权威的专家队伍依托 CERNET 及教育信息化领域最权威的专家组成的编辑委员会，《中国教育网络》将为读者提供高水准的内容，为工作提供高起点的业务及技术指导。影响未来的用户群《中国教育网络》用户群以教育领域从事互联网建设及应用的领导、专家、教师、科研人员为主，在该领域具有强大的影响力。遍布全国的渠道依托各地方教委及 CERNET，《中国教育网络》将建设遍布全国的记者站，伴随教育网络的建设及拓展，中国教育网络在为读者服务的同时，也将不断壮大自己的渠道网络。 ○5 在头部 head 中插入 style 标记，在其中定义相关规则。格式如下所示： ○6 完成代码设计，在浏览器中查看网页，观看页面效果。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>《中国教育网络》杂志简介</title>

<style type="text/css">
@import url("layout_import.css");
*{font-size:14px;}
p{text-indent:2em;line-height:1.2em;}
.div2{width:100%;background:#F0F0F0;height:120px;line-height:1.5em;padding:10px auto;}
li{float:left;width:250px;margin:0px 5px;}
span{color:red;}
a:hover{text-decoration:underline;color:red;}
a:link,a:visited,a:active{text-decoration:none;color:black;}
h3,dt{padding-left:2em;}
</style>

</head>

<body>
<div id="div0">
<div class="div1" style="background:url(img/zw_logo.jpg) no-repeat top left; 
witdh:100%; height:80px;text-align:center; padding:10px auto;">
<h2>《中国教育网络》杂志简介</h2>
<h4>2016-03-03</h4>
</div>
<div class="div2">
<h2>>>推荐阅读</h2>
<ul>
<li>COST 论坛"迎新"系列视频讲座</li>
<li>技术应用升级 百所高校 IPv6 蝶变</li>
<li>教育信息化关注"十二五"规划</li>
<li>下一代互联网发展和应用论坛</li>
<li>教育信息化服务器应用突破壁</li>
<li>强调应用 移动 IPv6 发展空间无限</li>
</ul>
</div>
<div id="div3">
<p>
2004 年 12 月，《中国教育网络》杂志正式出版发行。经国家新闻出版署、科技部批准，教育部主管，
教育部科技发展中心主办，中国教育和科研计算机网(CERNET)承办的国家级权威科技期刊《中国教育网络》
正式出版发行。</p>
<p>
立足教育网络，服务于教育信息化，《中国教育网络》关注和解读国家信息化发展政策，全面报道中国
教育网络建设现状及成就，研究探讨教育网络建设的经验与问题。介绍国际上先进的网络技术、理念，及
时报道相关政策及重大事件，广泛反映围绕教育信息化的各种重大应用及重大事件，为领导、专家、师生
及技术人员提供借鉴。</p>
<p>
依托高校及社会各界的优秀专家，《中国教育网络》突出权威性、政策性、前瞻性，为专家及业界人士
提供一个权威的交流与沟通平台。《中国教育网络》已成为中国最具影响力、权威性的专业期刊，已成为与
中国教育信息化同步发展的核心媒体。
</p>
</div>
<div id="div4">
<link type="text/css" rel="stylesheet" href="layout_link.css"/>
<h2>目标</h2>
<dl>
<dd>始终保持教育信息化领域第一品牌的市场地位</dd>
<dd>成为与中国教育信息化同步发展的核心媒体</dd>
</dl>
<h2>定位</h2>
<dl>
<dt>中国教育网络领域的综合杂志</dt>
<dd>——全面反映教育网络研究、建设、管理及应用、文化、产业化的成就及重大事件。</dd>
<dt>受人尊敬的专业权威杂志</dt>
<dd>——依托政府、教育界、IT 产业界专家，专注于教育网络领域，制作高水准的内容。</dd>
<dt>创新 IT 媒体服务</dt>
<dd>——以创新、深入的视角报道教育信息化的进展和变化。</dd>
<dt>影响高端人士，成为教育信息化宣传队</dt>
<dd>——服务于教育网络的研究、建设与使用者，通过对高端人群的影响，确立自己作为教
育信息化权威窗口地位。</dd>
</dl>

<h2>杂志优势</h2>
<P>强有力的政府指导</P>
<P>在教育部及相关部门的指导下，及时准确地传达、贯彻教育信息化发展的方针、政策、法规等，保证
中国教育网络健康发展，推动教育网络建设与应用。</P>
<P>权威的专家队伍</P>
<P>依托 CERNET 及教育信息化领域最权威的专家组成的编辑委员会，《中国教育网络》将为读者提供高水
准的内容，为工作提供高起点的业务及技术指导。</P>
<P>影响未来的用户群</P>
<P>《中国教育网络》用户群以教育领域从事互联网建设及应用的领导、专家、教师、科研人员为主，在
该领域具有强大的影响力。</P>
<P>遍布全国的渠</P>
<p>依托各地方教委及 CERNET，《中国教育网络》将建设遍布全国的记者站，伴随教育网络的建设及拓展，
中国教育网络在为读者服务的同时，也将不断壮大自己的渠道网络。</p>
</div>
</div>
</body>
</html>

项目 4 设计《京东商品导购》页面

使用 Dreamweaver 等软件综合运用 DIV+CSS 设计京东商品导购页面。完成后
的效果如图 4-4-1 所示：
图 4-4-1 京东商品导购页面（1）页面结构分析：
整个页面由 7 个图层、1 个标题字、6 个图像超链接构成。外围的图层中包
含 6 个子图层，每个子图层中包含 1 个图像超链接。对页面中各个元素进行 CSS
属性设置，重点学会 margin、border、padding、content 等属性的综合设置。
（2）文件名：prj_4_4.html。（3）页面标题：“京东商品导购”。
（4）页面内容设计：
参照页面结构分析，分别在 body 标记中插入 1 个 div，并在 div 中分别插入
1 个 h3、6 个 div 标记、6 个图像超链接。
○1 插入 1 个 div，id 为“div0”。
○2 在 div0 图层内插入 1 个 h3 标题字，内容为“京东商品导购”。
○3 在每个子 div 中分别插入 1 个图像超链接。子 div 的 id 分别为 div1、div2、
div3、div4、div5、div6。图像文件名分别为 image41-1.jpg、image41-2.jpg、
image41-3.jpg、image41-4.jpg、image41-5.jpg、image41-6.jpg。格式如下所示：

○4 内容设计完成后，保存页面，并查看效果，初始页面效果如图 4-4-2 所示。图 4-4-2 初始页面（5）表现设计：在 style 标记中分别定义 img、图层、超链接、h3 等标记的样式。 ○1 定义 img 样式。img 标记样式为宽度 186px、高度 205px。 ○2 定义父 div 样式。#div0 样式为宽度 720px、高度 600px，边框宽度为 1px、实线、边框颜色为#0099ff，边界上下为 0、左右为自动、内容水平居中对齐。 ○3 定义标题 h3 样式。h3 标记样式为内容水平居中、字体大小为 32px、颜色为红色。 ○4 定义 6 个子图层样式。#div1、#div2、#div3、#div4、#div5、#div6 的样式统一为上下边界、左右边界均为 10px、边框为 1px、线型为双线、颜色为#9999cc、向左浮动、内容水平、垂直均居中显示，宽度 208px、高度 225px。 ○5 定义图层中超链接所包含的 img 的样式。div a img 为边框粗细为 10px、线型为 groove、边框颜色为#9999cc。 ○6 定义图层中超链接盘旋时 img 的边框样式。div a:hover img 样式为边框粗细为 10px、线型为 dashed、边框颜色为#9999cc。（6）设计完成后通过浏览器观看页面效果。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>京东商品导购</title>
<style type="text/css">
.div0{
	width:720px;
	height:600px;
	border:1px  solid #0099ff;
	margin:0 100px;
	text-align:center;
}
#div1{
	text-align:center;
	margin:10px 10px;
	border:1px   double #9999cc;
	float:left;
	width:208px;
	height:225px;
}
h3{
	text-align:center;
	font-size:32px;
	color:red;
}
img{
	width:186px;
	height:205px;
	border:10px groove #9999cc;
	}
div a:hover img {
	border:10px dashed #9999cc;
}
</style>
</head>

<body>
<div class="div0">
<h3>京东商品导购</h3>

<div id="div1" class="">
<a href="#"><img src="img/image41-1.jpg" alt="1" ></a>
</div>

<div id="div1" class="">
<a href="#"><img src="img/image41-2.jpg" alt="2" ></a>
</div>

<div id="div1" class="">
<a href="#"><img src="img/image41-3.jpg" alt="3" ></a>
</div>

<div id="div1" class="">
<a href="#"><img src="img/image41-4.jpg" alt="4" ></a>
</div>

<div id="div1" class="">
<a href="#"><img src="img/image41-5.jpg" alt="5" ></a>
</div>

<div id="div1" class="">
<a href="#"><img src="img/image41-6.jpg" alt="6" ></a>
</div>


</div>

</body>
</html>

项目 5 设计“文轩图书榜”页面

使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图 4-5
所示：
（1）文件名：prj_4_5.html。（2）页面标题：“文轩图书榜”。
图 4-5 文轩图书榜（3）页面内容结构设计：
页面内容为 1 个标题（3 号标题）、3 个图层，其中 1 个图层中包含 2 个并列
的子图层。第 1 个子图层中插入 1 幅图像 image4-3.jpg，第 2 个子图层中插入 1
个无序列表。列表项的内容分别如下：
9 古汉语常用字字典(第 4 版)
(13 条评论)
王力等原著者 2005 年 07 月商务印书馆
本书由著名语言学家王力、岑麟祥、林焘、戴澧、唐作藩、蒋绍愚等十余位专家学者编写，是学习古
汉语的必备工具书。
购买收藏 25.60 元（8.0 折）定价：￥32.00 元（4）样式设计：
外图层#div3 样式为“宽度 900px、高度 150px、边框宽度 1px、实线、边框
颜色#f0f0f0、向左浮动”。
第 1 个子图层#div1 样式为“边距 5px、宽度 160px、高度 150px、边框宽度
1px、实线、边框颜色#e0e0e0、向左浮动”。
第 2 个子图层#div2 样式为“宽度 700px、高度 150px”；第 2 个子图层内的
无序列表 ul 标记样式为“去除列表项前的符号”；列表项的行高为“1.5 倍”；第
1 个列表项中的“9”的 span 标记 sp1 类样式为“背景色#ff0033、颜色白色、宽度 10px、高度 10px”；“古汉语常用字字典（第 4 版）”的 span 标记的 sp2 类样
式为“字体特粗、大小 16px、黑体”；第 3 个列表项中的“商务印书馆”span 标记 sp3 类样式为“颜色#ff0033、字体特粗、字大小 16px、黑体”；第 4 个列表项
内段落首行缩进 2 个字符；第 5 个列表项中的“25.60 元”span 标记的 sp4 类样
式为“颜色#c0c0c0、字体特粗、大小 16px、黑体、有删除线效果”。
（5）设计完成后通过浏览器观看页面效果。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文轩图书榜</title>
<style type="text/css">
#div1{
	width:160px;
	height:150px;
	border:1px solid #e0e0e0;
	float:left;
	margin:5px;
}
#div3{
	width:900px;
	height:150px;
	border:1px solid #f0f0f0;
	float:left;
}
	
#div2{
	width:700px;
	height:150px;
}
li{
	list-style:none;
	line-height:1.5em;
}

.span1{
	background-color:#ff0033;
	color:#FFF;
	width:10px;
	height:10px;
}
.span2{
	font-size:16px;
	font-family:黑体;
	font-weight:bolder;
}
.span3{	
	font-size:16px;
	font-family:黑体;
	font-weight:bolder;
	color:#ff0033;
}
.sapn4{
	color:#c0c0c0;
	font-weight:bolder;
	text-indent:2em;
	font-family:黑体;
	font-size:16px;
	text-decoration:line-through;
}
</style>
</head>

<body>
<h3>文轩图书榜</h3>
<div id="div3">
<div id="div1"><img src="img/image4-3.jpg">
</div>
<div class="div1">
<ul style="list-style:none">
<li><span class="span1">9</span> <span class="span2">古汉语常用字字典(第 4 版)</span></li>
<li>(13 条评论)</li>
<li>王力 等 原著者 2005 年 07 月 <span class="span3">商务印书馆</span></li>
<li style="text-indent:2em">本书由著名语言学家王力、岑麟祥、林焘、戴澧、唐作藩、蒋绍愚等十余位专家学者编写，是学习古
汉语的必备工具书。</li>

</ul>

</div>
<p>
购买 收藏 <span class="span3">25.60 元</span> （8.0 折） 定价：￥<span class="sapn4">32.00</span> 元
</p>

</div>
</body>
</html>

项目 6 设计“巴城老街风景”页面

使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图 4-6
所示：
（1）文件名：prj_4_6.html。（2）页面标题：“巴城老街风景”。
图 4-6 巴城老街风景（3）网页内容标题：3 号标题字标记显示内容“巴城老街风景”，标记样式
为“字体大小 48px、1.5 倍行距、右对齐、颜色白色、背景#009966”。
（4）段落内容为“巴城老街位于江苏的阳澄湖。在江南，人们都喜欢吃又
香又肥腻的阳澄湖大闸蟹，大闸蟹的产地就在巴城。相传第一个吃螃蟹的人巴解
就是巴城老街的人。”；段落样式为“首行缩进 2 个字符、大小 28px、行距 1.5 倍、
字符间距 2px、有下划线”。（5）4 张图片文件名分别为 image42.jpg～image45.jpg；分别插入到 1 个图
层 div 中。img 标记样式为“宽度 150px、高度 100px、边框宽度 20px、样式 inset、
边框颜色#006633”。（6）图层 div 的样式为“宽度 100%、高度为 160px、向左浮动”。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>巴城老街风景</title>
<style type="text/css">
h3{
	font-size:48px;
	line-height:1.5em;
	text-align:right;
	color:#FFF;
	background-color:#009966;
}
p{
	text-indent:2em;
	font-size:28px;
	line-height:1.5em;
	letter-spacing:2px;
	text-decoration:underline;
}
img{
	width:150px;
	height:100px;
	border:20px inset #006633;
}
div{
	width:100%;
	height:160px;
	float:left;
}
	
</style>
</head>

<body>
<h3>巴城老街风景</h3>
<P>
巴城老街位于江苏的阳澄湖。在江南，人们都喜欢吃又
香又肥腻的阳澄湖大闸蟹，大闸蟹的产地就在巴城。相传第一个吃螃蟹的人巴解
就是巴城老街的人。
</P>
<div>
<img src="img/image42.jpg">
<img src="img/image43.jpg">
<img src="img/image44.jpg">
<img src="img/image45.jpg">
</div>
</body>
</html>