【网页设计】期末大作业html+css (个人生活记录介绍网站）

news2025/7/8 18:33:13

🎉精彩专栏推荐👇🏻👇🏻👇🏻
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、🌐网站演示
  • 五、🔧 网站代码
    • 🧱HTML结构代码
    • 💒CSS样式代码
  • 六、🥇 如何让学习不再盲目
  • 七、🎁更多干货

一、👨‍🎓网站题目

🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。

二、✍️网站描述

⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。

🏅 一套A+的网页应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成。
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转。
  5. 要有JS特效，如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。。
  7. 页面清爽、美观、大方，不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

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

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

四、🌐网站演示

在这里插入图片描述
在这里插入图片描述

五、🔧 网站代码

🧱HTML结构代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>个人主页</title>
    <!-- CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/blog.css" rel="stylesheet">
  </head>
  <body>
    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="index.html">首页</a>
          <a class="blog-nav-item" href="index.html#part1">生活</a>
          <a class="blog-nav-item" href="index.html#part2">动漫</a>
          <a class="blog-nav-item" href="index.html#part3">技术</a>
		  <a class="blog-nav-item" href="blog.html">主页</a>
		  
        </nav>
      </div>
    </div>
	<div class="intr">
    	<span class="avtar"></span>
        <p class="peointr">世界那么大 我想去看看</p>
        <p class="peointr">爱生活，爱旅行，爱技术。喜欢喧闹繁华，也喜欢安静的一人独处</p>
		<p class="peointr">个人博客：http://www.lzqcode.com</p>
    </div>
    <div class="title" id="part1">爱生活</div>
   <div class="content">
    	<div class="pic pic1">
       <img src="picture/h1.jpg" alt="">    		
          <p>家乡-笔锋塔下</p>
    	</div>
    	<div class="pic pic2">
    		<img src="picture/h2.jpg" alt="">
    		<p>家乡-襄河河畔</p>
    	</div>
    	
<div class="pic pic3">
    		<img src="picture/h3.jpg" alt="">
    		<p>家乡-太平桥岸</p>
    	</div>
<div class="pic pic3">
    		<img src="picture/h4.jpg" alt="">
    		<p>家乡-太平桥岸</p>
    	</div>
<div class="pic pic3">
    		<img src="picture/h5.jpg" alt="">
    		<p>家乡-太平桥岸</p>
    	</div><div class="pic pic3">
    		<img src="picture/h6.jpg" alt="">
    		<p>家乡-太平桥岸</p>
    	</div>
    </div>
    <div class="title" id="part2">爱动漫</div>
    <div class="content">
    	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
              </ol>
              <div class="carousel-inner" role="listbox">
                <div class="item active">
                  <img src="picture/s1.jpg" alt="...">
                </div>
                <div class="item">
                  <img src="picture/s2.jpg" alt="...">
                </div>
				<div class="item">
                  <img src="picture/s3.jpg" alt="...">
                </div>
              </div>
              <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
    </div>
	<div class="title" id="part3">爱技术</div>
    <div class="content">
        <ul class="nav nav-tabs" role="tablist">
          <li class="active"><a href="#home" role="tab" data-toggle="tab">Web前端</a></li>
          <li><a href="#profile" role="tab" data-toggle="tab">JAVA</a></li>
          <li><a href="#messages" role="tab" data-toggle="tab">Python</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="home">
          	<p class="text">前端开发是创建Web页面或app等前端界面呈现给用户的过程</p>
            <p class="text">通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案</p>
            <p class="text">来实现互联网产品的用户界面交互</p>
            <p class="text">HTML5，node.jS的广泛应用，各类框架类库层出不穷。</p>
			<p class="text">个人博客：http://www.lzqcode.com</p>
          </div>
          <div class="tab-pane" id="profile">
          	<p class="text"> Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念</p>
            <p class="text">因此Java语言具有功能强大和简单易用两个特征</p>
            <p class="text">Java语言作为静态面向对象编程语言的代表，</p>
			<p class="text">极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</p>
			<p class="text">个人博客：http://www.lzqcode.com</p>
          </div>
          <div class="tab-pane" id="messages">
          	<p class="text">Python是一种跨平台的计算机程序设计语言。 </p>
            <p class="text">是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。</p>
            <p class="text">最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越多被用于独立的、大型项目的开发。</p>
			
			<p class="text">个人博客：http://www.lzqcode.com</p>
          </div>
        </div>
    </div>
    <div class="blog-footer">
      <p><a href="#" target="_blank">粤ICP备111600号-1</a></p>
		<p class="text-center"><img src="picture/beianicon.png" alt="" style="display:inline-block;vertical-align:sub;margin-right:5px"><a href="#" target="_blank">QQ1435469178</a></p>
		<p class="text-center">个人博客：http://www.lzqcode.com</p>
    </div>
    <a href="index.html" class="btt">顶部</a>
    <!-- Js-->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugin.js"></script>
  </body>
</html>

💒CSS样式代码


/*
 * Globals
 */

body {
  font-family: 'Microsoft Yahei','微软雅黑',Arial,'Hiragino Sans GB','宋体';
  color: #555;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #333;
}


/*
 * Override Bootstrap's default container.
 */

@media (min-width: 1200px) {
  .container {
    width: 970px;
  }
}


/*
 * Masthead for nav
 */

.blog-masthead {
  background-color: #019875;
  position:fixed;
  width: 100%;
  z-index:999;
  /*-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
          box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);*/
}

/* Nav links */
.blog-nav-item {
  position: relative;
  display: inline-block;
  padding: 10px;
  font-weight: 500;
  color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
  color: #fff;
  text-decoration: none;
}

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习 。

七、🎁更多干货

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

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

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

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/6830.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CNC程序管理NC文件版本管理CNC程序生命周期管理NC程序版本管理

CNC程序管理NC文件版本管理CNC程序生命周期管理NC程序版本管理

CNC程序管理NC文件版本管理CNC程序生命周期管理NC程序版本管理 ROZRZ 数控程序文档流程管理系统能够实现 NC 数控程序文档及流程的管理&#xff0c;且为企业日后能够进行整体生产资料信息的综合管理做好了在程序代码方面的数据准备&#xff0c;提供了更为方便、快捷、安全的系…
阅读更多...
Java——后端开发经验总结（持续更新中）

Java——后端开发经验总结（持续更新中）

目录 一、判断实体类 二、图片无法正常显示 三、图片路径存储问题 四、xml注释 五、常用快捷键使用 每日三问 重要配置 一、判断实体类 Assert.notNull&#xff1a; 断言某个值是否为空 优点&#xff1a;告别了if判断为空。缺点&#xff1a;场景比较单一&#xff0c;基本…
阅读更多...
【JavaSE】继承那些事儿

【JavaSE】继承那些事儿

目录 1. 继承 1.1 为什么要有继承 1.2 何为继承 1.3 继承的语法 1.4 父类成员的访问 1.4.1 子类中访问父类的成员变量 1.4.2 子类中访问父类的成员方法 1.5 super 关键字 1.5.1 super 关键字能让子类访问父类同名成员变量及方法 1.5.2 super 关键字在子类构造方法所起的作用 1…
阅读更多...
STC51单片机21——EEPROM测试

STC51单片机21——EEPROM测试

STC89C51RC系列单片机内部EEPROM详细地址表&#xff1a; 第一扇区 第二扇区 第三扇区 第四扇区 起始地址 结束地址 起始地址 结束地址 起始地址 结束地址 起始地址 结束地址 2000h 21FFh 22…
阅读更多...
node.js的pat/fs/events模块以及磁盘遍历的实现

node.js的pat/fs/events模块以及磁盘遍历的实现

path模块: 概述: path模块是一个内置模块,他里面内置的相关方法来造作的路径地址 导入path模块: const path require(path) 使用方法: //导入对应的path模块 const pathrequire(path) //相关方法 //1.join方法是将多个相关的地址连接成一个地址 (做路径拼接) let pathStrpath…
阅读更多...
2022年下半年系统架构设计师下午真题及答案解析

2022年下半年系统架构设计师下午真题及答案解析

试题一(25分) 某电子商务公司拟升级其会员与促销管理系统&#xff0c;向用户提供个性化服务&#xff0c;提高用户的粘性。在项目立项之初&#xff0c;公司领导层一致认为本次升级的主要目标是提升会员管理方式的灵活性&#xff0c;由于当前用户规模不大&#xff0c;业务也相对…
阅读更多...
2022年数维杯国际大学生数学建模挑战赛开赛公告

2022年数维杯国际大学生数学建模挑战赛开赛公告

各参赛队伍&#xff1a; 为了保证2022年数维杯国际大学生数学建模挑战赛参赛队伍顺利参赛&#xff0c;现将竞赛开赛的相关事项通知如下&#xff1a; 一、时间节点 报名截止时间&#xff1a;北京时间2022年11月17日06:00&#xff08;周四&#xff09; 竞赛开始时间&#xff…
阅读更多...
大半夜排查bug：竟然是同事把Redis用成这鬼样子，坑了我

大半夜排查bug：竟然是同事把Redis用成这鬼样子，坑了我

首先说下问题现象&#xff1a;内网sandbox环境API持续1周出现应用卡死&#xff0c;所有api无响应现象。 刚开始当测试抱怨环境响应慢的时候 &#xff0c;我们重启一下应用&#xff0c;应用恢复正常&#xff0c;于是没做处理。但是后来问题出现频率越来越频繁&#xff0c;越来越…
阅读更多...
VSCode常用插件

VSCode常用插件

目录1. 简体中文2. git3. 项目文件夹管理4. 文件图标主题5. markdown6. 主题7. Rest API 客户端1. 简体中文 Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code 2. git GitLens — Git supercharged 3. 项目文件夹管理 Project Manager&#xff0c;帮助…
阅读更多...
MySQL增删改查语句练习（grade表，student表，subjects表，result表）

MySQL增删改查语句练习（grade表，student表，subjects表，result表）

目录 问题描述 问题分析 1. 添加操作 2. 修改操作 3. 删除操作 问题实现 1. 添加测试数据 2. 根据题目要求完成crud操作 1. 将地址是西安市的更新为西安科技二路 2. 将S1001的email修改为空的字符串 3. 将第二门课的名字更新为 java基础&#xff0c;课时为60 &#…
阅读更多...
基于ssm的固定收益营销系统设计与实现（ERP系统）

基于ssm的固定收益营销系统设计与实现（ERP系统）

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…
阅读更多...
5进程创建FORK

5进程创建FORK

文章目录1. fork函数初识2. fork函数返回值1. fork函数初识 fork函数的作用从已存在的进程中创建一个新的进程,而新进程被称为子进程,原进程称为父进程,我们先看一下当执行fork后会发生什么. 分配新的内存块和内核数据结构给子进程将父进程部分数据结构内容拷贝至子进程添加子…
阅读更多...
数据库管理系统

数据库管理系统

简介 数据库管理系统是一种操纵和管理数据库的大型软件&#xff0c;用于建立、使用和维护数据库&#xff0c;简称 DBMS。它对数据库进行统一的管理和控制&#xff0c;以保证数据库的安全性和完整性。[2] 数据库管理系统是一个能够提供数据录入、修改、查询的数据操作软件&…
阅读更多...
MySQL约束和表的复杂查询操作

MySQL约束和表的复杂查询操作

✨博客主页: 心荣~ ✨系列专栏:【MySQL】 ✨一句短话: 难在坚持,贵在坚持,成在坚持! 文章目录一. 数据库约束1. 数据库常用约束2. not null 约束3. unique约束4. default设置默认值5. primary key约束6. 分库分表下的自增主键7. foreign key约束8. 主键,外键,uniqe运用原理二. …
阅读更多...
Android App开发中使用Glide加载网络图片讲解及实战（附源码 简单易懂）

Android App开发中使用Glide加载网络图片讲解及实战（附源码 简单易懂）

运行有问题或需要源码请点赞关注收藏~~~ 一、使用Glide加载网络图片 对于如何方便快速的显示网络图片&#xff0c;谷歌开发了自己的Glide开源库&#xff0c;同样我们需要在bulid.gradle中引入如下依赖 implementationcom.github.bumptech.glide:glide:4.11.0 Glide用法如下 G…
阅读更多...
攻防世界-misc-流量分析1

攻防世界-misc-流量分析1

下载附件&#xff0c;获得一个流量包 wireshark打开 随便选择一个&#xff0c;追踪tcp流 把请求包url解码看看是什么操作 还存在url编码&#xff0c;继续解码 GET /index.php?urlgopher://127.0.0.1:80/_POST /admin.php HTTP/1.1 Host: localhost:80 Connection: close Conte…
阅读更多...
SpringBoot+@Validated实现参数验证(非空、类型、范围、格式等)-若依前后端导入Excel数据并校验为例

SpringBoot+@Validated实现参数验证(非空、类型、范围、格式等)-若依前后端导入Excel数据并校验为例

场景 若依管理系统前后端分离版基于ElementUI和SpringBoot怎样实现Excel导入和导出&#xff1a; 若依管理系统前后端分离版基于ElementUI和SpringBoot怎样实现Excel导入和导出_霸道流氓气质的博客-CSDN博客 SpringBootVue实现excel导入带格式化的时间参数(moment格式化明天日…
阅读更多...
使用image-map编写校区平面示意图

使用image-map编写校区平面示意图

一、效果图 先上一波效果图&#xff0c;手机录制 二、项目中用到的图片 呐&#xff0c;最近领导让俺帮某学校做一个校区平面示意图的移动端项目&#xff0c;用到的图片就是这样的&#xff0c;不过这是截的图片&#xff0c;放大后会模糊&#xff0c;项目中真正使用的图片有6…
阅读更多...
HazelEngine 学习记录 - Profiling

HazelEngine 学习记录 - Profiling

Profiling Intro To Profiling 为了能够清晰的观察整个引擎的性能消耗情况&#xff0c;我们需要一个可视化的工具来进行性能分析&#xff0c;例如 Unity 的内置 Profiler&#xff1a; 其实本质就是将每个函数运行的时间进行可视化&#xff0c;这里我们借用标准库 chrono 来进…
阅读更多...
笔记本电脑没有声音如何解决

笔记本电脑没有声音如何解决

​笔记本电脑没有声音的现象&#xff0c;也是笔记本电脑的常见运用病况之一,遇到这种情况的话,大家是否知道如何处理呢?下面小编来跟大家说说笔记本电脑没有声音解决方法&#xff0c;希望可以帮助到大家。 工具/原料&#xff1a; 系统版本&#xff1a;windows10系统 品牌型…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023