HTML学生个人网站作业设计 学生大学生活网页设计作品 学生个人网页模板 简单个人主页成品 div+css个人网页制作

news/2024/5/18 23:57:31/文章来源:https://blog.csdn.net/qq_38517811/article/details/127219699

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


📂文章目录

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


二、📚网站介绍

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

📓网站程序方面:计划采用最新的网页编程语言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.视频演示

I50SJ-个人作品网页带psd三级页面(8页)

🧩 2.图片演示

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


四、💒 网站代码

🧱HTML结构代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="web"><div class="top"><div class="topbg"><div class="topner"><div class="logo"><img src="images/logo.png" /></div><div class="nav"><ul><li><a href="index.html"><h1>首页</h1><p>INDEX</p></a></li><li><a href="rizhi.html"><h1>日志</h1><p>JOURNAL</p></a></li><li><a href="zuopin.html"><h1>作品</h1><p>WORKS</p></a></li><li><a href="jianjie.html"><h1>个人简介</h1><p>INTRO</p></a></li><li><a href="lianjie.html"><h1>友情链接</h1><p>LINK</p></a></li></ul></div></div></div></div><!-----------main---------------><div class="main"><div class="sbox1"><div class="title"><h1>个人简介</h1><div class="xian"></div><p>PERSONAL PROFILE</p></div><div class="ner"><div class="left"><div class="lef"><h1>德玛西</h1><h2>视觉传达设计专业学生</h2><p>擅长:摄影、平面设计、</p><p>&nbsp;&nbsp;&nbsp;&nbsp;手绘、UI设计......</p><div class="more"><a href="#">查看更多</a></div></div><div class="rig"><img src="images/simg2.jpg" /></div></div><div class="right"><h1>关于我的</h1><div class="wenz">我是一个西南财经大学天府学院艺术设计学院的大四学生,所学的专业是视觉传达设计,喜欢摄影、手绘和UI设计......</div><div class="tubiao"><img src="images/img1.png" /><img src="images/img2.png" /><img src="images/img3.png" /><img src="images/img4.png" /><img src="images/img5.png" /></div></div></div></div><div class="sbox2"><div class="title"><h1>技术交流</h1><div class="xian"></div><p>TECHNICAL EXCHANGE</p></div><div class="ner"><div class="left"><img src="images/simg3.jpg" /><h1>如何做好网页设计</h1><h2>2019-10-16 发布</h2><p>页面整体和谐了,给浏览者是一个畅快舒服的感觉。要有整体大局的眼光,不去拘泥于局部或细小的地方。根据色彩对人们心理的影响,合理运用好文字的色彩......</p></div><div class="right"><div class="bx1"><img src="images/simg4.jpg" />网页设计  ——  专业网页设计及三合一网站设计</div><div class="bx1"><img src="images/simg4.jpg" /></div><div class="bx1"></div><div class="bx1"></div><div class="bx1"><img src="images/simg4.jpg" />调色师必须了解的知识  ——  曝光度、对比度、高光、阴影、白色与黑色色阶
</div></div></div></div><div class="sbox3"><div class="title"><h1>我的日志</h1><div class="xian"></div><p>MY  BLOGS</p></div><div class="ner"><div class="left"><img src="images/simg5.jpg" /></div><div class="right"><div class="bx"><img src="images/simg6.jpg" /><div class="tit">我的广东之旅</div></div><div class="bx"><img src="images/simg7.jpg" /><div class="tit">第一站的燃手食堂</div></div><div class="bx"><img src="images/simg8.jpg" /><div class="tit">魅力广州</div></div></div></div></div><div class="sbox4"><div class="title"><a href="dongtai.html"><h1>动态</h1><div class="xian"></div><p>MY ZONE</p></a></div><div class="ner"><div class="left"><a href="bpg.html">
<img src="images/simg9.jpg" />
<h1>毕棚沟之旅</h1>
<p>第一次去毕棚沟,也第一次看到这么
多雪!有点意思,哈哈哈...</p>
<div class="dibu">四川 . 阿坝藏族羌族自治州理县<span>2019.1.28</span></div>
</a></div><div class="left right">
<img src="images/simg10.jpg" />
<h1>我的广东采风 —— 第2天</h1>
<p>虽然走了很远才到,但是今天晚上好
吃的潮汕牛肉火锅染我觉得不存在了</p>
<div class="dibu">广东 . 广州越秀区<span>2018.11.9</span></div></div></div></div><div class="sbox5"><div class="title"><h1>我的作品</h1><div class="xian"></div><p>WORKS</p></div><div class="ner"><div class=" bx1"><img src="images/simg11.jpg" /><div class="riqi">2019-6-16</div><h1>展示与陈设  李宁服装店</h1><p>查看   42  |  喜欢   12  </p><P>5位创作人   建模/设计</P></div><div class=" bx2"><img src="images/simg12.jpg" /><div class="riqi">2018-11-20  发布</div><h1>深圳湾之旅</h1><p>查看   35  |  喜欢   5  </p><P>德玛西   摄影/后期</P></div><div class=" bx1 bx3"><img src="images/simg13.jpg" /><div class="riqi">2018-6-20</div><h1>带珍珠耳环的兔子</h1><p>播放   308  |  喜欢   46   </p><P>德玛西   绘制</P></div></div><div class="gengd"><a href="#">查看更多</a></div></div></div><!-----------foot---------------><div class="foot"><div class="footer"><img src="images/logo2.png" /><a href="index.html"> 首页&nbsp;&nbsp;|</a><a href="jianjie.html">个人中心&nbsp;&nbsp;|</a><a href="rizhi.html">我的日志&nbsp;&nbsp;|</a><a href="zuopin.html">我的作品&nbsp;&nbsp;|</a><a href="lianjie.html">友情链接&nbsp;&nbsp;|</a></div></div>                        
</div>
</body>
</html>

