HTML5+CSS3网页设计（课程设计）

扎心小指针0

已于 2022-11-17 19:21:59 修改

阅读量953

点赞数 1

分类专栏：前端开发文章标签： css3 html5 css 前端前端框架

于 2022-10-21 21:01:20 首次发布

本文链接：https://blog.csdn.net/weixin_63381305/article/details/127453829

版权

互联网+教育课程收益师资介绍教务管理课程特色

关键词由CSDN通过智能技术生成

前端开发专栏收录该内容

18 篇文章 4 订阅

订阅专栏

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>互联网+</title>
	<style type="text/css">
		
		.a00{
			position: relative;
         /*background-image: url(d11.png);*/
		}
		.a0{
			position: absolute;
			left: 60px;
			top: 15px;
			/*background-image: url(d11.png);*/
		}
		.a{
			width: 1400px;
			height: 690px;
			background-image: url(a0.png);
		}
		.a1{
			position: absolute;
			top: 20px;
			left: 650px;
		}
		.a5{
			position: absolute;
			left: 675px;
			top: 40px;
		}
		.a2{
			position: absolute;
			left: 200px;
			top: 70px;
		}
		.a3{
			position: absolute;
			right: 200px;
			top: 70px;
		}
		.a4{
			position: absolute;
			right: 378px;
			top: 320px;
		}
		.a6{
			position: absolute;
			right: 200px;
			top: 320px;
		}
		.b{
			position: relative;
			width: 1400px;
			height: 700px;	
		}
		.b1{
			position:absolute;
			left: 200px;
			top: 45px;
		}
		.b2{
			position:absolute;
			top: 60px;
			right: 200px;
		}
		.b13{
			position: absolute;
		}
		.b3{
			position:absolute;
			top: 235px;
			left: 520px;
		}
		.b4{
			position:absolute;
			top: 360px;
			left: 430px;
		}
		.b5{
			position:absolute;
			top: 420px;
			left: 440px;
		}
		.b12{
			position: absolute;
			top: 480px;
			left: 470px;
		}
		.b6{
			position:absolute;
			top: 630px;
			left: 200px;
		}
		.b7{
			position:absolute;
			top: 630px;
			left: 300px;
		}
		.b8{
			position:absolute;
			top: 630px;
			left: 500px;
		}
		.b9{
			position:absolute;
			top: 630px;
			left: 700px;
		}
		.b10{
			position:absolute;
			top: 630px;
			left: 900px;
		}
		.b11{
			position:absolute;
			top: 630px;
			left: 1100px;
		}
		.b0{
			background-image: url(b0.png);
		}
		.c{
			position: relative;
			height: 340px;
			width: 1400px;
		}
		.c1{
			position:absolute;
			left: 650px;
		}
		.c4{
			position:absolute;
			left: 675px;
			top: 20px;
		}
		.c2{
			position:absolute;
			left: 200px;
			top: 50px;
		}
		.c3{
			position:absolute;
			right: 200px;
			top: 50px;
		}
		.e{
			position: relative;
			height: 660px;
			width: 1400px;
		}
		.e1{
			position:absolute;
			left: 650px;
		}
		.e5{
			position:absolute;
			left: 675px;
			top: 20px;
		}
		.e2{
			position: absolute;
			left: 200px;
			top: 50px;
		}
		.e6{
			position: absolute;
			right: 200px;
			top: 50px;
		}
		.e3{
			position: absolute;
			left: 200px;
			top: 100px;
		}
		.e4{
			position: absolute;
			right: 200px;
			top: 150px;
		}
		.e7{
			position: absolute;
			left: 950px;
			top: 60px;
		}
		.e8{
			position: absolute;
			left: 680px;
			top: 60px;
		}
		.e9{
			position: absolute;
			left: 320px;
			top: 65px;
		}
		.d{
			position: relative;
			height: 680px;
			width: 1400px;
		}

		.d1{
			position:absolute;
			height: 300px;
		}
		.d7{
			position:absolute;
			left: 685px;
			top: 20px;
		}
		.d8{
			position:absolute;
			left: 670px;
		}
		.d2{
			position:absolute;
			left: 200px;
			top: 150px;
		}
		.d3{
			position:absolute;
			right: 600px;
			top: 165px;
		}
		.d4{
			position:absolute;
			right: 785px;
			top: 210px;
		}
		.d5{
			position:absolute;
			right: 400px;
			top: 220px;
		}
		.d6{
			position:absolute;
			right: 235px;
			top: 380px;
		}
		.d9{
			position:absolute;
			left: 630px;
			top: 60px;
		}
		.f{
			position: absolute;
			width: 1400px;
			height: 520px;
			background-image: url(f0.png);
		}
		.f1{
			position:relative;
			left: 660px;
			top: 40px;
		}
		.f2{
			position:relative;
			left: 200px;
			top: 70px;
		}
		.f3{
			position:relative;
			left: 680px;
			top: 40px;
		}

		
		.g{
			position: absolute;
		}
		.g1{
			position:relative;
			left: 580px;
			top: 530px;
		}
        .g2{
			position:relative;
			left: 630px;
			top: 470px;
		}
		
		.h{
			position: absolute;
			
		}
		.h1{
			position:relative;
			left: 190px;
			top: 510px;
		}
		.h2{
			position:relative;
			left: 925px;
			top: 450px;
		}
		.h3{
			position:relative;
			left: 1050px;
			top: 350px;
		}
		.h4{
			position:relative;
			
			top: 620px;
		}

	</style>
