2022年大一学生网页期末作业（纯html+css实现）

本文主要是介绍2022年大一学生网页期末作业（纯html+css实现），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍
三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

A37BG 图图影视影院5页无js 带视频带报告4700字

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<link href="../css/login.css" type="text/css" rel="stylesheet" />
</head>
<body>
<img src="../image/登录背景图.gif" >
<form action="#" method="post"><p><span>账号:</span><input type="text" name="username" class="num" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15)$"/></p><p><span>密码:</span><input type="password" name="pwq" class="pass" pattern="^[a-zA-Z]\w{5,17)$"/></p><p><a href="tutu1.html"><button onclick="alert('亲亲亲，登陆成功。')" class="btn01" >登录</a></button></p><p class="zhanghao"><a href="#">还未账号？立即注册</a></p>
</form><p><a href="#">商务合作邮箱：xxx@qq.com</a> <a href="#">客服电话：xxx</a > &nbsp;<a href="#">违法和不良信息举报电话：xxx</a></p><p><a href="#">xxx</a></p><p><a href="#">图图影视影院</a> </p>
</body>
</html>

🏠CSS样式代码

body{font-size:18px;font-family:"微软雅黑";color:#FFF;position:relative;
}
img{width:100%;height:100%;
}
form,p{padding:0; margin:0; border:0;
}
a{text-decoration:none;color:#000;
}
a:hover{color:#F00;
}
form{width:420px;height:200px;padding-top:60px;margin:250px auto;border-radius:20px;border:2px solid rgba(0,0,255,0.6);position:absolute;top:20px;left:450px;background:url(../image/%E7%99%BB%E5%BD%95%E8%83%8C%E6%99%AF%E5%9B%BE.jpg) no-repeat;opacity:0.9;background-size:100% 100%;
}
p{margin-top:15px;text-align:center;
}
p span{width:60px;display:inline-block;text-align:right;
}
.num,.pass{width:165px;height:18px;border:1px solid rgba(255,255,255,0.3);padding:2px 2px 2px 22px;border-radius:5px;color:#FFF;
}
.num{background:url(../image/%E7%99%BB%E5%BD%95.png) no-repeat;background-size:10%;
}
.pass{background:url(../image/%E5%AF%86%E7%A0%81.png) no-repeat;background-size:10%;
}
.btn01{width:190px;height:25px;border-radius:3px;border:2px solid #FFF;margin-left:65px;background:#57b2c9;color:#FFF;border:none;
}
.zhanghao{width:300px;height:100px;position:absolute;left:200px;bottom:-70px;font-size:12px;
}