实训-个人博客（静态归档页）

最新推荐文章于 2023-12-16 11:58:41 发布
最新推荐文章于 2023-12-16 11:58:41 发布
阅读量284 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46302173/article/details/117707426
版权

博客归档页面
新建一个分类页面-archives.html
在这里插入图片描述
archives.html所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./static/css/me.css">
    <title>归档</title>
</head>
<body>
    <!--导航-->
    <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui teal header item">Blog</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
                <a href="#" class="active m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
                <div class="right m-item item m-mobile-hide">
                    <div class="ui  icon inverted transparent input">
                        <input type="text" placeholder="Search....">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"  >
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <!--中间内容-->
    <div class="m-container-small m-padded-tb-big">
        <div class="ui container">
                <!--header-->
                <div class="ui top attached padded segment">
                    <!--middle aligned:垂直方向居中-->
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <h3 class="ui teal header">归档</h3>
                        </div>
                        <div class="right aligned column">
                            共 <h2 class="ui orange header m-inline-block m-text-thin">114</h2> 篇博客
                        </div>
                    </div>
                </div>
            <!--按年份分的内容-->
            <h3 class="ui center aligned header">2017</h3>
            <div class="ui fluid vertical menu">
                <a href="#" target="_blank" class="item">
                    <span>
                        <i class="mini teal circle icon"></i>关于刻意练习的清单
                        <div class="ui teal basic left pointing label m-padded-mini">9月03</div>
                    </span>
                    <div class="ui orange basic left pointing label m-padded-mini">原创</div>
                </a>
                <a href="#" target="_blank" class="item">
                    <span>
                        <i class="mini teal circle icon"></i>关于刻意练习的清单
                        <div class="ui teal basic left pointing label m-padded-mini">9月03</div>
                    </span>
                    <div class="ui orange basic left pointing label m-padded-mini">原创</div>
                </a>
                <a href="#" target="_blank" class="item">
                    <span>
                        <i class="mini teal circle icon"></i>关于刻意练习的清单
                        <div class="ui teal basic left pointing label m-padded-mini">9月03</div>
                    </span>
                    <div class="ui orange basic left pointing label m-padded-mini">原创</div>
                </a>
                <a href="#" target="_blank" class="item">
                    <span>
                        <i class="mini teal circle icon"></i>关于刻意练习的清单
                        <div class="ui teal basic left pointing label m-padded-mini">9月03</div>
                    </span>
                    <div class="ui orange basic left pointing label m-padded-mini">原创</div>
                </a>
            </div>
            <h3 class="ui center aligned header">2016</h3>
            <div class="ui fluid vertical menu">
                <a href="#" target="_blank" class="item">
                    <span>
                        <i class="mini teal circle icon"></i>关于刻意练习的清单
                        <div class="ui teal basic left pointing label m-padded-mini">9月03</div>
                    </span>
                    <div class="ui orange basic left pointing label m-padded-mini">原创</div>
                </a>
                <a href="#" target="_blank" class="item">
                    <span>
                        <i class="mini teal circle icon"></i>关于刻意练习的清单
                        <div class="ui teal basic left pointing label m-padded-mini">9月03</div>
                    </span>
                    <div class="ui orange basic left pointing label m-padded-mini">原创</div>
                </a>
                <a href="#" target="_blank" class="item">
                    <span>
                        <i class="mini teal circle icon"></i>关于刻意练习的清单
                        <div class="ui teal basic left pointing label m-padded-mini">9月03</div>
                    </span>
                    <div class="ui orange basic left pointing label m-padded-mini">原创</div>
                </a>
                <a href="#" target="_blank" class="item">
                    <span>
                        <i class="mini teal circle icon"></i>关于刻意练习的清单
                        <div class="ui teal basic left pointing label m-padded-mini">9月03</div>
                    </span>
                    <div class="ui orange basic left pointing label m-padded-mini">原创</div>
                </a>
            </div>
        </div>
    </div>
    <!--底部footer-->
    <footer class="ui inverted  vertical segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="./static/images/wechat.jpg" class="ui rounded image" style="width: 110px">
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Email:2392347073@qq.com</a>
                        <a href="#" class="item">QQ:2392347073</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">Lirenmi</h4>
                    <p class="">这是我的个人博客，会分享关于编程、写作、思考相关的任何内容，希望可以给来到这里的人有所帮助...</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright  2016-2017 Lirenmi DESIGNED BYlIRENMI </p>
        </div>

    </footer>
