一、设计《中国教育网络》杂志简介
页面中所需文字信：
2004年12月，《中国教育网络》杂志正式出版发行。经国家新闻出版署、科技部批准，教育部主管，教育部科技发展中心主办，中国教育和科研计算机网(CERNET)承办的国家级权威科技期刊《中国教育网络》正式出版发行。
立足教育网络，服务于教育信息化，《中国教育网络》关注和解读国家信息化发展政策，全面报道中国教育网络建设现状及成就，研究探讨教育网络建设的经验与问题。介绍国际上先进的网络技术、理念，及时报道相关政策及重大事件，广泛反映围绕教育信息化的各种重大应用及重大事件，为领导、专家、师生及技术人员提供借鉴。
依托高校及社会各界的优秀专家，《中国教育网络》突出权威性、政策性、前瞻性，为专家及业界人士提供一个权威的交流与沟通平台。《中国教育网络》已成为中国最具影响力、权威性的专业期刊，已成为与中国教育信息化同步发展的核心媒体。
#div4中段落的文字：
强有力的政府指导
在教育部及相关部门的指导下，及时准确地传达、贯彻教育信息化发展的方针、政策、法规等，保证中国教育网络健康发展，推动教育网络建设与应用。
权威的专家队伍
依托CERNET及教育信息化领域最权威的专家组成的编辑委员会，《中国教育网络》将为读者提供高水准的内容，为工作提供高起点的业务及技术指导。
影响未来的用户群
《中国教育网络》用户群以教育领域从事互联网建设及应用的领导、专家、教师、科研人员为主，在该领域具有强大的影响力。
遍布全国的渠道
依托各地方教委及CERNET，《中国教育网络》将建设遍布全国的记者站，伴随教育网络的建设及拓展，中国教育网络在为读者服务的同时，也将不断壮大自己的渠道网络。
/* layout_import.css*/
#div0 {
border: 1 solid #cccccc;
width: 850px;
height: 780px;
margin: 5px auto;
}
#div3 {
padding-left: 40px;
font-size: 14px;
clear: both;
}
<!-- prj_4_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>《中国教育网络》杂志简介</title>
<style type="text/css">
@import url("pro41/layout_import.css");
p {
text-indent: 2em;
line-height: 1.2em;
}
.div2 {
width: 100%;
background: #F0F0F0;
height: 100px;
line-height: 1.5em;
padding: 10px auto;
}
li {
float: left;
width: 256px;
margin: 0px 5px;
list-style-type: none;
}
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>
<link type="text/css" rel="stylesheet" href="pro41/layout_link.css" />
</head>
<body>
<div id="div0" class="">
<!--第1个div应用行内样式表/内联样式表 -->
<div class="div1" style="background:url('pro41/zw_logo.jpg') no-repeat top left;witdh:100%;height:80px;text-align:center;padding:10px auto;">
<h2>《中国教育网络》杂志简介</h2>
<h4>主管单位：中华人民共和国教育部 主办单位：教育部科技发展中心</h4>
</div>
<!-- 第2个div应用应用内部样式表 -->
<div class="div2">
<h3>>>推荐阅读</h3>
<ul>
<li><a href="#"><span>•</span>COST论坛"迎新"系列视频讲座</a></li>
<li><a href="#"><span>•</span>技术应用升级 百所高校IPv6蝶变</a></li>
<li><a href="#"><span>•</span>教育信息化关注"十二五"规划</a></li>
<li><a href="#"><span>•</span>2010下一代互联网发展和应用论坛</a></li>
<li><a href="#"><span>•</span>教育信息化服务器应用突破壁垒</a></li>
<li><a href="#"><span>•</span>强调应用 移动IPv6发展空间无限</a></li>
</ul>
</div>
<!-- 第3个div应用导入样式表 -->
<div id="div3">
<p>2004年12月，《中国教育网络》杂志正式出版发行。经国家新闻出版署、科技部批准，教育部主管，教育部科技发展中心主办，中国教育和科研计算机网(CERNET)承办的国家级权威科技期刊《中国教育网络》正式出版发行。 </p>
<p>立足教育网络，服务于教育信息化，《中国教育网络》关注和解读国家信息化发展政策，全面报道中国教育网络建设现状及成就，研究探讨教育网络建设的经验与问题。介绍国际上先进的网络技术、理念，及时报道相关政策及重大事件，广泛反映围绕教育信息化的各种重大应用及重大事件，为领导、专家、师生及技术人员提供借鉴。
</p>
<p>依托高校及社会各界的优秀专家，《中国教育网络》突出权威性、政策性、前瞻性，为专家及业界人士提供一个权威的交流与沟通平台。《中国教育网络》已成为中国最具影响力、权威性的专业期刊，已成为与中国教育信息化同步发展的核心媒体。
</p>
</div>
<!-- 第4个div应用外部样式表 -->
<div id="div4" class="">
<h3>目标</h3>
<dl>
<dd>始终保持教育信息化领域第一品牌的市场地位</dd>
<dd>成为与中国教育信息化同步发展的核心媒体</dd>
</dl>
<h3>定位</h3>
<dl>
<dt>中国教育网络领域的综合杂志</dt>
<dd>——全面反映教育网络研究、建设、管理及应用、文化、产业化的成就及重大事件。</dd>
<dt>受人尊敬的专业权威杂志</dt>
<dd>——依托政府、教育界、IT产业界专家，专注于教育网络领域，制作高水准的内容。</dd>
<dt>创新IT媒体服务</dt>
<dd>——以创新、深入的视角报道教育信息化的进展和变化。</dd>
<dt>影响高端人士，成为教育信息化宣传队</dt>
<dd>——服务于教育网络的研究、建设与使用者，通过对高端人群的影响，确立自己作为教育信息化权威窗口地位。</dd>
</dl>
<h3>杂志优势</h3>
<p>强有力的政府指导</p>
<p>在教育部及相关部门的指导下，及时准确地传达、贯彻教育信息化发展的方针、政策、法规等，保证中国教育网络健康发展，推动教育网络建设与应用。</p>
<p>权威的专家队伍</p>
<p>依托CERNET及教育信息化领域最权威的专家组成的编辑委员会，《中国教育网络》将为读者提供高水准的内容，为工作提供高起点的业务及技术指导。</p>
<p>影响未来的用户群</p>
<p>《中国教育网络》用户群以教育领域从事互联网建设及应用的领导、专家、教师、科研人员为主，在该领域具有强大的影响力。</p>
<p>遍布全国的渠道</p>
<p>依托各地方教委及CERNET，《中国教育网络》将建设遍布全国的记者站，伴随教育网络的建设及拓展，中国教育网络在为读者服务的同时，也将不断壮大自己的渠道网络。</p>
</div>
</div>
</body>
</html>
二、设计《京东商品导购》页面
初始界面
京东商品导购应用样式后的页面
/*layout_link.css */
#div4 {
width: 100%;
height: 160px;
margin: 10px auto;
padding-left: 40px;
}
<!-- prj_4_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东商品导购</title>
<style type="text/css">
img {
width: 186px;
height: 205px;
}
#div0 {
width: 720px;
height: 600px;
border: 1px solid #0099ff;
text-align: center;
margin: 0 auto;
}
.products {
display: inline-block;
width: 208px;
height: 225px;
margin: 10px;
text-align: center;
vertical-align: middle;
}
div a img {
border: 10px groove #9966cc;
}
div a:hover img {
border: 10px dashed #9999cc;
}
h3 {
text-align: center;
font-size: 32px;
color: red;
}
</style>
</head>
<body>
<div id="div0" class="">
<h3>京东商品导购</h3>
<div id="div1" class="products">
<a href="#"><img src="pro42/image4-2-1.jpg" alt="[Vinhas]彩色斑马系列单肩包 黑色"></a>
</div>
<div id="div2" class="products">
<a href="#"><img src="pro42/image4-2-2.jpg" alt="adidas阿迪三叶草新款女子休闲鞋"></a>
</div>
<div id="div3" class="products">
<a href="#"><img src="pro42/image4-2-3.jpg" alt="New Balance 新款女子复古鞋品"></a>
</div>
<div id="div4" class="products">
<a href="#"><img src="pro42/image4-2-4.jpg" alt="VANS万斯 新款女子硫化鞋"></a>
</div>
<div id="div5" class="products">
<a href="#"><img src="pro42/image4-2-5.jpg" alt="CONVERSE/匡威 新款中性商品"></a>
</div>
<div id="div6" class="products">
<a href="#"><img src="pro42/image4-2-6.jpg" alt="Belle/时尚舒适马毛皮/羊皮女鞋"></a>
</div>
</div>
</body>
</html>
三、课外拓展训练
1.设计“文轩图书榜”页面
设计“文轩图书榜”页面，效果设计所示。
(1)页面标题为：“文轩图书榜”。
(2)列表项的内容分别如下：
- 99 Web前端开发技术：HTML5、CSS3、JavaScript（第3版）
- (350条评论)
- 储久良 编著 2018年07月 清华大学出版社
- 全书详细地介绍HTML、CSS、DIV、HTML5基础和CSS3应用、JavaScript、DOM与BOM、HTML5高级应用等部分的基本语法和关键应用。
- 购买 收藏 47.60元 （8.0折） 定价：￥59.50元
<!-- project_4_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文轩图书榜</title>
<style type="text/css">
#div0 {
width: 900px;
height: 260px;
border: 1px solid #F0F0F0;
margin: 0 auto;
padding: 10px;
}
#div1 {
width: 160px;
height: 198px;
border: 1px solid #e0e0e0;
float: left;
}
#div2 {
width: 700px;
height: 200px;
float: left;
}
ul {
list-style-type: none;
}
li {
line-height: 1.5em;
}
.sp1 {
background: #ff0033;
color: white;
width: 10px;
height: 10px;
}
.sp2 {
font: bolder 16px 黑体;
}
.sp3 {
color: #ff0033;
font: bolder 16px 黑体;
}
.sp4 {
color: #c0c0c0;
font: bolder 16px 黑体;
text-decoration: line-through;
}
p {
text-indent: 2em;
}
</style>
</head>
<body>
<div id="div0" class="">
<h3>文轩图书榜</h3>
<div id="div1" class="">
<img src="kwtz41/image41.jpg" width="160px" height="160px" border="0" alt="">
</div>
<div id="div2" class="">
<ul>
<li><span class="sp1"> 99 </span><span class="sp2">Web前端开发技术：HTML5、CSS3、JavaScript（第3版）</span></li>
<li>(350条评论)</li>
<li>储久良 编著 2018年07月 <span class="sp3">清华大学出版社</span></li>
<li>
<p>全书详细地介绍HTML、CSS、DIV、HTML5基础和CSS3应用、JavaScript、DOM与BOM、HTML5高级应用等部分的基本语法和关键应用。</p>
</li>
<li>购买 收藏 <span class="sp3">47.60元</span> （8.0折） 定价：<span class="sp4">￥59.50元</span></li>
</ul>
</div>
</div>
</body>
</html>
2.设计“巴城老街风景”页面
设计“巴城老街风景”页面,效果如图所示。要求如下：
（1）页面标题：“巴城老街风景”。
（2）段落内容为“巴城老街位于江苏的阳澄湖。在江南，人们都喜欢吃又香又肥腻的阳澄湖大闸蟹，大闸蟹的产地就在巴城。相传第一个吃螃蟹的人巴解就是巴城老街的人。”；段落样式为“首行缩进2个字符、大小28px、行距1.5倍、字符间距2px、有下划线”。
（3）4张图片文件名分别为image42-1.jpg～image42-4.jpg。
<!-- project_4_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>巴城老街风景</title>
<style type="text/css">
#div0 {
margin: 0 auto;
padding: 10px;
width: 1000px;
height: 520px;
box-shadow: 0px 0px 10px #DADADA;
}
h3 {
font-size: 48px;
line-height: 1.5em;
text-align: right;
padding-right: 40px;
color: white;
background: #009966;
}
p {
text-indent: 2em;
font-size: 28px;
line-height: 1.5em;
letter-spacing: 2px;
text-decoration: underline;
}
#div1 {
text-align: center;
width: 100%;
height: 180px;
display: inline-block;
}
img {
padding: 10px;
width: 180px;
height: 140px;
border: 10px groove #009966;
}
</style>
</head>
<body>
<div id="div0">
<h3>巴城老街风景</h3>
<p>巴城老街位于江苏的阳澄湖。在江南，人们都喜欢吃又香又肥腻的阳澄湖大闸蟹，大闸蟹的产地就在巴城。相传第一个吃螃蟹的人巴解就是巴城老街的人。
</p>
<div id="div1" class="">
<img src="kwtz42/image42-1.jpg">
<img src="kwtz42/image42-2.jpg">
<img src="kwtz42/image42-3.jpg">
<img src="kwtz42/image42-4.jpg">
</div>
</div>
</body>
</html>
作者主页： 正函数的个人主页
文章收录专栏： Web design
欢迎大家点赞 👍 收藏 ⭐ 加关注哦！
如果你认为这篇文章对你有帮助，请给正函数点个赞吧，如果发现什么问题，欢迎评论区留言！！
扫一扫
6461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