</head>
<body>
	


	<div class="a00">
	<div class="a0">
	<div class="a">
	<div class="b1"><img src="b1.png" alt=""></div>
	<div class="b2"><img src="b2.png" alt=""></div>
	<div class="b3"><img src="b3.png" alt=""></div>
	<div class="b4"><img src="b5.png" alt=""></div>
	<div class="b5"><img src="b4.png" alt=""></div>
	<div class="b6"><img src="b6.png" alt=""></div>
	<div class="b7"><img src="b7.png" alt=""></div>
	<div class="b8"><img src="b8.png" alt=""></div>
	<div class="b9"><img src="b9.png" alt=""></div>
	<div class="b10"><img src="b10.png" alt=""></div>
	<div class="b11"><img src="b11.png" alt=""></div> 
	<div class="b12"><img src="b12.png" alt=""></div>
	<div class="b13"><img src="b13.png" alt=""></div>
</div>


	<div class="b">
		<div class="a1"><img src="a1.png"></div>
		<div class="a5"><img src="a5.png" alt=""></div>
		<div class="a2"><img src="a2.png"></div>
		<div class="a3"><img src="互联网+标题.png"></div>
		<div class="a4"><img src="a3.png"></div>
		<div class="a6"><img src="a4.png" alt=""></div>
	</div>


<div class="b0">
	<div class="c">
		<div class="c1"><img src="课程收益.png"></div>
		<div class="c4"><img src="a5.png" alt=""></div>
		<div class="c2"><img src="c1.png"></div>
		<div class="c3"><img src="c2.png"></div>
	</div>


	<div class="e">
	<div class="e1"><img src="e1.png"></div>

	<div class="e6"><img src="e3.png"></div>
	<div class="e2"><img src="e2.png"></div>
	<div class="e5"><img src="a5.png" alt=""></div>
	
	<div class="e7"><img src="e7.png" alt=""></div>
	<div class="e8"><img src="e8.png" alt=""></div>
	<div class="e9"><img src="e9.png" alt=""></div>
	
	<div class="e3"><img src="e4.png"></div>
	<div class="e4"><img src="e5.png"></div>
</div>


<div class="d"> 
	<!-- <div class="d1"><img src="d11.png" alt=""></div> -->
	<div class="d8"><img src="师资简介.png" alt=""></div>
	<div class="d7"><img src="a5.png" alt=""></div>
	<div class="d9"><img src="d9.png" alt=""></div>
	<div class="d2"><img src="d2.png" alt=""></div>
	<div class="d3"><img src="d3.png" alt=""></div>
	<div class="d4"><img src="d4.png" alt=""></div>
	<div class="d5"><img src="d5.png" alt=""></div>
	<div class="d6"><img src="d6.png" alt=""></div>
</div>
</div>


	<div class="f">
        <div class="f1"><img src="教务管理.png" alt=""></div>
        <div class="f3"><img src="f2.png" alt=""></div>
        <div class="f2"><img src="f1.png" alt=""></div></div>
		

	 <div class="g">
	 	<div class="g1"><img src="g0.png" alt=""></div>
	 	<div class="g2"><img src="g1.png" alt=""></div>
	</div>
	<div class="h">
	<div class="h4"><img src="h0.png" alt=""></div>
	<div class="h1"><img src="h1.png" alt=""></div>
	<div class="h2"><img src="h2.png" alt=""></div>
	<div class="h3"><img src="h3.png" alt=""></div>
</div>  
</div>
</div>
</body>
</html>