<script src="./static/js/jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script>
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide');
        });

    </script>》、、>
</body>
</html>

me.css所有代码

body{
    background: url("../images/bg.jpg");
}

.m-padded-mini{
    padding: 0.2em !important;
}
.m-padded-tiny{
    padding: 0.3em !important;
}
/*----不同的上下间距----*/
.m-padded-tb-mini{
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
}
.m-padded-tb-tiny{
    padding-top: 0.3em !important;
    padding-bottom: 0.3em !important;
}
.m-padded-tb-small{
    padding-top: 0.5em !important;
    padding-bottom: 0.5em !important;
}
.m-padded-tb{
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}
.m-padded-tb-large{
    padding-top: 2em !important;
    padding-bottom: 2em !important;
}
.m-padded-tb-big{
    padding-top: 3em !important;
    padding-bottom: 3em !important;
}
.m-padded-tb-huge{
    padding-top: 4em !important;
    padding-bottom: 4em !important;
}
.m-padded-tb-massive{
    padding-top: 5em !important;
    padding-bottom: 5em !important;
}
.m-padded-lr-responsive{
    padding-left: 4em !important;
    padding-right: 4em !important;
}
/*----text----*/

.m-text{
    font-weight: 300 !important;
    letter-spacing: 1px !important;
    line-height: 1.8;
}
.m-text-thin{
    font-weight: 300 !important;
}
.m-text-spaced{
    letter-spacing: 1px !important;
}
.m-text-lined{
    line-height: 1.8;
}

/*----margin----*/
.m-margin-top-small{
    margin-top: 0.5em !important;
}
.m-margin-top {
    margin-top: 1em !important;
}
.m-margin-top-large {
    margin-top: 2em !important;
}
.m-margin-tb-tiny{
    margin-top: 0.3em !important;
    margin-bottom: 0.3em !important;
}
.m-margin-bottom-small{
    margin-bottom: 0.5em !important;
}
/*----opacity----*/
.m-opacity-mini{
    opacity: 0.8 !important;
}
.m-opacity-tiny{
    opacity: 0.6 !important;
}


/*----position----*/
.m-right-top{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}
/*----display----*/
.m-inline-block{
    display: inline-block !important;
}
/*----shadow----*/
.m-shadow-small{
    -webkit-box-shadow:0 4px 8px rgba(0,0,0,2) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,2) !important;
}
/*----color----*/
.m-black {
    color: #333 !important;
}
/*----container----*/
.m-container {
    max-width: 70em !important;
    margin: auto !important;
}
.m-container-small {
    max-width: 60em !important;
    margin: auto !important;
}

.m-mobile-show {
    display: none !important;
}
@media screen and (max-width: 768px){
    .m-mobile-hide {
        display: none !important;
    }
    .m-mobile-show {
        display: block !important;
    }
    .m-padded-lr-responsive{
        padding-left: 0 !important;
        padding-right: 0 !important; ;
    }
    .m-mobile-clear{
        padding-left: 0 !important;
        padding-right: 0 !important; ;
    }
    .m-mobile-wide{
        width: 100%;
    }
}

效果
在这里插入图片描述

