773. 大学生HTML期末大作业 ―【漫画风格个人简历响应式自适应网页(1页)】 Web前端网页制作 html5+css3+js

仙女网页制作

已于 2025-03-29 13:05:28 修改

阅读量1.3k

点赞数 21

CC 4.0 BY-SA版权

分类专栏： Web网页设计实例简历文章标签：前端 html 课程设计 html5 css3 jquery javascript

于 2025-02-28 16:21:38 首次发布

本文链接：https://blog.csdn.net/A240307/article/details/145931585

Web网页设计实例同时被 2 个专栏收录

826 篇文章

订阅专栏

简历

9 篇文章

订阅专栏

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html5+css3+js：瀑布流布局、图片轮翻、无缝滚动插件、文字滑动特效、留言表单等。响应式自适应网页，可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含1个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>黑夜主权(Night)</title>

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-app-capable" content="yes">
<meta name="apple-mobile-app-status-bar-style" content="black">

<meta name="description" content="一只叫做黑夜的阿宅，想成为家喻户晓的大侠">
<meta name="keywords" content="二次元，宅属性，前端，编程，全栈，绘画，设计">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="cononico">
<meta name="application-name" content="Cononico" >

...

2.CSS

代码如下（节选示例）：

/* reset */
*{
margin:0;
padding:0;
list-style-type:none;
font-family: 'Microsoft Yahei', '宋体', arial, 'Hiragino Sans GB', Helvetica;
}

label{
cursor:pointer;
}

img{
vertical-align:middle;
}

table{
empty-cells:show;
border-collapse:collapse;
border-spacing:0;
}

abbr,acronym{
border:0;
font-variant:normal;
}

address,caption,cite,code,dfn,em,th,var,optgroup{
font-style:normal;
font-weight:normal;
}

input,button,textarea,select,optgroup,option{
font-family:inherit;
font-size:inherit;
font-style:inherit;
font-weight:inherit;
}

input,button,textarea,select{
*font-size:100%;
}

a,img{
border:0;
}

a,a:visited,a:hover{
color:#5e5e5e;
text-decoration:none;
}

.clear{
clear: both;
}

/*main*/
body{
background-color: #ffffff;
width: 100%;
}

.head{
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
background-color: #f3f7fa;
height: 70px;
filter:alpha(opacity=90);
-moz-opacity:0.9;
opacity:0.9;
-khtml-opacity: 0.9;
}

.logo_img{
width: 45px;
height: 45px;
border-radius: 50%;
border: 2px solid #ffffff;
margin-bottom: 15px;
}

...

3.JS

代码如下（节选示例）：

/*
*原型轨迹
*/
var gitMove = document.getElementById('github_a');
var weiboMove = document.getElementById('weibo_a')
var blogMove = document.getElementById('blog_a')
var g_num = 0;
var w_num = 0;
var b_num = 0;
function movegit(){
if(g_num <= 750){
// gitMove.css({"left":x_arr[g_num] + "px","top":y_arr[g_num]+"px"});
gitMove.style.left = x_arr[g_num] + 'px';
gitMove.style.top = y_arr[g_num] + 'px';
g_num += 3;
}
else{
clearInterval(gitTimer);
}
}

movegit();
var gitTimer=setInterval(movegit,1);
moveweibo();
var weiTimer=setInterval(moveweibo,1);
moveblog();
var blogTimer=setInterval(moveblog,1);

...