首页 > 其他分享> > 学生HTML个人网页作业作品~个人主页博客网页设计制作(6个页面)~大学生个人网站作业模板~HTML简单个人网页制作

学生HTML个人网页作业作品~个人主页博客网页设计制作(6个页面)~大学生个人网站作业模板~HTML简单个人网页制作

2021-07-04 12:00:15 作者：互联网

HTML期末大作业~ 学生HTML个人网页作业作品下载-个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作

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

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

作品介绍

1.网页作品简介方面 ：黑色通用的IT程序员资讯交流个人博客网站模板。喜欢的可以下载，文章页支持手机PC响应式布局。主要有：登录、注册、主页、列表页、详情页 等总共6个页面html下载。

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

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

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

文章目录

HTML期末大作业~ 学生HTML个人网页作业作品下载-个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作
作品介绍
一、作品演示
二、代码目录
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业作品文章
七、更多表白源码

一、作品演示

1.博客首页

在这里插入图片描述

2.技术文章

在这里插入图片描述

3.文章内容

在这里插入图片描述

4.登录/注册

在这里插入图片描述

5. 密码重置

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客内容页-聚繁</title>
    <link rel="stylesheet" href="plugin/layui/css/layui.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/mobile.css">
</head>
<body>
    <header>
        <div class="layui-row header-bigimg"></div>
        <div class="layui-row subject-color nav-row">
            <div class="main-content nav-menu">
                <div class="layui-row">
                    <div class="layui-col-md2 logo-box">
                        <a href="#" title="首页，聚繁分享">
                            <img src="imgs/canreplace/logo.png" alt="logo">
                        </a>
                    </div>
                    <div class="layui-col-md7 menu-box">
                        <ul class="menu-ul">
                           <a href="index.html">
                               <li>首页</li>
                           </a>
                            <a href="columntype.html">
                                <li>技术文章</li>
                            </a>
                            <a href="#">
                                <li>程序人生</li>
                            </a>
                            <a href="#">
                                <li>生活</li>
                            </a>
                            <a href="#">
                                <li>工具分享</li>
                            </a>
                            <a href="#">
                                <li>关于我、关于博客</li>
                            </a>
                        </ul>
                    </div>
                    <div class="layui-col-md3 search-box">
                        <div class="search-input-div">
                            <div class="layui-row">
                                <div class="layui-col-md10 input-box">
                                    <input class="search-input" placeholder="请输入关键字进行搜索">
                                </div>
                                <div class="layui-col-md2 search-btn-box">
                                    <img src="imgs/icon/search.png" height="36" width="36"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="main-content item-box">
        <div class="item-type">
            <div class="column-item layui-row">
                <div class="column-item-title layui-row subject-second-color font-color1 font-bold">同类热门文章</div>
                <div class="jianjie-p layui-row">
                    <ul class="remen-ul">
                        <li>
                        <div class="remen-title layui-row">
                            <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫个强者都会有背后个强者都会有背后折</a>
                        </div>
                        <div class="remen-readnum layui-row">阅读：2019</div>
                    </li>
                        <li>
                            <div class="remen-title layui-row">
                                <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫个强者都会有背后个强者都会有背后折</a>
                            </div>
                            <div class="remen-readnum layui-row">阅读：2019</div>
                        </li>
                        <li>
                            <div class="remen-title layui-row">
                                <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫个强者都会有背后个强者都会有背后折</a>
                            </div>
                            <div class="remen-readnum layui-row">阅读：2019</div>
                        </li>
                        <li>
                            <div class="remen-title layui-row">
                                <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫个强者都会有背后个强者都会有背后折</a>
                            </div>
                            <div class="remen-readnum layui-row">阅读：2019</div>
                        </li>
                        <li>
                            <div class="remen-title layui-row">
                                <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫个强者都会有背后个强者都会有背后折</a>
                            </div>
                            <div class="remen-readnum layui-row">阅读：2019</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="item-list">
            <div class="article-content-box layui-row">
                <h1>每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</h1>
                <div class="article-param layui-row">
                    2019-01-17 19:59<span><a href="#">大BUG</a></span><span>阅读数：2019</span><span>评论数：15</span>&nbsp;&nbsp;
                    <span class="hz-span layui-badge layui-bg-gray">编程语言</span>
                    <span class="hz-span layui-badge layui-bg-gray">编程基础</span>
                    <span class="hz-span layui-badge layui-bg-gray">编程入门</span>
                </div>
                <div class="article-prompt">
                    提示：此篇文章需要至少会使用一种计算机编程语言，掌握了一门计算机编程语言的基础部分才能阅读懂此篇文章。
                </div>
                <article>
                    <p>开个人网站如何赚钱？这是一个比较旧的问题，也是一个难题。此篇文章分享个人网站和如今的自媒体结合来达到赚钱的目的。</p><p>我们开网站的目的是什么？直言：就是为了赚钱！</p><p>我在我的“关于网站”中也提到，会给大家分享一下关于网站如何赚钱的文章，今天来了！</p><p>当然，先声明！阅读完此篇文章你也不一定能赚到钱0.0</p><p>先给大家上一张图：</p><p><img alt="聚繁分享，个人网站如何赚钱？" src="http://www.jufanshare.com/upload/imgs/2019-03-06/6038ad2d-a7ae-4d0e-bc19-8a82e6d51156.png" width="800" height="333.3333333333333"><br></p><p>从上图中可以看到大致的个人网站的赚钱方向，下边一个一个的解析。</p><blockquote><h3><b>网站引流到微信</b></h3></blockquote><p>微信的用户量摆在那，不用多讲。你可以在你的网站挂你的微信公众号/订阅号以及小程序码！把用户吸引到微信。</p><p>微信公众号和小程序都有流量主功能，也就是你发文章，微信会在你的文章里面挂广告链接，用户点击了你就可以获得收益！不过这个有门槛，需要不断的培养自己的用户数量，然后就可以去申请开通流量主功能了。据说只要用户够多，收益很可观的。</p><p>微信打赏，微信公众号文章有打赏功能，只要文章好，能吸引读者。这也算是一个收益来源。</p><blockquote><h3><b>自己的产品</b></h3></blockquote><p>比如开工作室，你有一定的技术，或者能提供的服务，可以自己成立一个工作室，网站访问用户如果有需求，那么活儿就来了。比如：美工、程序员、中介........等等。</p><p>还有就是销售自家的产品，我有一个朋友就是这样的，【自贡冷吃兔】大家知道吧，四川人知道的多些，他就是在自己的网站上推广自家的产品，收益简直让人眼红。</p><p>或者自己开有网店就更合适了，天衣无缝的推广啊</p><blockquote><h3><b>网站赚广告费</b></h3></blockquote><p>为什么要第三点才讲这个，由于比较老的网站赚钱方式就是广告费，至今为止很多网站依然是靠广告费挣钱，这个收益直接和你的网站流量挂钩。流量高那收益是相当不错的，流量低的甚至不够服务器的费用。</p><p>网站赚取广告费的渠道：</p><p style="margin-left: 40px;">百度等广告平台。会自动推送广告到你的网站</p><p style="margin-left: 40px;">给专门的商家做广告。这个就是自己卖广告位，需要流量要求比较高。</p><p style="margin-left: 40px;">淘宝联盟。就是在自己网站放置淘宝商品链接，这个自己百度，还算不错。<span style="color: rgb(65, 140, 175);">【推荐】</span></p><p style="">赚广告费需要很高的流量，收益才可观，相比之下我还是比较喜欢引流到微信的方式。</p><blockquote><h3><b>获取赞助</b></h3></blockquote><p style="">首先，你的网站得有一款产品，比如一套技术框架，类似layui、beetl等。就可以去拉赞助了，其实非常难的，不仅要有技术，还得学会推广你的产品。这个还不能急，是个长期的工程。发展周期长。</p><p style=""><br></p><blockquote><h3><b>其它</b></h3></blockquote><p style="">方式方法很多，比如做视频（这个比较吃服务器，建议网站放链接，视频上传到视频平台，如腾讯、哔哩哔哩等），这样网站可以有流量，视频平台也可以获得收益，一举两得。</p><p style="">互联网太多的机会了，等待你去发现。我总结了以上几点关于个人网站如何赚钱的方法，不仅仅只有这些，还有待发现。</p><p style=""><b style="color: rgb(227, 55, 55);">主要还是内容，内容能吸引用户，不管网站还是自媒体都能赚到钱，否则以上几点都是无效的。</b></p><p style="">刚刚开始写文章，写得不太好。发现问题还请多多指教，在此感激不尽！</p>
                </article>
                <div class="article-author layui-row">_____by 作者：<a href="#">大BUG</a></div>
                <div class="contact-row layui-row">
                    <div class="contact-me-box">
                        <p>欢迎交流！</p>
                        <div class="a-href-box">
                            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=173124552&site=qq&menu=yes">
                                <img border="0" src="http://wpa.qq.com/pa?p=2:173124552:51" alt="大BUG" title="大BUG"/>
                            </a>
                            <a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=f9cb533de3ba27133b16a4988dd10b0acaddad9790cc33e9d8348922729892a7">
                                <img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="聚繁分享" title="聚繁分享">
                            </a>
                            <a href="#" style="color: #1E9FFF;">更多联系方式</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="comment-box layui-row">
                <div class="textarea-box layui-row">
                    <textarea placeholder="仅支持纯文本，如果有什么文字无法描述的问题、建议、意见，请加QQ群"></textarea>
                </div>
                <div class="text-num-tips layui-row">还可以输入<span>500</span>个字</div>
                <div class="common-btnbox">
                    <button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe642;</i>留言</button>
                    <button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe66f;</i>登录</button>
                </div>
            </div>
            <div class="comment-list layui-row">
                <ul>
                    <li>
                        <div class="common-box-row layui-row">
                            <div class="common-headimg layui-col-md1 layui-col-xs2">
                                <div class="commonimg-box">
                                    <img src="imgs/canreplace/headimg.jpg">
                                </div>
                            </div>
                            <div class="common-info-row layui-col-md11 layui-col-xs10">
                                <div class="common-nickname layui-row">2018-01-18 16:38<span>大BUG：</span></div>
                                <div class="common-text layui-row">“每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折”，说的非常好，条理清晰，通俗易懂，我这样的小白一看就懂，希望博主多分享一些类似文章。支持博主。都是按照已经用计算机语言编好的程序来执行的，程序是计算机要执行的指令的集合</div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="common-box-row layui-row">
                            <div class="common-headimg layui-col-md1 layui-col-xs2">
                                <div class="commonimg-box">
                                    <img src="imgs/canreplace/headimg.jpg">
                                </div>
                            </div>
                            <div class="common-info-row layui-col-md11 layui-col-xs10">
                                <div class="common-nickname layui-row">2018-01-18 16:38<span>大BUG：</span></div>
                                <div class="common-text layui-row">“每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折”，说的非常好，条理清晰，通俗易懂，我这样的小白一看就懂，希望博主多分享一些类似文章。支持博主。都是按照已经用计算机语言编好的程序来执行的，程序是计算机要执行的指令的集合</div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="common-box-row layui-row">
                            <div class="common-headimg layui-col-md1 layui-col-xs2">
                                <div class="commonimg-box">
                                    <img src="imgs/canreplace/headimg.jpg">
                                </div>
                            </div>
                            <div class="common-info-row layui-col-md11 layui-col-xs10">
                                <div class="common-nickname layui-row">2018-01-18 16:38<span>大BUG：</span></div>
                                <div class="common-text layui-row">“每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折”，说的非常好，条理清晰，通俗易懂，我这样的小白一看就懂，希望博主多分享一些类似文章。支持博主。都是按照已经用计算机语言编好的程序来执行的，程序是计算机要执行的指令的集合</div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="common-box-row layui-row">
                            <div class="common-headimg layui-col-md1 layui-col-xs2">
                                <div class="commonimg-box">
                                    <img src="imgs/canreplace/headimg.jpg">
                                </div>
                            </div>
                            <div class="common-info-row layui-col-md11 layui-col-xs10">
                                <div class="common-nickname layui-row">2018-01-18 16:38<span>大BUG：</span></div>
                                <div class="common-text layui-row">“每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折”，说的非常好，条理清晰，通俗易懂，我这样的小白一看就懂，希望博主多分享一些类似文章。支持博主。都是按照已经用计算机语言编好的程序来执行的，程序是计算机要执行的指令的集合</div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="common-box-row layui-row">
                            <div class="common-headimg layui-col-md1 layui-col-xs2">
                                <div class="commonimg-box">
                                    <img src="imgs/canreplace/headimg.jpg">
                                </div>
                            </div>
                            <div class="common-info-row layui-col-md11 layui-col-xs10">
                                <div class="common-nickname layui-row">2018-01-18 16:38<span>大BUG：</span></div>
                                <div class="common-text layui-row">“每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折”，说的非常好，条理清晰，通俗易懂，我这样的小白一看就懂，希望博主多分享一些类似文章。支持博主。都是按照已经用计算机语言编好的程序来执行的，程序是计算机要执行的指令的集合</div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="common-box-row layui-row">
                            <div class="common-headimg layui-col-md1 layui-col-xs2">
                                <div class="commonimg-box">
                                    <img src="imgs/canreplace/headimg.jpg">
                                </div>
                            </div>
                            <div class="common-info-row layui-col-md11 layui-col-xs10">
                                <div class="common-nickname layui-row">2018-01-18 16:38<span>大BUG：</span></div>
                                <div class="common-text layui-row">“每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折”，说的非常好，条理清晰，通俗易懂，我这样的小白一看就懂，希望博主多分享一些类似文章。支持博主。都是按照已经用计算机语言编好的程序来执行的，程序是计算机要执行的指令的集合</div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="common-box-row layui-row">
                            <div class="common-headimg layui-col-md1 layui-col-xs2">
                                <div class="commonimg-box">
                                    <img src="imgs/canreplace/headimg.jpg">
                                </div>
                            </div>
                            <div class="common-info-row layui-col-md11 layui-col-xs10">
                                <div class="common-nickname layui-row">2018-01-18 16:38<span>大BUG：</span></div>
                                <div class="common-text layui-row">“每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折”，说的非常好，条理清晰，通俗易懂，我这样的小白一看就懂，希望博主多分享一些类似文章。支持博主。都是按照已经用计算机语言编好的程序来执行的，程序是计算机要执行的指令的集合</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <footer>
        <div class="footer-box">
            <div class="main-content">
                <strong>Copyright</strong> &nbsp;2019.01.16  &nbsp;by  &nbsp;<a href="#">大BUG</a><span>备案号：<a href="http://www.miitbeian.gov.cn/" target="_blank">蜀ICP备16031990号-2</a></span>
            </div>
        </div>
    </footer>
<script src="plugin/layui/layui.js"></script>
<script>
    layui.use('laypage', function(){
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'pageItem', //注意，这里的 test1 是 ID，不用加 # 号
            count: 50, //数据总数，从服务端得到
            jump: function(obj, first){
                //obj包含了当前分页的所有参数，比如：
                console.log('当前页数：'+obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log('每页数量：'+obj.limit); //得到每页显示的条数
                //首次不执行
                if(!first){
                   console.log('执行')
                }
            }
        });
    });
</script>
</body>
</html>