Web前端开发技术实验与实践(第3版)储久良编著实训4

实训4 DIV+CSS综合运用

项目14 设计《中国教育网络》杂志简介
页面效果截图
在这里插入图片描述

代码

<!--prj_4_1.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>《中国教育网络》杂志简介</title>
		<link rel="stylesheet" type="text/css" href="../css/layout_link.css">
		<style type="text/css">
			@import url("../css/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;
			}

			ul {
				list-style-type: none;
			}

			li {
				float: left;
				width: 250px;
				margin: 0px 5px;
			}

			span {
				color: red;
				font-size: x-large;
			}

			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 id="" class="div1" style="background: url(../img/zw_logo.jpg) no-repeat top left;width: 100%;height: 80px;text-align: center;padding: 10px auto;">
				<h2>《中国教育网络》杂志简介</h2>
				<h4>2016-03-03</h4>
			</div>
			<div id="" class="div2">
				<h3>>>推荐阅读</h3>
				<ul>
					<li><span>·&nbsp;</span><a>COST论坛“迎新”系列视频讲座</a></li>
					<li><span>·&nbsp;</span><a>技术应用升级&nbsp;百所高校IPv6蝶变</a></li>
					<li><span>·&nbsp;</span><a>教育信息化关注“十二五”规划</a></li>
					<li><span>·&nbsp;</span><a>2010下一代互联网发展和应用论坛</a></li>
					<li><span>·&nbsp;</span><a>教育信息化服务器应用突破壁垒</a></li>
					<li><span>·&nbsp;</span><a>强调应用&nbsp;移动IPv6发展空间无限</a></li>
				</ul>
			</div>
			<div id="div3">
				<p>2004年12月,《中国教育网络》杂志正式出版发行。经国家新闻出版署、科技部批准,教育部主管,教育部科技发展中心主办,中国教育和科研计算机网(CERNET)承办的国家级权威科技期刊《中国教育网络》正式出版发行。</p>
				<p>立足教育网络,服务于教育信息化,《中国教育网络》关注和解读国家信息化发展政策,全面报道中国教育网络建设现状及成就,研究探讨教育网络建设的经验与问题。介绍国际上先进的网络技术、理念,及时报道相关政策及重大事件,广泛反映围绕教育信息化的各种重大应用及重大事件,为领导、专家、师生及技术人员提供借鉴。</p>
				<p>依托高校及社会各界的优秀专家,《中国教育网络》突出权威性、政策性、前瞻性,为专家及业界人士提供一个权威的交流与沟通平台。《中国教育网络》已成为中国最具影响力、权威性的专业期刊,已成为与中国教育信息化同步发展的核心媒体。</p>
			</div>
			<div id="div4">
				<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>

#div4{
	padding-right: 10px;
	padding-left: 40px;
}

项目15 设计京东商品导购页面
页面效果截图
在这里插入图片描述

代码

<!--prj_4_2.html-->
<!DOCTYPE html>
<html>
	<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;
				margin: 0 auto;
				text-align: center;
			}

			h3 {
				text-align: center;
				font-size: 32px;
				color: red;
			}

			#div1,
			#div2,
			#div3,
			#div4,
			#div5,
			#div6 {
				padding: 10px;
				border: 1px double #9999cc;
				float: left;
				text-align: center;
				vertical-align: middle;
				width: 208px;
				height: 225px;
			}

			div a img {
				border: 10px groove #9999cc;
			}

			div a:hover img {
				border: 10px dashed #9999cc;
			}
		</style>
	</head>
	<body>
		<div id="div0">
			<h3>京东商品导购</h3>
			<div id="div1">
				<a href="#"><img src="../img/image41-1.jpg" alt="[Vinhas]彩色斑马系列单肩包 黑色" /></a>
			</div>
			<div id="div2">
				<a href="#"><img src="../img/image41-2.jpg" alt="[Adidas]休闲鞋 红色" /></a>
			</div>
			<div id="div3">
				<a href="#"><img src="../img/image41-3.jpg" alt="[NB]女子复古鞋 灰色" /></a>
			</div>
			<div id="div4">
				<a href="#"><img src="../img/image41-4.jpg" alt="[VANS]女子硫化鞋 粉白" /></a>
			</div>
			<div id="div5">
				<a href="#"><img src="../img/image41-5.jpg" alt="[匡威]经典低帮鞋 黑色" /></a>
			</div>
			<div id="div6">
				<a href="#"><img src="../img/image41-6.jpg" alt="[Belle]羊皮女鞋 黑色" /></a>
			</div>
		</div>
	</body>
</html>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值