SpringBoot--个人博客--2.页面设计与开发--首页

最新推荐文章于 2021-10-25 00:27:50 发布
最新推荐文章于 2021-10-25 00:27:50 发布
阅读量424 收藏 1
点赞数 1
分类专栏： 项目实践 # SpringBoot--个人博客 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41988224/article/details/104122409
版权

2.1设计

设计原型工具：axure
前端框架：Semantic UI

2.2页面开发-首页

2.2.1代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--移动端预览设置-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>首页</title>
    <!--引入semantic框架 CDN方式-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <!--引入自定义的CSS-->
    <link rel="stylesheet" href="./static/css/me.css">
</head>
<body>

<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini">
    <!--整个容器用了inverted，内部的ui组件也要用-->
    <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="home icon"></i>首页</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="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-padded-tb-large">
    <div class="ui container">
        <div class="ui stackable grid">
            <!--左边博客列表-->
            <div class="eleven wide column">
                <!--header-->
                <div class="ui top attached m-padded-lr-large segment">
                    <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">&nbsp14&nbsp;</h2>篇
                            </div>
                        </div>
                </div>
                <!--content-->
                <div class="ui attached m-padded-lr-large segment">
                    <div class="ui padded vertical segment m-padded-tb-large">
                            <div class="ui mobile reversed stackable grid">
                                <div class="eleven wide column">
                                    <h3 class="ui header">疫情下的魔幻现实主义</h3>
                                    <p class="m-text">所谓“魔幻现实主义”，就是看起来很魔幻，但实际上很现实。之所以认为这个世界太魔幻，是因为之前的认识不够现实。</p>
                                    <div class="ui grid">
                                        <div class="eleven wide column">
                                            <div class="ui mini horizontal link list">
                                                <div class="middle aligned item">
                                                    <img src="https://i.picsum.photos/id/1014/6016/4000.jpg" alt="" class="ui avatar image">
                                                    <div class="content"><a href="#" class="header">方一帆</a></div>
                                                </div>
                                                <div class="middle aligned item">
                                                    <i class="calendar icon"></i>2020-02-04
                                                </div>
                                                <div class="middle aligned item">
                                                    <i class="eye icon"></i>3412
                                                </div>
                                            </div>
                                        </div>
                                        <div class="middle aligned right aligned five wide column">
                                            <a href="#" target="_blank" class="ui teal basic label m-padded-tb-tiny m-text-thin">认知升级</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <a href="#" target="_blank">
                                        <img src="https://i.picsum.photos/id/1014/6016/4000.jpg" alt="" class="ui rounded image">
                                    </a>
                                </div>
                            </div>
                        </div>
                </div>
                <!--footer-->
                <div class="ui attached m-padded-lr-large segment">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <a href="#" class="ui mini teal basic button">上一页</a>
                        </div>
                        <div class="right aligned column">
                            <a href="#" class="ui mini teal basic button">下一页</a>
                        </div>
                    </div>
                </div>
            </div>
            <!--右边的top-->
            <div class="five wide column">
                <!--分类-->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="idea icon"></i>分类
                            </div>
                            <div class="right aligned column">
                                <a href="#" target="_blank">more<i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui teal segment">
                        <div class="ui fluid vertical menu">
                            <a href="#" class="item">
                                学习日志
                                <div class="ui teal basic left pointing label">13</div>
                            </a>
                            <a href="#" class="item">
                                学习日志
                                <div class="ui teal basic left pointing label">13</div>
                            </a>
                            <a href="#" class="item">
                                学习日志
                                <div class="ui teal basic left pointing label">13</div>
                            </a>
                            <a href="#" class="item">
                                学习日志
                                <div class="ui teal basic left pointing label">13</div>
                            </a>
                            <a href="#" class="item">
                                学习日志
                                <div class="ui teal basic left pointing label">13</div>
                            </a>
                            <a href="#" class="item">
                                学习日志
                                <div class="ui teal basic left pointing label">13</div>
                            </a>
                        </div>
                    </div>
                </div>
                <!--标签-->
                <div class="ui segments m-margin-top-large">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="tags icon"></i>标签
                            </div>
                            <div class="right aligned column">
                                <a href="#" target="_blank">more<i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui teal segment">
                        <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                            方法论<div class="detail">23</div>
                        </a>
                        <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                            方法论<div class="detail">23</div>
                        </a>
                        <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                            方法论<div class="detail">23</div>
                        </a>
                        <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
                            方法论<div class="detail">23</div>
                        </a>
                    </div>
                </div>
                <!--最新推荐-->
                <div class="ui segments m-margin-top-large">
                    <div class="ui secondary segment">
                        <i class="bookmark icon"></i>最新推荐
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-black m-text-thin">用户故事（user story）</a>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-black m-text-thin">用户故事（user story）</a>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-black m-text-thin">用户故事（user story）</a>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-black m-text-thin">用户故事（user story）</a>
                    </div>
                </div>
                <!--二维码-->
                <h4 class="ui horizontal divider header m-margin-top-large">扫码关注我</h4>
                <div class="ui centered card" style="width:11em">
                    <img src="./static/images/WeChat.jpg" alt="" class="ui rounded image">
                </div>
            </div>
        </div>
    </div>
