作者主页: 【主页——获取更多优质源码】
前端专业学期最后的项目任务：【包含千个优质实践范本的毕业设计作品集】
程序员独特的示爱方法：运用HTML打造七夕情侣专属网页，共计110种设计款式可供选择
令人惊叹的巨幕图形界面代码：包括海量数据平台图形化呈现方案，共计一百五十套完整设计
免费且实用的WEB前端学习指南：
这位作者曾经担任过研发工程师，技术团队的负责人，以及教学领域的负责人；在2016年和2020年，他两次被评选为CSDN年度十大博客之星的殊荣。尽管经历了十年的岁月磨砺，他的热情依然不减；虽然多年过去，周围环境发生了许多变化，但他本人依然保持着最初的模样。然而，他对技术的探索精神和追求从未放松过。他一直坚持创作自己的内容，并且乐于与他人分享心得，这份初心始终没有改变，他正继续着前行的道路！
一、网站题目
个人主页的规划与实现，个人履历的编排与生成，基础静态HTML个人主页的创作，个人情况展示网站模型的构建，相关网络项目的开发与完成。
二、️网站描述
个人主页的版式规划运用了DIV与CSS技术构建，该网页包含多个独立板块，例如：关于我的部分以文字为主，展示作品集采用图片排列形式，个人专长板块融合了文字与图片元素，互动交流区域则设有表单功能，整体页面布局遵循左右结构，特别定制了页面底图，导航栏各项目背景色彩各异，且与对应页面的底色形成协调搭配。
一套A+的网页应该包含 (具体可根据个人要求而定)
页面由页头、菜单导航栏、主体内容区、页脚四个主要部分构成。各个页面之间可以互相链接，能够访问到三级页面，总共包含5到10个页面。页面整体风格保持一致，布局清晰，显示规范，没有错位现象，采用Div+Css技术实现。菜单设计既美观又突出，二级菜单能够正常展开和跳转。页面包含特效，例如图片轮播功能支持自动更换和手动切换。页面包含多种媒体内容，例如动态图片、音视频文件，以及表单交互功能，整体设计简洁、视觉舒适、风格统一，没有陈旧感，既要有效展示用户所需信息，也要确保结构合理、界面赏心悦目、色彩搭配和谐、呈现手法丰富多样，三、网站介绍
在页面构造上，打算使用当前普遍应用的、能够适配众多常用浏览器的、视觉效果始终如一的流式网页构造方案。
网站程序方面，将运用当前最前沿的网页构建技术HTML5结合CSS3和，来实现网站各项功能的具体构建。同时，要保证网站编写好的代码能够适配当前市场上所有的主流浏览器，以便用户在访问时能够立刻看到网站的实际呈现效果。
网站素材处理方面：准备从多个渠道搜集精美的视觉素材，再从中挑选出符合网页设计调性的图片，接着借助图像处理软件调整图片尺寸以适配网页展示需求。
网站文件相关事项：系统文件涵盖多种类型，具体包括构成网页的标记文档，定义页面外观的样式文档，实现网页动态效果的脚本文档，以及用于展示的图像文档。
网页制作方面：网页成品代码基础，能够借助任何HTML设计工具（包括：、 、 、 、文本编辑器、++ 等各类HTML设计工具实施执行、更改调整等动作）。
其中：
这个文档里有个index.html，它算主页面，别的html都是附属页面。
这个css文件里面涵盖了所有页面的外观设定，也负责文字的动态滚动效果，并且包含了图片的放大处理功能。
这个js文件里包含了动态切换图片的功能, 接收表单数据, 响应用户点击动作等内容, 这些功能在一些网页上会用到这个js文件。
四、网站演示
五、 网站代码 HTML结构代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Logintitle>
<style>
*{
margin:0px;
padding:0px;
}
body{
background: url(images/1.jpg) no-repeat;
background-size:100% 750px;
}
.first{
width:1500px;
height:720px;
position:relative;
}
.oo{
position:absolute;
left:210px;
top:260px;
width:700px;
height:200px;
}
.title {
/*position: absolute;
left: 360px;
top: 300px;*/
color: #fff;
font-size: 50px;
font-weight: 500;
}
.titles {
/*position: absolute;
left: 400px;
top: 350px;*/
margin-left:280px;
margin-top:30px;
color: #fff;
font-size: 38px;
font-weight: 500;
}
li {
list-style-type: none;
}
.tab {
position:absolute;
right:200px;
top:140px;
width: 500px;
height:450px;
边框宽度为壹单位，采用实线样式，颜色值为#dcdcdc
border-radius: 10px;
}
.tab_list {
height: 35px;
}
.tab_list li {
float: left;
height: 35px;
line-height: 35px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
border-radius: 10px;
color: #fff;
}
.submit {
position: absolute;
top:35px;
width: 500px;
height: 415px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
color: #fff;
}
.form_title {
text-align: center;
margin-top: 40px;
font-size: 18px;
}
.form_input {
padding:20px 50px;
margin-top: 30px;
}
.inputs {
height: 40px;
width: 300px;
border-radius: 5px;
border: none;
background-color: #eee;
color: #666;
padding-left: 20px;
}
.form_input span {
width: 85px;
align-self: center;
}
.btn_submit {
align-self: center;
}
.btn {
border: none;
width: 350px;
height: 40px;
color: #fff;
margin-left:80px;
margin-top:500px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
margin-top: 40px;
}
.btn:hover {
background: #999;
}
.back {
margin-left: 10px;
}
.home_href {
margin:60px;
border: none;
width: 300px;
height: 40px;
color: #fff;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
}
.baidu {
float:left;
margin:60px;
overflow: hidden;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img {
width: 100px;
}
style>
head>
<body>
<ul class="baidu">
<li><img src="images/1.jpg">li>
<li><img src="images/2.jpg">li>
<li><img src="images/3.jpg">li>
<li><img src="images/4.jpg">li>
ul>
<div class="one">
<div class="oo">
<h3 class="title">欢迎来到班级网站h3>
<h3 class="titles">今天也要加油鸭h3>
div>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">登录li>
<li>注册li>
ul>
div>
<div class="tab_con">
<div class="submit" style="display: block;">
<div class="form_input">
<span>账号：span>
<input class="inputs" type="text" value="居居">
div>
<div class="form_input" >
<span>学号：span>
<input class="inputs" type="text" value="200197454548754">
div>
<input type="checkbox" style="margin-left:80px;margin-top:10px">
<label for="" >自动登录label>
<a href="" style="float:right;margin-right:90px;margin-top:10px;color:#fff;text-decoration: none">忘记密码?a>
<div class="btn_submit">
<a href="./home.html">
<button class="btn">登录button>
a>
div>
div>
div>
div>
<div class="submit" style="display: none;right:200px;top:160px">
<div class="form_input" style="padding:0px 50px;">
<span>账号：span>
<input class="inputs" type="text" value="居居">
div>
<div class="form_input" style="padding:0px 50px;">
<span>姓名：span>
<input class="inputs" type="text" value="余月">
div>
<div class="form_input" style="padding:0px 50px;">
<span>学号：span>
<input class="inputs" type="text" value="200197454548754">
div>
<div class="form_input" style="padding:0px 50px;">
<span>班级：span>
<input class="inputs" type="text" value="大数据191">
div>
<div class="btn_submit">
<a href="" class="ok">
<button class="btn">注册button>a>
div>
div>
div>
div>
<script>
// 获取元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.submit');
// for循环绑定点击事件
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
那个界面里的功能区域，选择某个条目时，该条目的背景会变成红色，其他条目则保持原样，这是为了突出当前选中的部分，其余功能区域不受影响，通过调整元素的样式来实现这种效果，具体做法是修改对应元素的类名属性
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
}
}
var bb = document.querySelector('.ok');
bb.onclick = function() {
alert('注册成功，请返回登录！！');
}
// 1. 获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// console.log(imgs);
// 2. 循环注册事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
图片的来源地址就是我们选取该图片时获得的路径,例如,images/2.jpg
// console.log(this.src);
// 把这个路径 this.src 给body 就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
script>
body>
html>
六、 如何让学习不再盲目
刚接触编程的新手，即便掌握了基本规则，也常不清楚这些规则的实际作用，不明白怎样才能让知识更牢固，也不懂得如何不断进步，在这种情况下，每天主动找些题目来练习就特别关键，这就像不断磨练最终变得精通，可以去牛客网上的编程新手基础训练。这个专题面向编程初学者，适合刚掌握语法的人练习，题目包含编程基础和基本框架，每道题目提供两种模式，可以模拟真实考试环境，也能够在练习状态下进行操作。
扫一扫在手机端查看
-
Tags : 班级网站
我们凭借多年的网站建设经验，坚持以“帮助中小企业实现网络营销化”为宗旨，累计为4000多家客户提供品质建站服务，得到了客户的一致好评。如果您有网站建设、网站改版、域名注册、主机空间、手机网站建设、网站备案等方面的需求，请立即点击咨询我们或拨打咨询热线： 13761152229，我们会详细为你一一解答你心中的疑难。
客服1 