网页设计期末作业ppt+源码（免费获取）
html网页设计期末作业，PPT+源码免费付出
·
PPT展示：
源码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>光之世界</title>
<script>
function over1(){
document.getElementById("dd1").style.backgroundColor="#D0D0D0";
}
function out1(){
document.getElementById("dd1").style.backgroundColor="#F7DBF5";
}
function over2(){
document.getElementById("dd2").style.backgroundColor="#D0D0D0";
}
function out2(){
document.getElementById("dd2").style.backgroundColor="#F7DBF5";
}
function over3(){
document.getElementById("dd3").style.backgroundColor="#D0D0D0";
}
function out3(){
document.getElementById("dd3").style.backgroundColor="#F7DBF5";
}
function over4(){
document.getElementById("dd4").style.backgroundColor="#D0D0D0";
}
function out4(){
document.getElementById("dd4").style.backgroundColor="#F7DBF5";
}
function over5(){
document.getElementById("dd5").style.backgroundColor="#D0D0D0";
}
function out5(){
document.getElementById("dd5").style.backgroundColor="#F7DBF5";
}
function over6(){
document.getElementById("dd6").style.backgroundColor="#D0D0D0";
}
function out6(){
document.getElementById("dd6").style.backgroundColor="#F7DBF5";
}
function over7(){
document.getElementById("dd7").style.backgroundColor="#D0D0D0";
}
function out7(){
document.getElementById("dd7").style.backgroundColor="#F7DBF5";
}
function over8(){
document.getElementById("dd8").style.backgroundColor="#D0D0D0";
}
function out8(){
document.getElementById("dd8").style.backgroundColor="#F7DBF5";
}
function over9(){
document.getElementById("dd9").style.backgroundColor="#D0D0D0";
}
function out9(){
document.getElementById("dd9").style.backgroundColor="#F7DBF5";
}
function over10(){
document.getElementById("dd10").style.backgroundColor="#D0D0D0";
}
function out10(){
document.getElementById("dd10").style.backgroundColor="#F7DBF5";
}
function over17(){
document.getElementById("d17").style.backgroundColor="#D0D0D0";
}
function out17(){
document.getElementById("d17").style.backgroundColor="#F7DBF5";
}
function over18(){
document.getElementById("d18").style.backgroundColor="#D0D0D0";
}
function out18(){
document.getElementById("d18").style.backgroundColor="#F7DBF5";
}
function over19(){
document.getElementById("d19").style.backgroundColor="#D0D0D0";
}
function out19(){
document.getElementById("d19").style.backgroundColor="#F7DBF5";
}
function over110(){
document.getElementById("d110").style.backgroundColor="#D0D0D0";
}
function out110(){
document.getElementById("d110").style.backgroundColor="#F7DBF5";
}
</script>
<style>
body {
background-color: #F7DBF5;
font-size: 16px;
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #000000;
}
a:active {
text-decoration: none;
color: #000000;
font-size: 24px;
}
.div1{
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="t1" style="width: 100%;height: 30px;">
<div class="t11" style="float:left;width: 20%;height: 30px;"><img src="光遇logo/光111112.png" width="62%" height="30px" alt=""/></div>
<div class="t13" style="float:left;width: 30%;height: 30px;"><input type="text" placeholder="请输入查询内容" style="width: 68%;height: 28px;border-radius: 20px;">
<button>搜索</button>
</div>
<div class="t16" style="float:left;width: 10%;height: 30px;text-align: center;"><a href="项目2.1--登录.html"><img src="光遇logo/旋转.png" width="20px" height="20px;"><strong><em>登录</em></strong></a></div>
<div class="t17" id="d17" onMouseOver="over17()" onMouseOut="out17()" style="float:left;width: 10%;height: 30px;text-align: center;font-size: 24px;"><a href="项目2.1.html"><em>主页</em></a></div>
<div class="t18" id="d18" onMouseOver="over18()" onMouseOut="out18()" style="float:left;width: 10%;height: 30px;text-align: center;font-size: 24px;"><em><a href="项目2.1--世界.html">世界</a></em></div>
<div class="t19" id="d19" onMouseOver="over19()" onMouseOut="out19()" style="float:left;width: 10%;height: 30px;text-align: center;font-size: 24px;"><em><a href="项目2.1--分享.html">分享</a></em></div>
<div class="t110" id="d110" onMouseOver="over110()" onMouseOut="out110()" style="float:left;width: 10%;height: 30px;text-align: center;font-size: 24px;"><em><a href="项目2.1--留言.html">留言</a></em></div>
</div>
<hr>
<div style="clear: both"></div>
<div><img src="光遇/光遇SKY_20220604_140320_.jpg" width="100%" height="250" alt=""/></div>
<div style="clear: both"></div>
<hr>
<div style="text-align: center;font-size: 20px;">
<div style="float: left; width: 5%;height: 20px;"></div>
<div id="dd1" onMouseOver="over1()" onMouseOut="out1()" style="float: left; width: 5%;height: 25px;border-radius: 8px;"><a href="项目2.1.故事.html">故事</a></div>
<div style="float: left; width: 5%;height: 20px;"></div>
<div id="dd2" onMouseOver="over2()" onMouseOut="out2()" style="float: left; width: 5%;height: 25px;border-radius: 8px;"><a href="项目2.1.角色.html">角色</a></div>
<div style="float: left; width: 5%;height: 20px;"></div>
<div id="dd3" onMouseOver="over3()" onMouseOut="out3()" style="float: left; width: 5%;height: 25px;border-radius: 8px;"><a href="项目2.1.动作.html">动作</a></div>
<div style="float: left; width: 5%;height: 20px;"></div>
<div id="dd4" onMouseOver="over4()" onMouseOut="out4()" style="float: left; width: 5%;height: 25px;border-radius: 8px;"><a href="项目2.1.npc.html">NPC</a></div>
<div style="float: left; width: 5%;height: 20px;"></div>
<div id="dd5" onMouseOver="over5()" onMouseOut="out5()" style="float: left; width: 5%;height: 25px;border-radius: 8px;"><a href="项目2.1.道具.html">道具</a></div>
<div style="float: left; width: 5%;height: 20px;"></div>
<div id="dd6" onMouseOver="over6()" onMouseOut="out6()" style="float: left; width: 5%;height: 25px;border-radius: 8px;"><a href="项目2.1.魔法.html">魔法</a></div>
<div style="float: left; width: 5%;height: 20px;"></div>
<div id="dd7" onMouseOver="over7()" onMouseOut="out7()" style="float: left; width: 5%;height: 25px;border-radius: 8px;"><a href="项目2.1.蜡烛.html">蜡烛</a></div>
<div style="float: left; width: 5%;height: 20px;"></div>
<div id="dd8" onMouseOver="over8()" onMouseOut="out8()" style="float: left; width: 5%;height: 25px;border-radius: 8px;"><a href="项目2.1.地图.html">地图</a></div>
<div style="float: left; width: 5%;height: 20px;"></div>
<div id="dd9" onMouseOver="over9()" onMouseOut="out9()" style="float: left; width: 5%;height: 25px;border-radius: 8px;"><a href="项目2.1.任务.html">任务</a></div>
<div style="float: left; width: 5%;height: 20px;"></div>
<div id="dd10" onMouseOver="over10()" onMouseOut="out10()" style="float: left; width: 5%;height: 25px;border-radius: 8px;"><a href="项目2.1.社交.html">社交</a></div>
</div>
<div style="height: 25px;"></div>
<hr>
<div style="float: left; width: 90%;height: 760px;">
<div style="width: 100%;height: 200px;">
<div style="float: left; width: 33%;height: 200px;padding: 2px;"> <img src="光遇/0C8E378A352FDF411BAE153B13D4DAE8.jpg" width="98%" height="196px" style="border-radius: 25px;"></div>
<div style="float: left; width: 33%;height: 200px;padding: 2px;"> <img src="光遇/0CA8D03D90AF8E4168147F7E6DD5F3A6.jpg" width="98%" height="196px"style="border-radius: 25px;"></div>
<div style="float: left; width: 33%;height: 200px;padding: 2px;"> <img src="光遇/01A5E41FB3B74192F3913A1D1AA3310E.jpg" width="98%" height="196px"style="border-radius: 25px;"></div>
</div>
<div style="clear: both"></div>
<div style="width: 100%;height: 40px;">
<div class="div1" style="float: left; width: 33%;height: 40px;text-align: center;">魔法圈</div>
<div class="div1" style="float: left; width: 33%;height: 40px;text-align: center;">云巅</div>
<div class="div1" style="float: left; width: 33%;height:40px;text-align: center;">云端之上</div>
</div>
<div style="width: 100%;height: 200px;">
<div style="float: left; width: 33%;height: 200px;padding: 2px;"> <img src="光遇/1E868B264D015C5A9D8E88F58A693EBC.jpg" width="98%" height="196px"style="border-radius: 25px;"></div>
<div style="float: left; width: 33%;height: 200px;padding: 2px;"> <img src="光遇/1E32763E8C60F9210E55D8CB74D3FE4B.jpg" width="98%" height="196px"style="border-radius: 25px;"></div>
<div style="float: left; width: 33%;height: 200px;padding: 2px;"> <img src="光遇/1FACE41CF1373F69E213037CE279608C.jpg" width="98%" height="196px"style="border-radius: 25px;"></div>
</div>
<div style="clear: both"></div>
<div style="width: 100%;height: 40px;">
<div class="div1" style="float: left; width: 33%;height: 40px;text-align: center;">雪花</div>
<div class="div1" style="float: left; width: 33%;height: 40px;text-align: center;">粉色草坪</div>
<div class="div1" style="float: left; width: 33%;height: 40px;text-align: center;">比心</div>
</div>
<div style="width: 100%;height: 200px;">
<div style="float: left; width: 33%;height: 200px;padding: 2px;"> <img src="光遇/2AA7FC7CF7695B3F206A5F1C30B4E0BD.jpg" width="98%" height="196px"style="border-radius: 25px;"></div>
<div style="float: left; width: 33%;height: 200px;padding: 2px;"> <img src="光遇/3C1698F74624B7DA7C2E8C5A24301F83.jpg" width="98%" height="196px"style="border-radius: 25px;"></div>
<div style="float: left; width: 33%;height: 200px;padding: 2px;"> <img src="光遇/2F7A26333BCDFB09B03EAECD375F3609.jpg" width="98%" height="196px"style="border-radius: 25px;"></div>
</div>
<div style="clear: both"></div>
<div style="width: 100%;height: 40px;">
<div class="div1" style="float: left; width: 33%;height: 40px;text-align: center;">先祖的庆祝</div>
<div class="div1" style="float: left; width: 33%;height:40px;text-align: center;">追逐日落</div>
<div class="div1" style="float: left; width: 33%;height: 40px;text-align: center;">地平线</div>
</div>
</div>
<div style="float: left; width: 10%;height: 760px;">
<table width="100%" height="700px" border="0" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td><img style="border-radius: 10px;" src="光遇小图/7FEFD59A2D4A54E2DC67FE1EBC86529B.jpg" width="100%" height="80px" alt=""/></td>
</tr>
<tr>
<td><img style="border-radius: 10px;" src="光遇小图/08DFA9E798BC9D9DB8CABC36F1C31143.jpg" width="100%" height="80px" alt=""/></td>
</tr>
<tr>
<td><img style="border-radius: 10px;" src="光遇小图/037F341DC8407E1ABF28852378D06A7E.jpg" width="100%" height="80px" alt=""/></td>
</tr>
<tr>
<td><img style="border-radius: 10px;" src="光遇小图/449D863D18E38886C15E1B74B5879313.jpg" width="100%" height="80px" alt=""/></td>
</tr>
<tr>
<td><img style="border-radius: 10px;" src="光遇小图/494DDC84C6AEDF56D616E645E2A86956.jpg" width="100%" height="80px" alt=""/></td>
</tr>
<tr>
<td><img style="border-radius: 10px;" src="光遇小图/603EB2C877AA3BE2E7CAFD2F2D483B04.jpg" width="100%" height="80px" alt=""/></td>
</tr>
<tr>
<td><img style="border-radius: 10px;" src="光遇小图/A7FDA4789F243A72635F4AEC29E9FDE5.jpg" width="100%" height="80px" alt=""/></td>
</tr>
</tbody>
</table></div>
<hr>
<div style="clear: both"></div>
<div style="text-align: center;font-size: 20px;width:100%;">
<p>在一座失落的云中王国。</p>
<p>有一群光之子民居住于此，光明与黑暗在王国中和谐共存着。</p>
<p>然而渐渐地，光与暗的平衡发生了倾斜，王国也因此没落。</p>
<p>只流传下来这样的一条预言：“在不久的未来会有一群孩子归来，把光明带回这个国度” </p>
<p><img src="光遇/微信图片_202206032308374.jpg" width="100%" height="443" alt=""/></p>
</div>
<div style="clear: both"></div>
<hr>
<div style="text-align: center;border:1px solid;">
<p>此网站为个人网站，如有雷同请联系修改删除！</p>
<p>学校：长沙民政职业技术学院</p>
<p>专业： 软件开发</p>
<p>作者：李宏坤</p>
<p>QQ:2403187677</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<script>
function log(){
var a1=document.getElementById("zh").value;
if(a1==""){
alert("账号为空，请输入账号！")
}
var a2=document.getElementById("mm").value;
if(a2==""){
alert("密码为空，请输入密码！")
}
if(a1=="csmzxy"&&a2=="123456"){
alert("登录成功")
window.location.href="项目2.1.html";
}else{
alert("账号或密码输入错误，请重新输入！")
}
}
function over17(){
document.getElementById("d17").style.backgroundColor="#D0D0D0";
}
function out17(){
document.getElementById("d17").style.backgroundColor="#FFFFFF";
}
</script>
<style>
body{
background:#B1E4EC;
}
.log{
width: 180px;
height: 30px;
border-radius: 10px;
border: 0;
background:#FFFFFF;
opacity: 0.5;
}
.dl{
width: 80px;
height: 40px;
border-radius: 10px;
border: 0;
opacity: 0.8;
}
.dhh{
background-image: url("光遇小图/81DA553AA60C6A5F1C07AA76CD061028.jpg");
background-size: 100% 100%;
}
</style>
</head>
<body>
<div><marquee behavior="scroll" direction="left" scrollamount="6">
<font color=#FF0004 size="5px">注意网络安全，谨防盗号软件！</font>
</marquee></div>
<div style="position: relative;width:100%;height: 760px;">
<div class="dhh" style="width: 400px;height: 350px;left: 50%;top: 50%; position: absolute; transform: translate(-50%,-50%);border-radius: 30px;">
<div style="text-align: center;">
<p> </p>
<p> </p>
<p><span>账号：</span>
<input class="log" id="zh" type="text" placeholder="请输入账号">
</p>
<p><br>
<span>密码：</span>
<input class="log" id="mm" type="text" placeholder="请输入密码">
</p>
<p> </p>
</div>
<div style="text-align: center;"><button class="dl" id="d17" onClick="log()" onMouseOver="over17()" onMouseOut="out17()">登录</button></div>
</div>
</div>
</body>
</html>
代码文件较多，以文件上传，主页已发布，可自行获取！
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)