五、🎁更多源码

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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java项目:ssh网上便利店系统

作者主页&#xff1a;夜未央5788 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 该项目分为前后台。非maven项目&#xff1b; 前台主要功能包括&#xff1a; 会员登录、注册、商品展示、加入购物车、会员中心、我的订单、我的地址…

【跟学C++】C++队列——queue类(Study13)

文章目录1、队列2、队列--queue类的使用2.1 实例化queue2.2 queue的成员函数3、优先级队列--priority_queue类的使用3.1 实例化priority_queue3.1 priority_queued的成员函数4、总结 【说明】 大家好&#xff0c;本专栏主要是跟学C内容&#xff0c;自己学习了这位博主【 AI菌】…

多测师肖sir_高级讲师_第2个月第21讲解jmeter安装

一、安装流程&#xff1a; 1、安装jdk &#xff08;linux&#xff0c;windows上&#xff09;&#xff0c;jdk编译java语言&#xff0c; 2、jdk环境配置&#xff0c;dos中java -version 查看jdk版本 3、下载jmeter包&#xff0c;解压&#xff0c;bin 目录 &#xff0c;jmeter.ba…

从零开始配置vim(25)——关于 c++ python 的配置

从9月份到国庆这段时间,因为得了女儿,于是回老家帮忙料理家事以及陪伴老婆和女儿。一时之间无暇顾及该系列教程的更新。等我回来的时候发现很多小伙伴私信我催更。在这里向支持本人这一拙劣教程的各位小伙伴表示真诚的感谢。言归正传,让我们开始吧 之前我们根据lua语言配置了…

(附源码)计算机毕业设计ssm电子购物商城

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

【DL】第 11 章:自动驾驶汽车的深度学习

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

《uni-app》一个非canvas的飞机对战小游戏-启动页

这是一个没有套路的前端博主&#xff0c;热衷各种前端向的骚操作&#xff0c;经常想到哪就写到哪&#xff0c;如果有感兴趣的技术和前端效果可以留言&#xff5e;博主看到后会去代替大家踩坑的&#xff5e;接下来的几篇都是uni-app的小实战&#xff0c;有助于我们更好的去学习u…

基于微信小程序的校园失物招领寻物启事系统 java uniapp 小程序

随着信息化时代的到来,管理系统都趋向于智能化、系统化,微信小程序校园失物招领也不例外,但目前国内的市场仍都使用人工管理,市场规模越来越大,同时信息量也越来越庞大,人工管理显然已无法应对时代的变化,而微信小程序校园失物招领能很好地解决这一问题,轻松应对校园失物招领平…

老项目vue2.x误用了vue3的插件问题

