HTML5+CSS期末大作业:个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript

发布时间:2022-07-04 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了HTML5+CSS期末大作业:个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

HTML5+CSS期末大作业F1a;个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品@H_360_6@

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游电商、 宠物、 器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~ 3.原始HTML+CSS+JS页面设计, web大学生网页设计作业码,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。

作品介绍

1.网页作品简介 :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。包含:主页、关于我们、登录、注册,总共4个页面。

2.网页作品编辑:此作品为学生期末大作业网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页)。

3.网页作品布局:网页布局整体为响应式布局、LOGO、导航、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。

4.网页作品技:使用DIV+CSS制作网页, 背景图、音乐、视频、flash、鼠标经过及选中导航变色效果、下划线 、等。 表单提交、评论留言,并使用JavaScript制作了表单判断(提交时表单不能为空)。

文章目录

  • HTML5+CSS期末大作业:个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品
  • 作品介绍
  • 一、作品展示
  • 二、文件目录
  • 三、代码实现
  • 四、web前端(学习资料)
  • 五、源码获取

一、作品展示

1.资料

HTML5+CSS期末大作业:个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript

2.技能

HTML5+CSS期末大作业:个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript

3.作品

HTML5+CSS期末大作业:个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript

4.经历

HTML5+CSS期末大作业:个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript

5. 团队

HTML5+CSS期末大作业:个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript

二、文件目录

HTML5+CSS期末大作业:个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript

三、代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <tITle>XXX的个人简历</title>
    <meta name="theme-color" content="#ffc91d"/>
    <link rel="icon" href="static/img/32.png" sizes="32x32"/>
    <link rel="icon" href="static/img/192.png" sizes="192x192"/>
    <link href="static/kico.css" rel="stylesheet" type="text/css"/>
    <link href="static/moreduo.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.bootcss.COM/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
</head>
<body>
<aside class="sidebar">
    <div class="avatar">
        <img src="static/img/avatar.jpg" title="保罗酱"/>
    </div>
    <nav class="nav">
        <a href="#info">资料</a>
        <a href="#skills">技能</a>
        <a href="#works">作品</a>
        <a href="#story">经历</a>
        <a href="#team">团队</a>
    </nav>
