数字化教学资源平台网页布局案例

最新推荐文章于 2024-11-02 23:32:29 发布

B 先生

最新推荐文章于 2024-11-02 23:32:29 发布

阅读量4.5k

点赞数 12

分类专栏： HTML简单案例文章标签： html css web

本文链接：https://blog.csdn.net/Qu_een/article/details/105931281

版权

该博客展示了数字化教学资源平台的网页布局案例，包括HTML页面结构和CSS样式的应用。通过代码片段和示例图片，详细解释了网页布局的实现过程。

摘要由CSDN通过智能技术生成

数字化教学资源平台网页布局案例

例图如下

代码片

下面展示一些 内联代码片。

1.关于HTML页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数字化教学资源平台</title>
		<link type="text/css" href="css/style.css" rel="stylesheet"/>
	</head>
	<body>
		<div id="main">
			<header id=header>
				<div class="link">
					<a href="#">网站地图</a>|<a href="#">联系我们</a>
				</div>				
			</header>
			<nav id="menu">
				<div class="menulist">
					<ul>
						<li><a href="#">首页</a></li>
						<li> | </li>
						<li><a href="#">核心课程</a></li>
						<li> | </li>
						<li><a href="#">在线课程</a></li>
						<li> | </li>
						<li><a href="#">教学案例</a></li>
						<li> | </li>
						<li><a href="#">拓展模块</a></li>
						<li> | </li>
						<li><a href="#">关于我们</a></li>
						<li> | </li>
					</ul>
				</div>
				<div class="leftmenu"></div>
			</nav>
			<section id="content">
				<aside class="left">
					<div class="course_lefttop"></div>
					<div class="course_lefttitle">
						<span class="titlewhite"><a href="#">在线开放课程</a></span>
					</div>
					<div class="course_leftcontent">
						<ul>
							<li><a href="#">网页设计与网页制作1<a><li>
							<li><a href="#">网页设计与网页制作2</a><li>
							<li><a href="#">网页设计与网页制作3</a><li>
							<li><a href="#">网页设计与网页制作4</a><li>
							<li><a href="#">网页设计与网页制作5</a><li>
						</ul>
					</div>
					<div class="studytitle">
						<span class="titlewhite">专题学习网站</span>
					</div>
					<div class="studycontentbig">
						<div class="studycontent">
						<div class="studycontenttitle"><a href="#">计算机应用技术</a></div>
						<a href="#">计算机应用技术专题学习网站</a>
					</div>
						<div class="studycontent">
						<div class="studycontenttitle"><a href="#">计算机应用技术</a></div>
						<a href="#">计算机应用技术专题学习网站</a>
					</div>
						<div class="studycontent">
						<div class="studycontenttitle"><a href="#">计算机应用技术</a></div>
						<a href="#">计算机应用技术专题学习网站</a>
					</div>
						<div class="studycontent">
						<div class="studycontenttitle"><a href="#">计算机应用技术</a></div>
						<a href="#">计算机应用技术专题学习网站</a>
					</div>
					</div>

				</aside>
				<section class="middle">
					<img src="images/show.jpg" class="middle_show"/>
					<div class="clear"></div>
					<div class="middletitle">
						<span class="titlered">教学案例库</span>
					</div>
					<div class="midddlecontentbig">
						<div class="middleleft">
							<img src="images/pic1.jpg" />
							<div class="piccontent">
								<div class="pictitle"><a href="#">网页制作</a></div>
								<a href="#">专业教学案例库相关内容</a>
							</div>
						</div>
						<div class="middleright">
							<img src="images/pic2.jpg" />
							<div class="piccontent">
								<div class="pictitle"><a href="#">网页制作</a></div>
								<a href="#">专业教学案例库相关内容</a>
							</div>
						</div>
						<div class="middleleft">
							<img src="images/pic3.jpg" />
							<div class="piccontent">
								<div class="pictitle"><a href="#">网页制作</a></div>
								<a href="#">专业教学案例库相关内容</a>
							</div>
						</div>
						<div class=