老项目vue2.x误用了vue3的插件问题背景插件vue-template-compilervue-loader问题回溯总结背景 vue3出来两年多了&#xff0c;它刚出来的时候&#xff0c;vue3相比vue2似乎并没有想像中那样受大家欢迎。因为两个版本的构架上相差太大了&#xff0c;许多的API都不兼容&#xff0…

洛谷题单 Part 2.4 分治

分治 即分而治之 将大问题化解为小问题逐一求解 这种题没有固定的模板 只有分治的思想 所以在做题的时候应当多想如何将一个大问题化解成若干个子问题进行求解 直接上题了 P1226 【模板】快速幂||取余运算 非常经典的分治问题 常规算法求aba^bab要O(b)O(b)O(b)的时间复杂度 我…

Mybatis常见查询总结,仅限于初级程序员阅读

情况描述&#xff1a; 本人初次接触Mybatis&#xff0c;然后对于其中的一些基础查询做一些简单总结&#xff0c;一次用来记录他的用法&#xff0c;便于以后查漏补缺。 1、Mybatis中查询特定的列:&#xff08;单列&#xff09; 如果查询指定列为Long类型&#xff0c;那么在re…

游戏合作伙伴专题:BreederDAO 与 Affyn一起重构现实生活

BreederDAO 团队很宣布与 Affyn 建立了新的合作关系&#xff0c;Affyn 是一家位于新加坡的公司&#xff0c;开发了基于地理位置的增强现实移动游戏。 移动元宇宙 Affyn 团队由来自 EA、任天堂、迪士尼和星巴克等顶级游戏、娱乐和生活方式公司的资深员工组成。他们洞悉了目前边玩…

html5网页设计作业代码 大学生校园网站制作 学校官网制作html

&#x1f329;️ 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f482; 作者主页: 【进入主页—&#x1f680;获取更多源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;HTML5网页期末作业 (1000套…

性能大PK count(*)、count(1)和count(列)

最近的工作中&#xff0c;我听到组内两名研发同学在交流数据统计性能的时候&#xff0c;聊到了以下内容&#xff1a; 数据统计你怎么能用 count() 统计数据呢&#xff0c;count() 太慢了&#xff0c;要是把数据库搞垮了那不就完了么&#xff0c;赶紧改用 count(1)&#xff0c;这…

基于Gossip的online server

在游戏服务端架构中online server,有些也叫center server。 主要承载以下功能:存储玩家的在线信息,处理上线和下线消息。 转发消息给特定玩家。online server在架构图中的位置online server集群内部架构图,以3个实例为例:特点:svr之间相互连接,采用Gossip协议通信。 各s…

MCMS 审计之路

MCMS 是 J2EE 系统&#xff0c;完整开源的Java CMS&#xff0c;基于SpringBoot 2架构&#xff0c;前端基于vue、element ui。为开发者提供上百套免费模板,同时提供适用的插件&#xff08;文章、商城、微信、论坛、会员、评论、支付、积分、工作流、任务调度等...&#xff09;&a…

大学网课查题系统

大学网课查题系统 本平台优点&#xff1a; 多题库查题、独立后台、响应速度快、全网平台可查、功能最全&#xff01; 1.想要给自己的公众号获得查题接口&#xff0c;只需要两步&#xff01; 2.题库&#xff1a; 查题校园题库&#xff1a;查题校园题库后台&#xff08;点击跳…

VB6开发 用户控件OCX

VB6 中创建一个主窗体工程后,再添加一个 ActiveX用户控件工程 在用户控件窗体中可以添加 文本框和按钮的控件 属性Public strUrl As String方法发送消息 Public Sub WebSocketSendMsg(ByVal SendMsg As String) On Error GoTo ErrTrapDim sMsg As StringsMsg = msgInput.TextC…

公众号网课答案系统搭建

公众号网课答案系统搭建 本平台优点&#xff1a; 多题库查题、独立后台、响应速度快、全网平台可查、功能最全&#xff01; 1.想要给自己的公众号获得查题接口&#xff0c;只需要两步&#xff01; 2.题库&#xff1a; 查题校园题库&#xff1a;查题校园题库后台&#xff08;…

Java I/O流和反射机制

文章目录File类操作文件或目录属性认识Java的流使用字节流读写文本文件使用字节流类FileInputStream读文本文件使用字节流类FileOutputStream写文本文件使用字符流读写文本文件使用字符流类BufferedReader和FileReader读文本文件使用字符流类BufferedWrite和FileWrite写文本文件…