</div>

<!--底部-->
<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" alt="" style="width:110px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header" m-text-thin m-text-spaced m-opacity-mini>最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">练习清单</a>
                    <a href="#" class="item">失败要趁早</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header" m-text-thin m-text-spaced m-opacity-mini>联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Email</a>
                    <a href="#" class="item">QQ</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header" m-text-thin m-text-spaced m-opacity-mini>最新博客</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright 2020</p>
    </div>

</footer>

<!--引入jQuery CDN方式-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<!--引入semantic框架 CDN方式-->
<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

/*调整内边距（上下）*/
.m-padded-tb-mini{
    /* important提高它的优先级，来覆盖semantic中的设定 */
    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-large{
    padding-left: 2em !important;
    padding-right: 2em !important;
}

/*调整外边距*/
.m-margin-tb-tiny{
    margin-top: 0.3em !important;
    margin-bottom: 0.3em !important;
}
.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-right-top{
    position: absolute;
    top:0;
    right: 0;
}

/*字体变瘦*/
.m-text-thin{
    font-weight: 300 !important;
}

/*增大字间距*/
.m-text-spaced{
    letter-spacing: 1px !important;
}

/*增大行距*/
.m-text-lined{
    line-height: 1.8;
}

/*降低字体透明度*/
.m-opacity-mini{
    opacity: 0.8 !important;
}

/*字体设置整合*/
.m-text{
    font-weight: 300 !important;
    letter-spacing: 1px !important;
    line-height: 1.8;
    opacity: 0.8 !important;
}

/*使blok（原本是竖向）横向展示*/
.m-inline-block{
    display: inline-block !important;
}

/*自定义的container*/
.m-container{
    max-width:72em !important;
    margin:auto !important;
}

/*自定义颜色*/
.m-black{
    color: #333 !important;
}

.m-mobile-show{
    display: none !important;
}

/*在手机端的显示（当宽度小于768像素时）*/
@media screen and (max-width: 768px) {
    .m-mobile-hide{
        display: none !important;
    }
    .m-mobile-show{
        display: block !important;
    }
}

2.2.2笔记：

<!--移动端预览设置-->
<meta name="viewport" content="width=device-width,initial-scale=1.0">

meta标签：

  • 描述 HTML 文档的元数据，通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据
  • 元数据不会显示在客户端，但是会被浏览器解析
  • meta标签通常位于head区域内
  • 实例 1 - 定义文档关键词，用于搜索引擎：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

实例 2 - 定义web页面描述：

<meta name="description" content="Free Web to learn HTML and CSS">

实例 3 - 定义页面作者：

<meta name="author" content="Hege">

实例 4 - 每30秒刷新页面：

<meta http-equiv="refresh" content="30">
  • 每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。
<!--导航-->
<nav class="ui inverted attached segment">
  • semantic常用组件segment，ui表示ui组件
  • inverted表示颜色反转
  • attached表示导航栏四个角没有圆角，依附在顶部
<a href="#" class="it【em"><i class="home icon"></i>首页</a>
  • a标签的href属性用于指定超链接目标的URL
  • a标签中必须提供 href 属性或 name 属性
<div class="ui container">
  • semantic自带的容器，有响应式效果，能根据屏幕尺寸展示最适应的效果
<img src="https://i.picsum.photos/id/1014/6016/4000.jpg" alt="" class="ui avatar image">
  • 设置一个图片作为圆形的头像
 <h4 class="ui horizontal divider header m-margin-top-large">扫码关注我</h4>
  • 实现一条横线，并在横线中间显示文字
<div class="ui inverted secondary stackable menu">
  • stackable使菜单、grid可以自适应，随着屏幕大小调整
 <div class="ui mobile reversed stackable grid">
      <div class="eleven wide column">
      </div>
      <div class="five wide column">
      </div>
  • mobile reversed在手机端会把11这列和下面5这列调换顺序显示
<!--导航-->
<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
       <i class="sidebar icon"></i>
   </a>

<script>
   $('.menu.toggle').click(function () {
       $('.m-item').toggleClass('m-mobile-hide')
   })
</script>
  • 当点击sidebar图标按钮时，显示手机端隐藏的内容，即有m-mobile-hide属性的内容
立flag的咸鱼
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java毕业设计-基于springboot开发的个人博客系统设计与实现-毕业论文（附毕设源代码）.rar
03-07
本次分享的毕业设计资源是“基于Spring Boot开发的个人博客系统设计与实现”的毕业论文及源代码，这一资源为即将进行毕业设计或相关领域学习的学生提供了一个极佳的参考和起点。 该系统采用Spring Boot框架进行开发...
SpringBoot（4）之SpringBoot界面设计
Karen博客
12-14 4598
SpringBoot界面设计 步骤： 【1-建项目加依赖】创建Maven项目，pom.xml中添加 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt; parent&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; 启动器、spring-boot-start-web 启动器（springboot必须）、spring-boot-star
前端常用图片文件下载上传方法
WangMrII的博客
05-08 438
本文整理了前端常用的下载文件以及上传文件的方法 例子均以vue+element ui+axios为例,不使用el封装好的上传组件，这里自行进行封装实现 先附上demo 上传文件 以图片为例，文件上传可以省略预览图片功能 图片上传可以使用2种方式：文件流和base64; 1.文件流上传+预览： <input type="file" id='imgBlob' @change='change...
2021-10-23个人博客项目知识点记录
m0_46795558的博客
10-25 229
个人博客项目知识点记录 前端界面展示部分 由于前端部分采用了前端开发框架Semantic UI，因此这里主要记录一下在项目开发过程中所用到的知识点。 1.html + css + js 复习 css 元素选择器 类选择器 <h1 class="important"> This heading is very important. </h1> <p class="important"> This paragraph is very important. &
SpringBoot--个人博客--3.页面设计与开发--详情页
weixin_41988224的博客
02-10 403
3.1笔记
springboot个人博客的构建（6） 分类管理(标签管理)
qq_40979622的博客
11-02 2584
标签管理和分类管理一样。 分类管理页面： 首先：建立HTML文件types.html 这个是分类列表的页面。  这个页面是由blog.html页面由来的，进行修改得到。 看源代码:这里用的模板引用，在admin/下面建立新的模板引擎。 先看模板引擎： &lt;!DOCTYPE html&gt; &lt;html lang="en" xmlns:th="http://www...
毕业设计-基于springboot-校园博客系统-设计与实现（源码 + 数据库 + LW + PPT + 演示视频）.zip
08-16
对于本校园博客系统的设计来说，系统开发主要是采用java语言技术，在整个系统的设计中应用MySQL数据库来完成数据存储，具体根据校园博客系统的现状来进行开发的，具体根据现实的需求来实现校园博客系统网络化的管理...
毕业设计-基于SpringBoot的个人博客-设计与实现（源码+LW+演示视频）.zip
最新发布
03-14
本次开发的个人博客系统，有管理员，用户，博主三个角色。管理员功能有个人中心，用户管理，博主管理，文章分类管理，博主文章管理，系统公告管理，轮播图管理。博主可以注册登录，修改个人信息，对自己发布的博主...
springboot200基于Springboot+Vue个人博客系统的设计与实现-毕业源码案例设计
03-10
开发本程序后台用到了Spring Boot开发技术，页面设计采用VUE框架和layui样式。数据库采用关系数据库市场占有率最高的MySQL作为本程序使用的数据库，完全符合程序使用并且有丰富的拓展余地。程序从需求到设计，从开发...
课程设计-SpringBoot个人博客系统（开发文档 + 部署视频 + 数据库）
12-13
系统分为前台和后台，有详细的开发文档和运行视频，页面整洁美观，实现的功能有： 1、博客分类、浏览、详情、评论 2、博客数据总览 3、发布博客 4、博客信息管理 5、评论信息管理 6、分类信息管理 7、标签信息管理 8...
基于Spring Boot的个人博客设计与研究-毕业设计.zip
04-24
**技术组合：** * 后端：Spring Boot + JPA + thymeleaf模板 * 数据库：MySQL * 前端UI：Semantic UI框架 **工具与环境：** * IDEA * Maven 3 * JDK 8
Android UI使用HorizontalListView实现水平滑动
08-26
主要为大家详细介绍了Android UI使用HorizontalListView实现水平滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
picsum-photos：洛雷姆·伊普苏姆...但照片
02-04
洛雷姆·皮克苏姆（Lorem Picsum） 洛雷姆·伊普森（Lorem Ipsum）...不过是照片。 Lorem Picsum是一项提供易于使用的时尚占位符的服务。 它是用Go语言编写的，并使用Redis，PostgreSQL和DigitalOcean Spaces。 在本地运行以进行开发 首先，请确保您已安装Go，并且此git repo已克隆。 您还需要 。 要构建前端，您需要安装NodeJS。 运行以下命令以安装依赖项并进行构建： npm install npm run-script build 如果要在开发过程中进行更改时自动重建，可以使用npm run-script watc
夜光带你走进我擅长的领域：SpringBOOT（10）
夜光的博客
08-20 337
夜光序言： 有时候我们有些近视，忽略了离我们最真的情感；有时候我们有些远视，模糊了离我们最近的幸福。一辈子真的很短，远没有我们想象的那么长，永远真的没有多远。所以,对爱你的人好一点，对自己好一点，今天是你的枕畔人，明天可能成了陌路人，如果这辈子来不及好好相爱，就更不要指望下一辈子还能遇见。 正文：采用Semantic UI前端框架，和jquery，css，js...
Spring Boot总结（三）：Spring Boot界面设计
qq_36807862的博客
08-06 2106
Spring Boot总结（一）：入门 Spring Boot总结（二）：Spring Boot中使用数据库 Spring Boot总结（三）：Spring Boot界面设计 Spring Boot总结（四）：提高数据库访问性能 Spring Boot总结（五）：安全设计 Spring Boot总结（六）：Spring Boot SSO Spring Boot总结（七）：使用分布式文件...
spring boot 设计列表页详情页HTML
weixin_30871293的博客
10-17 416
1.关于退出功能 在layer中可以直接绑定事件不用再调用关闭网页事件，直接利用window.location.href就可以控制在当前页面打开了 2.实现登录时获取本地数据库 中标公告的 List集合 3.thymeleaf模板循环输出 list列表页 方法格式为： <!--列表开始--> <table width="100%" border...
Spring boot实训 个人博客系统四 归档页
aqaerw的博客
07-05 176
1.新建文件archives.html 2.将头部代码复制过来,将头部文件生成: 2.在index添加活动显示页面: 3.修改头部名称为归档: 4.编写中间主内容: <div class="ui fluid vertical menu"> <a href="#" target="_blank" class="item"> <span>
基于springboot实现的个人网站
qq_42191033的博客
06-25 2861
功能描述： 1、接单管理 接单管理：分页、可以进行CRUD操作、以及批量的删除等、图表生成等 文件管理：可以上传文件到服务器，并且可以进行下载、删除（使用的是OSS服务器） 因为：注册什么的太简单了，也就没有添加 基于springboot+vue-admin-template模板进行开发 效果图如下： 代码： 如果需要可以联系我的扣扣（3421793724） 代码都进行了良好的封装，但是又不会很难，确保了新手玩家都可以看懂（简简单单又好看的代码） 每个代码也都进行了注释，不懂的也可以问我进行1V1服
开发小而美的个人博客之页面开发
erwaplus的博客
07-02 716
一、技术准备 前端：HTML、CSS、JS、Thymeleaf、Semantic UI 工具：WebStorm 二、前端展示 1、首页 ①首页效果展示 ②首页代码展示 导航栏部分 <nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" > <div class="ui container"> <d
基于springboot的个人博客系统设计与实现
05-16
作为一种开源的JavaWeb开发框架...总之，基于Spring Boot的个人博客系统设计与实现，需要综合运用多种技术和工具，从博客的存储、发布、浏览、评论、点赞到部署和维护等多个方面进行设计和实现，以达到相应的业务需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值