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

最新推荐文章于 2024-06-02 22:09:45 发布

web网站建设

最新推荐文章于 2024-06-02 22:09:45 发布

阅读量1k

点赞数

分类专栏：网页设计与制作文章标签： dreamweaver html静态网页 web前端 html期末大作业 web课程与设计

本文链接：https://blog.csdn.net/qq_38512571/article/details/127298447

版权

网页设计与制作专栏收录该内容

1187 篇文章 97 订阅

订阅专栏

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

二、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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;
}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

web网站建设

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
2022年大一学生网页期末作业（纯html+css实现）

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
复制链接

扫一扫