300字范文 > 个人设计web前端大作业 HTML期末大作业学生个人网页设计作品学生个人网页设计作

个人设计web前端大作业 HTML期末大作业学生个人网页设计作品学生个人网页设计作

时间：2018-12-29 08:54:35

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

📂文章目录

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

一、👨‍🎓网站题目

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

二、✍️网站描述

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

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

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

三、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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><head><meta charset="utf-8" /><meta name="author" content="order by /" /<meta name="Description" content=""/><meta name="Keywords" content=""/><title>个人网站 | 艺术资讯</title><link rel="stylesheet" type="text/css" href="css/common.css"/><link rel="stylesheet" type="text/css" href="css/page.css"/></head><body><div class="header"><div class="logo wrapper"><a href=""><h1>XXX个人网站</h1><p>XXX</p></a></div><ul class="wrapper nav clearfix"><li class="nav-item"><a href="index.html">我的首页<span>HOME</span></a></li><li class="nav-item"><a href="introduce.html">我的简介<span>INTRODUCTION</span></a></li><li class="nav-item"><a href="works.html">拍摄作品<span>PHOTO SHOOTING</span></a></li><li class="nav-item"><a href="achievement.html">我的成就<span>ACHIEVEMENT</span></a></li><li class="nav-item"><a href="news.html">艺术资讯<span>INFORMATION</span></a></li></ul></div><div class="page-banner"><img src="picture/works-banner.jpg" alt=""/></div><div class="bread-nav"><ul class="wrapper"><li><a href="">我的首页</a>  >  </li><li><a href="">艺术资讯</a>  >  </li><li><a href="">新闻详情页</a></li></ul></div><div class="news-detail"><div class="wrapper"><div class="news-title"><h2>再探《长城》，也许我们欠张艺谋一个道歉</h2><p><span>发布时间：-06-06</span><span>阅读次数：120</span></p></div><div class="news-detail-content"><p style="margin-bottom: 15px;">时隔半年，《长城》终于登录了网络平台，作为华语影视圈最贵的电影，还有传说中马特达蒙的演技，景甜的颜值，张艺谋的大场面，在这燥热的天气里，歪在沙发上刷一遍似乎也不错。</p><p style="margin-bottom: 15px;">《长城》是在贺岁档上映的，当时所有的影评人对这部片子口诛笔伐，甚至有偏激的人，写出张艺谋已死的标题，但是五个多月过去，虽然这部片子确实算不上佳作，但是许多镜头，回过头来看，很美，蕴含了中国的文化哲学，很值得一刷。</p><p><img src="picture/changcheng.jpg" alt=""/></p><p style="margin-bottom: 15px;">这部电影的失败，根在剧本上，好莱坞的编剧，不了解东方文化，画面很东方，但是故事内核却很西化。而张艺谋的电影，一贯的仪式感浓，大场面，大画面，配上空洞并且漏洞百出的内容，简直让人不能忍。而这部剧最大的失败，可能是宣传，第一部进军好莱坞的中国电影，齐聚了中国最有前途最有潜质的小鲜肉演员，结果张导只让他们打个酱油！！！</p><p style="margin-bottom: 15px;">而演技最烂的鹿晗和王俊凯，足足有好几十分钟的镜头，你让影评人怎么忍！特别是王俊凯，演的那叫一个烂，小编真想把他扯下龙椅暴打一顿。还有什么？饕餮！上古神兽！中华文化标志性的巨兽，出现一只两只，已经让国人顶礼膜拜，结果竟然是铺天盖地而来，气势是有了，镜头感也有了，但是逻辑不通，这么多的怪兽，平时都是躲在哪儿？用什么来喂食？这个最基本的问题解决不好，你怎么敢来拍电影。</p></div></div></div><div class="footer"><div class="wrapper"><div class="friend-link"><a href="index.html">我的首页</a><a href="introduce.html">我的简介</a><a href="works.html">拍摄作品</a><a href="achievement.html">我的成就</a><a href="news.html">艺术资讯</a> </div><p class="copyright">版权所有：XXX个人网站 Copyright ©后台管理</p><p class="support"><a href="">技术支持：XXX</a></p></div></div></body></html>

💒CSS样式代码