</aside>
<main>
    <section id="info">
        <div class="wrap">
            <h2 class="title">个人资料</h2>
            <div class="row">
                <div class="col-l-4">
                    <p>姓名:XXX</p>
                    <p>性别:男</p>
                    <p>年龄:48</p>
                    <p>英文名:;moreduo</p>
                    <p>学历:博士后</p>
                </div>
                <div class="col-l-4">
                    <p>QQ:XXX</p>
                    <p>GitHub:<a href="/">Moreduo</a></p>
                    <p>博客:<a href="XXX">XXX</a></p>
                    <p>邮箱:<a href="mailto:XXX@qq.com">XXX@qq.com</a></p>
                </div>
                <div class="col-l-4">
                    <p>我是一个热爱钻研计算机技术的青少年,从小开始对计算机有极大的兴趣。目前我专注网站开发领域。我还自己发起建立了一个制作游戏的团队,希望能和大家合作,一同创造出属于我们自己的原创作品。</p>
                </div>
            </div>
        </div>
    </section>
    <section id="skills">
        <div class="wrap">
            <h2 class="title">掌握的技能</h2>
            <div class="row scrollable">
                <div class="col-s-6 col-m-4 center-fixed">
                    <div class="skills-icon">
                        <i class="fa fa-html5"></i>
                    </div>
                    <div class="skills-title">
                        <h3>html 5</h3>
                        <p>熟悉 HTML5 网站的架构和开发</p>
                    </div>
                </div>
                <div class="col-s-6 col-m-4 center-fixed">
                    <div class="skills-icon">
                        <i class="fa fa-css3"></i>
                    </div>
                    <div class="skills-title">
                        <h3>CSS3</h3>
                        <p>熟悉使用 CSS3 写响应式网站、动画等</p>
                    </div>
                </div>
                <div class="col-s-6 col-m-4 center-fixed">
                    <div class="skills-icon">
                        <i class="fa fa-code"></i>
                    </div>
                    <div class="skills-title">
                        <h3>JavaScript</h3>
                        <p>能使用 JS 制作简单的程序、交互与特效</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="works">
        <div class="wrap">
            <h2 class="title">个人作品</h2>
            <div class="row">
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="static/img/works/binkic-2017.jpg"/>
                        <p>缤奇团队 2017 官网</p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="static/img/works/space.jpg"/>
                        <p>个人博客</p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="static/img/works/dream.jpg"/>
                        <p>梦想主题班会</p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="static/img/works/kico-style.jpg"/>
                        <p>Kico Style 响应式框架</p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="static/img/works/robots.jpg"/>
                        <p>小缤机器人</p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="static/img/works/single.jpg"/>
                        <p>Single 博客主题</p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="static/img/works/kico-player.jpg"/>
                        <p>Kico player 播放器</p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="static/img/works/sweet.jpg"/>
                        <p>个人主页 Sweet</p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="static/img/works/binkic-2018.jpg"/>
                        <p>缤奇团队 2018 官网</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="story">
        <div class="wrap">
            <h2 class="title">个人经历</h2>
            <div class="row">
                <div class="col-m-8">
                    <ul class="timeline">
                        <li>2016.07.03:创立缤奇(Binkic)团队</li>
                        <li>2016.12.20:仿照某动漫官网编写模板,并搭建运营了一个动漫型社区</li>
                        <li>2017.05.30:带领团队进行招新,并发起了首个游戏项目:<a>色块冲刺</a></li>
                        <li>2017.08.17:为团队制作了首部宣传片:<a href="javascript:;" target="_blank">创意可以改变什么</a></li>
                        <li>2017.12.08:个人编写的前端响应式框架 <a href="javascript:;" target="_blank">Kico Style</a> 初现雏形</li>
                        <li>2018.03.01:基于 Kico Style 的第一个原创 <a href="javascript:;" target="_blank">缤奇团队官网</a> 正式上线</li>
                        <li>2018.04.27:使用前端技术编写的 <a href="javascript:;" target="_blank">梦想晨会</a> 制作完成</li>
                        <li>2018.06.07:参加“众创杯”创业大赛校园选拔赛,团队项目荣获三等奖</li>
                        <li>2018.06.17:动漫门户网站制作完成,内含一个自己设计的简单音乐播放器</li>
                        <li>2018.06.25:参加全国中职信息技术技能大赛微网站项目,荣获一等奖</li>
                        <li>2018.08.03:原创博客主题 <a href="javascript:;" target="_blank">Single</a> 发布,截至 2 月共有 66 Stars</li>
                        <li>2018.09.19:个人编写的播放器 <a href="javascript:;" target="_blank">Kico Player</a> 发布测试版</li>
                        <li>2018.12.12:基于 ES6 的时钟小工具 <a href="javascript:;" target="_blank">Kico Tools</a> 发布测试版</li>
                        <li>2018.12.18:第一个基于 PHP 的个人首页 <a href="javascript:;" target="_blank">Sweet</a> 发布正式版</li>
                        <li>2019.01.01:缤奇团队新<a href="javascript:;" target="_blank">官网</a>正式上线,后端采用 Typecho 驱动</li>
                        <li>2019.02.16:结合前后端制作了一个春节<a href="javascript:;" target="_blank">问答红包</a>,使用正则判断答案</li>
                    </ul>
                </div>
                <div class="col-m-4 center-fixed">
                    <img src="static/img/story.png"/>
                </div>
            </div>
        </div>
    </section>
    <section class="content-d" id="team">
        <div class="wrap">
            <h2 class="title">我的团队</h2>
            <div class="row">
                <div class="col-m-6">
                    <p>我的团队 - 缤奇团队由一群热爱科技创新的年轻人所组成,做到了“实际”与“创新”的结合。奇思妙想不乏真正落实。集思广益,生动有趣的创意,尽在缤奇。缤奇团队如今有超过30名成员,各个部门互帮互助,同为一个目标而努力进取着。</p>
                    <p>缤奇团队致力于开发原创游戏、动漫等项目。目前我们已完成项目有手机游戏“色块冲刺”、聊天娱乐项目“小缤机器人”等。正在创作项目有解密游戏“月亮湖的秘密”、VR 项目“梦想码头”等。缤奇官网 &amp;amp; 社区已陆续开放。网站采用团队成员自主编写的 CSS3 自适应框架,针对移动设备有布局优化,缤奇团队有着丰富的网站建设技术能力、有独立的画师以及文编。</p>
                    <p>团队官网:<a href="XXX">XXX</a></p>
                </div>
                <div class="col-m-6 center">
                    <img src="static/img/team.png"/>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <p>© 2020.</p>
    </footer>
</main>

<script src="static/kico.js"></script>
<script src="static/moreduo.js"></script>

</body>
</html>



四、web前端(学习资料)

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

HTML5+CSS期末大作业:个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript


五、源码获取

❉3.以上内容技术相关问题可以相互学习,可在 V幸 公Z号 >>> web前端小日记 👇🏻👇🏻👇🏻获取更多源码 👇🏻👇🏻👇🏻 !

HTML5+CSS期末大作业:个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript

脚本宝典总结

以上是脚本宝典为你收集整理的HTML5+CSS期末大作业:个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript全部内容,希望文章能够帮你解决HTML5+CSS期末大作业:个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。