羔羊深
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SpringBoot归档和新闻的新闻详情页
ljcmy13579的博客
08-03 357
SpringBoot归档和新闻的新闻详情页 归档功能 创建归档archives.html，大致只要修改中间部分代码 <!--中间内容--> <div class="m-container-small m-padded-tb-big" style="height: 800px!important;"> <div class="ui container"> <!--header--> <div class="u
博客系统后端设计(三) - 实现获取博客列表页功能
超烦豆先森
05-08 759
约定前后端交互接口、实现后端代码、实现前端代码、测试代码、涉及到的两个 Bug
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
html个人博客的静态网页
04-29
这个文件里面是一个有关个人博客的静态网页，网页排版、和美观方面都很好。个人博客静态网页里面代码很完善，可以直接在浏览器上打开
HTML制作个人网页制作(简单静态HTML个人博客网页作品)
html精品源码
12-16 460
👨‍🔬个人网页制作 、大学生个人网页设计、 个人博客网站模板 、简单静态HTML个人网页作品🏷️ 个人博客静态HTML网页设计作品，采用DIV CSS布局制作，页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+J...
学生HTML个人网页作业作品~蛋糕甜品店铺共11个页面(HTML+CSS+JavaScript)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-01 3万+
学生HTML个人网页作业作品~ 个人主页博客网页设计制作~ 大学生个人网站作业模板~简单个人网页制作 ~面包店铺电商网站模板html 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 红色的蛋糕甜品在线预订，面包店铺电
毕设&课设&项目&实训-朴上品牌设计网站---纯静态页面.zip
02-04
可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，...
springboot项目-个人博客系统静态页面
02-18
博客系统的前端部分 7个页面 login.html登录页 ... blog_list.html总的博客列表页——》用到了...myblog_list.html个人博客列表页 blog_content.html博客详情页 blog_edit.html博客编辑页 blog_update.html博客修改页
毕设&课设&项目&实训-静态的家具页面展示基于HTML css JavaScript.zip
最新发布
02-05
可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，...
毕设&课设&项目&实训-Web编程课程设计-纯静态网页开发的二次元风格的个人博客网站.zip
02-04
可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，...
简单的9个页面静态网页，适合做个人博客，适合课程设计
07-01
简单的9个页面静态网页，适合做个人博客，适合课程设计
一整套技术类个人博客模板 静态HTML模板 页面精美
05-23
一套完整的个人技术类博客模板，页面精美。本资源收集于互联网，如有侵权，请告知删除。
Python编程-字符串的编码转换、存储及乱码问题
stepup
04-25 2377
转自：http://www.qmailer.net/archives/251.html Python2（包括Python26、Python27等）的字符串通常包含str、unicode两种类型，通常str的字符串编码方式由源码文件的编码方式决定，目前使用的基本都是UTF-8的编码格式，所以要在py文件的头部指定编码格式： 1 # -*- c
简单JSP在线留言系统，使用JAVABEAN实现，刚刚学习jsp学的一个小项目
拾光博客
01-24 515
实现的功能 使用JavaBean技术编写实现用户留言功能的程序。要求：在页面上能够显示所有留言信息，在留言信息的上方有添加留言信息表单（包括用户名、是否匿名发表、留言信息等），通过该表单可以发表新的留言。留言信息包括用户名、留言信息、留言时间、审核方式，相关信息保存在msgDB数据库的message表中。 在第1题的基础上，编写实现管理员管理留言的功能的程序。要求：在页面上能够显示所有留言信息...
极速搭建一个个人博客网站
腾讯技术工程
04-14 670
作者：bookerzhao，腾讯 CSIG web前端开发工程师Github 为开源项目提供了用于静态页面展示的 Pages 服务，很多开发者都在上面托管了自己的静态网站和博客，不少开...
博客系统（页面设计）
Xian meng在努力呐-的博客
12-05 2311
1. 前端只是大致掌握，大致了解常用属性的使用 2. 基本能够看懂前端代码就行 3. 一行一行就使用弹性布局：`display:flex;` 4. 行内元素的限制 -> 转为块级元素 ：`display:block;` 5. 博客系统前端页面设计复盘！
实训-个人博客01（静态首页）
qq_46302173的博客
06-02 269
文章目录零、功能规划一、页面开发1、在WebStorm中新建一个项目2、新建静态目录3、在blog中新建一个html页面-index.html4、移动端预览设置5、引入相关内容并写出大概的框架6、导航(1)(2)新建css-me.css(3)me.css(4)效果(5)添加图标(6)搜索框7、底部内容（1）将所需图片拷贝到images文件夹中（2）底部footer(3)效果8，中间内容 零、功能规划 前端展示：首页、详情页、分类、标签、归档、关于我 后台管理：模板页 一、页面开发 在下面的代码中将用到其中
零基础搭建完全免费个人静态博客
weixin_40846541的博客
07-30 1983
首先千万不要产生畏惧心理，以为搭建一个网站是只有程序员才能干的事情，我也是边学边做就摸索清楚了怎么搭建一个静态个人博客。不要害怕提问，因为搜索引擎老师不会不耐烦，也不会羞辱你，必应 谷歌 我就是这么一步步搜出来的。 创立一个个人静态网页博客有多种方式，你不用预先学习好 HTML 等类似的知识才能做一个网页，就像你拼乐高的时候不用学习怎么制作乐高零件，因为厂家已经制作好了，你买过来成品照着步骤拼就好了。如果你比较着急想要先上线一个网页再说的话，其实已经有很多做好的网页实
apisix-dashboard 访问静态页面
10-27
要访问apisix-dashboard的静态页面，需要先编译dashboard组件生成静态页面。具体步骤如下： 1. 进入apisix-dashboard目录：cd /path/to/apisix-dashboard 2. 安装依赖：npm install 3. 编译dashboard组件：npm run ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值