概述
效果图：
<!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>最后
以上就是魁梧柠檬为你收集整理的HTML5+CSS3网页设计（课程设计）的全部内容，希望文章能够帮你解决HTML5+CSS3网页设计（课程设计）所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复