/* 做最好的织梦整站模板下载网站*/@charset "utf-8";/*头部图片*/.index-banner,.page-banner{width: 100%;overflow: hidden;position: relative;height: 550px;}.page-banner{height: 250px;}.index-banner img,.page-banner img{position: absolute;left: 50%;margin-left: -960px;}/*首页简介*/.introduce{background: #eeeeee;padding:36px 0 40px;}.intro-pic dt{width: 200px;height: 200px;margin: 0 auto 20px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;background: #fff;overflow: hidden;}.intro-pic dd{text-align: center;font-size: 24px;margin-bottom: 25px;}.intro-info {font-size: 18px;text-align: center;color: #666666;}/*公共标题*/.title{text-align: center;}.title p{color: #999;font-size: 12px;}.common-title{display: inline-block;}.common-title h2{border: 1px solid #c9c9c9;font-size: 24px;font-weight: normal;padding: 2px 26px 13px 26px;}.common-title span{display: inline-block;position: relative;font-size: 12px;color: #808080;background: #fff;bottom: 10px;padding: 0 10px;}.more-btn{margin-top: 45px;text-align: center;font-size: 0;}.more-btn a{display: inline-block;font-size: 16px;padding: 10px 40px;border: 1px solid #4d4d4d;}.more-btn a{-webkit-transition: all linear .3s;-moz-transition: all linear .3s;-ms-transition: all linear .3s;transition: all linear .3s;}.more-btn a:hover{background: #f00;color: #fff;border-color: #f00;}.bread-nav .wrapper{border-bottom: 1px solid #ccc;}.bread-nav ul{text-align: right;padding: 20px 0;}.bread-nav ul li{display: inline-block;}.bread-nav ul li a:hover{color: #f00;}/*作品展示*/.works .wrapper,.achievement .wrapper,.information .wrapper{padding: 50px 0;border-bottom: 1px solid #c9c9c9;}.works-list{margin: -7px;margin-top: 30px;}.work-item{width: 350px;float: left;margin: 7px;text-align: center;font-size: 16px;}.work-item a{display: block;overflow: hidden;}.work-item p{margin-top: 10px;}.work-item .work-item-pic{width: 350px;height: 240px;overflow: hidden;background: #f0f0f0;display: table-cell;vertical-align: middle;text-align: center;}.work-item .work-item-pic img{max-width: 100%;max-height: 100%;-webkit-transition: all linear .3s;-moz-transition: all linear .3s;-ms-transition: all linear .3s;transition: all linear .3s;}.work-item:hover img{-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);}.work-item:hover p{color: #f00;}/*成就*/.achievement-list {padding: 0 90px;}.achievement-list li{margin: 15px 0;font-size: 14px;} /*艺术资讯*/.infor-list,.news-list{margin-top: 30px;}.infor-left{float: left;background: #f0f0f0;width: 500px;height: 410px;overflow: hidden;margin-right: 40px;}.infor-right{float: left;width: 540px;margin-bottom: -40px;}.infor-right li{margin-bottom: 40px;}.info-time{float: left;width: 110px;height: 110px;border: 1px solid #333;font-size: 24px;text-align: right;}.info-time-date{padding-top: 10px;font-size: 34px;text-align: center;}.info-time-year{padding-right: 10px;}.info-txt{margin-left: 16px;width: 412px;float: left;}.info-txt h3{font-size: 18px;font-weight: 600;margin-bottom: 8px;white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; }.info-txt p{color: #666;max-height: 66px;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}.infor-right .info-txt h3,.infor-right .info-txt p,.news-content .info-txt h3,.news-content .info-txt p{-webkit-transition: all linear .3s;-moz-transition: all linear .3s;-ms-transition: all linear .3s;transition: all linear .3s;}.infor-right li a:hover .info-txt h3,.infor-right li a:hover .info-txt p,.news-content li a:hover .info-txt h3,.news-content li a:hover .info-txt p{color: #f00;}.news-content{margin: -20px;}.news-content li{float: left;width: 520px;margin:20px;box-sizing: border-box;}.news-content .info-time{width: 100px;height: 100px;}.news-content .info-txt{width: 400px;}/*个人简介页面*/.intro .wrapper{padding: 40px 0;}.intro-img{float: left;width: 220px;height: 220px;margin: 0 40px;border: 1px solid #999999;overflow: hidden;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.intro-img p{width: 200px;height: 200px;background: #f1f1f1;overflow: hidden;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;margin-top: 10px;margin-left: 10px;}.intro-txt{float: left;width: 600px;margin-left: 40px;}/*新闻详情页*/.news-title{text-align: center;font-size: 14px;padding-top: 20px;}.news-title h2{font-size: 20px;margin-bottom: 15px;font-weight: 500;}.news-title p span{display: inline-block;padding: 0 10px;}.news-detail-content{padding: 20px 40px;}.news-detail-content{padding: 20px 40px;}.news-detail-content img{width: 100%; margin-bottom: 20px;}

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

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