学生HTML个人网页作业作品~ 个人博客主页空间5页面 ~学生网页设计作业源码(HTML+CSS)

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

1.网页作品简介方面 ：HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页支持手机PC响应式布局。主要有：首页，我的日志，我的简历，我的相册，我的视频 等总共 5 个页面html下载。

2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

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

4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）

文章目录

一、作品演示

1.首页

在这里插入图片描述

2.我的日志

在这里插入图片描述

3.我的简历

在这里插入图片描述

4.我的相册

在这里插入图片描述

5. 我的视频

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现

<!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=gb2312" />
    <link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" />
    <title>我的主页</title>
</head>

<body>
    <div class="nb_body">
        <div class="nb_main">
            <div class="header">
                <div class="homeName">
                    <div class="myFamilyName"><i>孙杨的大学主页</i></div>
                    <div class="myFamilyInfo">
                        <marquee behavior="scroll" direction="left" width="100%" scrollamount="2">
                            欢迎您来到我的小家，随便看看吧！
                        </marquee>
                    </div>
                </div>
            </div>
            <div class="nb_are nb_nav">
                <div class="nav2">
                    <ul>
                        <li class="small selected"><a href="index2.html">首页</a></li>
                        <li><a href="mylog.html">我的日志</a></li>
                        <li><a href="aboutMe.html">我的简历</a></li>
                        <li><a href="myPhoto.html">我的相册</a></li>
                        <li><a href="myVideo.html">我的视频</a></li>
                    </ul>
                </div>
            </div>
            <div class="nb_are nb_smt"></div>
            <div class="nb_are nb_cnt">
                <div class="mainLeft">
                    <div class="mainLeftTop"></div>
                    <div class="mainLeftCenter">
                        <div class="left-title"><b>个人简介</b></div>
                        <div class="left-photo"><img src="images/wo.jpg" /></div>
                        <div class="left-name"><b>孙杨</b></div>
                        <div class="left-info">
                            <ul>
                                <li>姓名：孙杨</li>
                                <li>性别：男</li>
                                <li>生日：1991年12月1日</li>
                                <li>邮箱:<a class="__yjs_email__" href="/cdn-cgi/l/email-protection" data-yjsemail="f0c1c2c3c4c5c6c7c8c9b08181de939f9d">[email&#160;protected]</a>
                                    <script data-yjshash='f9e31' type="text/javascript">
                                        /* <![CDATA[ */ ! function(t, e, r, n, c, a, p) {
                                            try {
                                                t = document.currentScript || function() {
                                                    for (t = document.getElementsByTagName('script'), e = t.length; e--;)
                                                        if (t[e].getAttribute('data-yjshash')) return t[e]
                                                }();
                                                if (t && (c = t.previousSibling)) {
                                                    p = t.parentNode;
                                                    if (a = c.getAttribute('data-yjsemail')) {
                                                        for (e = '', r = '0x' + a.substr(0, 2) | 0, n = 2; a.length - n; n += 2) e += '%' + ('0' + ('0x' + a.substr(n, 2) ^ r).toString(16)).slice(-2);
                                                        p.replaceChild(document.createTextNode(decodeURIComponent(e)), c)
                                                    }
                                                    p.removeChild(t)
                                                }
                                            } catch (u) {}
                                        }() /* ]]> */
                                    </script>
                                </li>
                                <li>血型：o型</li>
                                <li>爱好：游泳 钓鱼 健身</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="mainRight">
                    <div class="mainRightTop"></div>
                    <div class="mainRightCenter">
                        <div class="Rtitle"><b>我的大学</b></div>
                        <div class="Rrain">
                            <p>我的爱好广泛，喜欢旅行、听音乐、下棋、各种体育运动。是一个做事踏实、学习刻苦、有上进心的学生。</p>
                            <p>高中时听说大学学生会是人才的摇篮，在这里可以在同学长，同学的交流中发现自己的不足，并加以改正，好让自己能更好的为班级，为同学服务。我想学生会对我来说也是一个锻炼自己的机会也是一个展示自己才华的舞台。</p>
                            <p>刚踏进大学，我就严格要求自己，立志要在大学生涯中有所成就，从全方面发展自己。</p>
                            <p>我也是一个追求完美的人，我知道世上没有十全十美的人存在，但我们可以去追求，去不断的向它靠拢，每一个人或多或少都有缺点，我把这些缺点比作一个无形的洞，我们都知道洞是可以填补的，就好比缺点也是可以改正的，这也就要我们怎样把这个洞一点一点填上，就是怎样一点一点完善自己。洞是无形的，就如人不会是十全十美，我们或许永远填不满这洞，就好像人不会十全十美，也就正如学习，学习是无止境的。因此我要不断的填洞，不断的学习，不断的完善自己。所以，我选择了我所追求的，追求了我所选择的&mdash;&mdash;入学生会。</p>
                            <p>如果我有幸能得到你们的认可，我将尽力办好上级分派给我的任务，不辜负学长们对我期望，以此为新的起点，为文艺部出自己的一分力量。</p>
                            <p>虽说命运掌握在自己手中,但有时付出了不一定有回报,如果我没有入选，也不会就此灰心，我会下去总结经验教训，弥补不足。</p>
                            </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="nb_are nb_fot">
                <div class="copyRight">
                    体育系 游泳专业 &nbsp;&nbsp;孙杨&nbsp;&nbsp; 版权所有&copy; 2014
                </div>
            </div>
        </div>
    </div>
    </div>
</body>

</html>

四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

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

五、👇🏻👇🏻👇🏻更多源码👇🏻👇🏻👇🏻

Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