一、综合实验要求：
1、站点文件夹结构：img文件夹，css文件夹，js文件夹，文件命名正确(首页为index.html)。站点主题自定，要求站点内至少为6个页面，通过超链接进行连接。从首页能够访问到二级页面，每个二级页面都能够返回首页。
2、网页布局设计：采用CSS+DIV、table或者框架实现都可以，要求布局合理、结构清晰。可使用flex弹性布局，以适应不同浏览器宽度。
3、网页样式设计：采用CSS对网页样式进行设计，至少包括对页面中文本颜色、背景颜色(图像)、段落格式、超链接格式等的样式设计。要求采用外部链接的方式对CSS进行使用，即需要独立的CSS文件，一般保存名为style.css。
4、站点中需要使用到javascript编写的脚本，可以是对表单的验证、简单交互等，JavaScript脚本以独立的.js文件存在，通过<script>标记与html文档关联。
5、网页中的文本、图像等元素比例适中，能够合理反应页面主题即可，不需要放置过多的图像等多媒体元素。
二、示例代码：
1、主体部分
<body>
<div id="con">
<div id="head">
<div id="head1"><img src="img/1018.png"/></div>
</div>
<div id="nav">
<div id="logo"><img src="img/1018.png"/></div>
<ul>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="0001.html"></a>
</li>
<li>
<a href="0003.html"></a>
</li>
</ul>
</div>
<div id="right">
<div id="right1">
<!-- <img src="img/1009.jpg"/> -->
<div id="right2">
</div>
<div id="right3">
</div>
</div>
<div id="right4">
<audio controls >
<source src="img/1007.mp3"/>
</audio>
</div>
<div id="right5">
<video controls loop>
<source src="img/1010.mp4"/>
</video>
</div>
<div id="right6">
<img class="tu1" src="img/1016.jpeg"/>
<img class="tu2" src="img/116.jpg"/>
</div>
</div>
<div id="left">
<div id="left1">
<img src="img/1019.jpg" alt="Photo 1" class="photo"/>
<img src="img/1020.jpg" alt="Photo 2" class="photo"/>
<img src="img/1021.jpg" alt="Photo 3" class="photo"/>
<img src="img/1025.jpg" alt="Photo 4" class="photo"/>
<img src="img/1026.jpg" alt="Photo 5" class="photo"/>
<img src="img/1023.jpg" alt="Photo 6" class="photo"/>
<img src="img/1024.jpg" alt="Photo 7" class="photo"/>
<!-- <img src="img/117.jpg" alt="Photo 8" class="photo"/> -->
</div>
<div id="left2">
</div>
<div id="left3"></div>
</div>
<div id="bottom">
<div id="bottom1">以上图片如有侵权，涉嫌转载，请联系本人，本人联系方式：，欢迎致电。</div>
<button id="bottom2" onclick="speakText()">朗读文本</button>
</div>
</div>
<script>
function speakText() {
var bottom1 = document.getElementById('bottom1');
var textToSpeak = bottom1.innerText;
var synth = window.speechSynthesis;
var utterance = new SpeechSynthesisUtterance(textToSpeak);
synth.speak(utterance);
}
</script>
</body>三、功能部分：（全部为CSS部分）
1、div+css+js 利用position布局：
（1）、头部和主体：
body{
margin: 0px;
background-image: url('img/1008.jpg');
background-size:cover;
}
#con{
width: 1200px;
height: 1800px;
/* background: red; */
border: 0px solid rebeccapurple;
position: relative;
margin: 0px auto;
}
#head,#nav,#left,#right,#bottom{
position: absolute;
}
#head{
width: 1200px;
height: 200px;
background: green;
top: 0px;left: 0px;
border-radius: 20px;
background-image: url('img/008.jpg');
}
#head1{
width: 100px;
height: 100px;
background: green;
position: absolute;
top: 50px;left: 50px;
border-radius: 50%;
}
#head1 img{
width: 100px;
height: 100px;
border-radius: 50%;
}（2）、右边框架部分：
#left{
width: 400px;
height: 1000px;
border: 1px solid rebeccapurple;
/* background: blue; */
top: 250px;left: 0px;
border-radius: 20px;
overflow: hidden;
}
#left1{
width: 400px;
height: 550px;
/* border: 1px solid rebeccapurple; */
position: absolute;
top: 100px;left: 0px;
border-radius: 20px;
overflow: hidden;
}
#left1 img{
width: 400px;
height: 550px;
border-radius: 20px;
position: absolute;
opacity: 0;
transition: opacity 1s, transform 1s;
}
#left2{width: 600px;height: 50px;position: absolute; top: 25px;left: 50px;border-radius: 10px;
color:transparent;line-height: 50px;text-align: center;font-size: 50px;-webkit-text-stroke: 1px green;filter: drop-shadow(0px 1px 10px #B5E61D);
animation: marqueet 10s linear infinite;overflow: hidden;}
#left3{width: 300px;height:250px;border: 1px solid greenyellow;position: absolute;top: 700px;left: 50px;border-radius: 20px;
box-shadow: 20px 10px 0px rgba(228, 197, 169, 0.5);}
animation: vaitly 10s 1s ease-in-out infinite alternate;}
@keyframes marqueet{
0%{transform: translateX(30%);}
100%{transform: translateX(-100%);}
}
@keyframes pushanination{
0%{transform: translateX(0%);opacity: 0;}
20%{opacity: 1;}
80%{opacity: 1;}
100%{transform: translateX(-100%);opacity: 0;}
}
.photo:nth-child(1){animation: pushanination 5s infinite;}
.photo:nth-child(2){animation: pushanination 5s 1s infinite;}
.photo:nth-child(3){animation: pushanination 5s 2s infinite;}
.photo:nth-child(4){animation: pushanination 5s 3s infinite;}
.photo:nth-child(5){animation: pushanination 5s 4s infinite;}
.photo:nth-child(6){animation: pushanination 5s 5s infinite;}
.photo:nth-child(7){animation: pushanination 5s 6s infinite;}
/* .photo:nth-child(8){animation: pushanination1 5s 3.5s infinite;} */
@keyframes vaitly-color vaitly{
0%{background-color: #ff00de;
box-shadow: 0 0 10px #00f,
0 0 20px #0a3400,
0 0 30px #33ccaf;}
40%{background-color: green;
box-shadow: 0 0 10px #00f,
0 0 20px #0a3400,
0 0 30px #33ccaf;}
60%{background-color: #ff003a;
box-shadow: 0 0 10px #00f,
0 0 20px #0a3400,
0 0 30px #33ccaf;}
100%{background-color: orange;
box-shadow: 0 0 10px #af0012,
0 0 20px #0a34f0,
0 0 30px #3300af;}
}（3）、左框架部分：
#right{
width: 800px;
height: 1000px;
/* background: black; */
top: 250px;left: 400px;
/* border: 1px solid red; */
border-radius: 20px;
position: relative;
}
#right1{
position: absolute;
width: 300px;
height: 533px;
background: rebeccapurple;
top: 200px;left: 80px;
overflow: hidden;
border-radius: 20px;
background-image: url('img/1009.jpg');
}
#right2{
box-sizing: border-box;
width: 100px;
height: 355px;
margin: 0px;
font-size: 25px;
text-indent: 2em;
line-height: 25px;
position: absolute;
top: 480px;
/* background-color: rgba(169, 169, 169, 0.5) ; */
transition: 3s;
}
#right3{
position: absolute;
box-sizing: border-box;
width: 50px;
height: 355px;
top: 450px;left:250px ;
font-size: 40px;
font-family: '隶书';
transition: 1s;
}
#right2:hover{
top: 0px;
color: lightcoral;
background-color: none;
}
#right3:hover{
top: 20px;
color: black;
}
#right4{
position: absolute;
width: 300px;
height: 100px;
top: 50px;left: 80px;
}
audio{
width: 300px;
height: 100px;
}
#right5{
position: absolute;
width: 300px;
height: 200px;
top: 760px;left: 80px;
}
video{
width: 300px;
height: 200px;
border-radius: 20px;
}
#right6{
width: 300px;
height: 533px;
position: relative;
backface-visibility: hidden;
transform: matrix3d();
}
#right6 img{
position: absolute;
width: 300px;
height: 533px;
top: 200px;left: 450px;
border-radius: 20px;
backface-visibility: hidden;
transition: 3s;
}
.tu1{
transform: rotateY(180deg);
}
#right6:hover .tu1{
transform: rotateY(0deg);
}
#right6:hover .tu2{
transform: rotateY(-180deg);
}（4）、底部部分：
#bottom{
/* line-height: 50px;
font-size: 30px; */
width: 1200px;
height: 80px;
border-radius: 20px;
background-color: #33ccff;
top: 1250px;left: 0px;
box-shadow: 0 0 10px #fff,
0 0 20px #ff00de,
0 0 30px #33ccff;
animation: vaitly-color 10s 1s ease-in-out infinite alternate;
overflow: hidden;
}
#bottom1{font-size: 50px;font-family: '宋体';
animation: marqueet 10s linear infinite;
white-space: nowrap;
}
#bottom2{width: 50px;
animation: vaitly 10s 1s ease-in-out infinite alternate;}
@keyframes marqueet{
0%{transform: translateX(30%);}
100%{transform: translateX(-100%);}
}
@keyframes vaitly-color vaitly{
0%{background-color: #ff00de;
box-shadow: 0 0 10px #00f,
0 0 20px #0a3400,
0 0 30px #33ccaf;}
40%{background-color: green;
box-shadow: 0 0 10px #00f,
0 0 20px #0a3400,
0 0 30px #33ccaf;}
60%{background-color: #ff003a;
box-shadow: 0 0 10px #00f,
0 0 20px #0a3400,
0 0 30px #33ccaf;}
100%{background-color: orange;
box-shadow: 0 0 10px #af0012,
0 0 20px #0a34f0,
0 0 30px #3300af;}
}四、结尾报告
现在，计算机和网络已经深入到了我们生活中的方方面面，也已经成了生活中不可缺少的一部分，网络成了我们获取知识和信息的一种便捷工具，现在的网民也在不断的增多，所以，了解和学习网络知识是我们作为一名大学生迫切所需的。
这学期选择的这门课程让我学到了不少关于计算机和网络的知识。老师把课程内容安排的很合理，讲的大都是很基础的知识，这对于像我这样对网络了解不多的学生来说很容易理解，接受。
在这门课上我学习到了一些关于建设网站和制作网页的知识，对flash也有所了解。课上我还学到了一些基础的网络技术，用制作网络的工具做网页等。
通过对这门课的学习，我对计算机有了更深层次得到了解，也有了更浓厚的兴趣。尤其是对网页制作的过程与一些技巧手法更有了另外一番了解，对网页制作的基础知识也有了一定的掌握。
494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
