【JavaEE】博客前端

news2024/10/6 9:12:06

目录

 一、列表页

1.1导航条

 1.2主题区域

1.2.1个人信息框

1.2.2 内容区

 二、登录页

三、详情页

 一、列表页

整体布局如下：

1.1导航条

导航条分为三块，整体都设置id为导航栏，然后左右分为导航栏左和导航栏右。左边靠左，右边靠右。再在开头加入一张图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客列表页</title>
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/list.css">
</head>
<body>
  <div id="导航栏">
    <div id="导航栏左">
      <div id="logo">
        <img src="img/logo1.jpg">
      </div>
      <div id="name">
        我的博客系统
      </div>
    </div>
    <div id="导航栏右">
      <a href="#">主页</a>
      <a href="#">写博客</a>
      <a href="#">登录</a>
    </div>
  </div>
</body>
</html>

 首先我们需要把整个框架靠上整个浏览器页面，否则正常是会有空格的，使左右上下都没有空隙，处于一个盒子中。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

然后使小图片变小设置50px像素。

div#logo img {
    height: 50px;
}

 然后使导航条中的a标签变为白色，去掉下划线。

div#导航栏 a {
    color: #eee;
    text-decoration: none;
}

 导航条分为左右，需要让一边靠左一边靠右在父元素上设置display: flex。弹性布局:两个资源在主轴上justify-content: space-between;使导航栏出现左右两侧分区。先设置一个弹性布局：display: flex;设置颜色宽高之类的。padding-left: 100px;padding-right: 100px;使导航栏和左右有100px像素的间距。

div#导航栏 {
    background-color: rgba(0, 0, 0, .4);
    color: #eee;
    display: flex;
    width: 100%;
    height: 60px;
    align-items: stretch;
    justify-content: space-between;
    padding-left: 100px;
    padding-right: 100px;
}

然后呢继续设置弹性布局，需要使图片和文字在一行。display: flex;align-items: center;

 然后需要让图片和文字、文字和文字之间有距离需要增加一个宽度，调节弹性布局的主轴：justify-content: space-between;然后再设置宽度。

div#导航栏左 {
    display: flex;
    align-items: center;
    width: 220px;
    justify-content: space-between;
}

div#导航栏右 {
    display: flex;
    align-items: center;
    width: 220px;
    justify-content: space-between;
}

 然后使图标设置圆形border-radius: 50%;然后让被遮挡的部分都不显示：overflow:hidden;

div#logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow:hidden;
}

 1.2主题区域

下图为主体区域的大致样式：

1.2.1个人信息框

<div id="主体区域">
    <div id="个人信息">
        <div id="avatar">
            <img src="img/doge.jpg">
        </div>
        <div id="username">
            佳佳
        </div>
        <div id="git">
            <a href="https://gitee.com">git 仓库地址</a>
        </div>
        <div id="文章数量区域">
            <div id="文章数量左区域">
                <div>文章</div>
                <div>2</div>
            </div>
            <div id="文章数量右区域">
                <div>分类</div>
                <div>1</div>
            </div>
        </div>
    </div>
</div>

孩子选择器 结合 通配符选择器 此处的含义是: div#个人信息所有孩子（不是子孙）选中 。

首先配置个人信息的整体像素为6px。以及图片的像素120px。

还有小图标的形状设定。

div#个人信息 > * {
    margin: 6px;
}
div#avatar img {
    width: 120px;
}
div#avatar {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%;
}

 然后对有链接的文本取消下划线，设置颜色。

div#个人信息 a {
    color: #555;
    text-decoration: none;
}

 设置一个背景，使他滑动屏幕时不移动。

body {
    background-image: url(../img/cat.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

div#个人信息 {
    background-color: rgba(255, 255, 255, .8);
    border-radius: 12px;
    width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 12px; 
}

然后再设置整体得到颜色，像素，宽度，居中，设置间距等等，在导航条中讲过。

div#文章数量区域 {
    display: flex;
    text-align: center;
    width: 80px;
    justify-content: space-between;
}

然后使文章和的分类在同一行，数量对应，再设置宽。

1.2.2 内容区

    <div id="内容区">
        <ol>
            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>


            <li>
                <div class="文章信息">
                    <h2>我的第一篇文章</h2>
                    <p class="发表时间">2023-01-05 10:19:28</p>
                    <p class="文章简介">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor </p>
                    <div class="功能区">
                        <a href="#">查看全文 &gt;&gt;</a>
                    </div>
                </div>
            </li>
        </ol>
    </div>
div#主体区域 {
    display: flex;
    align-items: start;
    justify-content: center;
    padding-right: 100px;
}

然后再把整个区域设置为中间，并设置右侧空白100px像素。

div#内容区 {
    background-color: rgba(255, 255, 255, .8);
    border-radius: 12px;
    width: 1000px;
    margin-left: 16px;
}

再将内容区设置离左空白16px像素，设置颜色等。

body {
    background-image: url(../img/cat.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

设置背景为指定的图片。 

div#内容区 ol {
    list-style: none;
}

然后取消每一层的标记数字。

div.文章信息 {
    margin: 30px;
}
div.文章信息 > * {
    margin: 12px;
}
div.文章信息 h2 {
    text-align: center;
}

  使每个小文章有30px像素。看的更清晰。让文章下的所有信息像素为12px。让每个文章的标题居中。

div.文章信息 p.发表时间 {
    text-align: center;
    color: #c52813;
}
div.文章信息 p.文章简介 {
    text-indent: 2em;
}

让发表时间也居中并且置为红色。让文章简介首行留出两字符。

div.文章信息 div.功能区 {
    display: flex;
    align-items: center;
    justify-content: center;
}
div.文章信息 div.功能区 a {
    border: 2px solid #000;
    padding: 5px 15px;
    color: #000;
    text-decoration: none;
}

然后让功能区在块中处于中间位置，然后利用border: 2px solid #000给链接处加一个块围住，使块为白色，将块设置一个宽和高，然后取消链接的下划线。

list.css代码：

div#内容区 ol {
    list-style: none;
}

div.文章信息 {
    margin: 30px;
}
div.文章信息 > * {
    margin: 12px;
}
div.文章信息 h2 {
    text-align: center;
}
div.文章信息 p.发表时间 {
    text-align: center;
    color: #c52813;
}
div.文章信息 p.文章简介 {
    text-indent: 2em;
}
div.文章信息 div.功能区 {
    display: flex;
    align-items: center;
    justify-content: center;
}
div.文章信息 div.功能区 a {
    border: 2px solid #000;
    padding: 5px 15px;
    color: #000;
    text-decoration: none;
}

layout.css代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-image: url(../img/cat.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

div#logo img {
    height: 50px;
}

div#导航栏 a {
    color: #eee;
    text-decoration: none;
}

div#导航栏 {
    background-color: rgba(0, 0, 0, .4);
    color: #eee;
    display: flex;
    width: 100%;
    height: 60px;
    align-items: stretch;
    justify-content: space-between;
    padding-left: 100px;
    padding-right: 100px;
}

div#导航栏左 {
    display: flex;
    align-items: center;
    width: 220px;
    justify-content: space-between;
}

div#导航栏右 {
    display: flex;
    align-items: center;
    width: 220px;
    justify-content: space-between;
}

/* 孩子选择器 结合 通配符选择器 */
/* 此处的含义是: div#个人信息所有孩子（不是子孙）选中 */

div#个人信息 > * {
    margin: 6px;
}

div#个人信息 {
    background-color: rgba(255, 255, 255, .8);
    border-radius: 12px;
    width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
}


div#logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow:hidden;
}

div#个人信息 a {
    color: #555;
    text-decoration: none;
}

div#avatar {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%;
}

div#avatar img {
    width: 120px;
}

div#文章数量区域 {
    display: flex;
    text-align: center;
    width: 80px;
    justify-content: space-between;
}
div#内容区 {
    background-color: rgba(255, 255, 255, .8);
    border-radius: 12px;
    width: 1000px;
    margin-left: 16px;
}

div#主体区域 {
    display: flex;
    align-items: start;
    justify-content: center;
    padding-right: 100px;
}

body {
    background-image: url(../img/cat.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

 二、登录页

 登录页大致就长成这样，然后根据这个进行设计。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>博客列表页</title>
  <link rel="stylesheet" href="css/login.css">
</head>
<body>
<div id="导航栏">
  <div id="导航栏左">
    <div id="logo">
      <img src="img/logo1.jpg">
    </div>
    <div id="name">
      我的博客系统
    </div>
  </div>
  <div id="导航栏右">
    <a href="#">主页</a>
    <a href="#">写博客</a>
    <a href="#">登录</a>
  </div>
</div>

<div id="主体区域">

  <div id="登录框">
    <form>
      <h1>登录</h1>
      <div id="输入区域">
        <div id="用户名区域" class="输入">
          <label>
            <span>用户名</span>
            <input type="text" name="username">
          </label>
        </div>

        <div id="密码区域" class="输入">
          <label>
            <span>密码</span>
            <input type="password" name="password">
          </label>
        </div>

        <div id="按钮区域">
          <button>提交</button>
        </div>
      </div>
    </form>
  </div>

</div>
</body>
</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-image: url(../img/cat.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

div#logo img {
    height: 50px;
}

div#导航栏 a {
    color: #eee;
    text-decoration: none;
}

div#导航栏 {
    background-color: rgba(0, 0, 0, .4);
    color: #eee;
    display: flex;
    width: 100%;
    height: 60px;
    align-items: stretch;
    justify-content: space-between;
    padding-left: 100px;
    padding-right: 100px;
}

div#导航栏左 {
    display: flex;
    align-items: center;
    width: 220px;
    justify-content: space-between;
}

div#导航栏右 {
    display: flex;
    align-items: center;
    width: 220px;
    justify-content: space-between;
}

div#logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow:hidden;
}

div#主体区域 {
    height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
}

div#登录框 {
    background-color: rgba(255, 255, 255, .8);
    width: 500px;
    padding: 16px;
    font-size: 1.5em;
    border-radius: 16px;
}

div#登录框 h1 {
    text-align: center;
}

div#用户名区域, div#密码区域, div#按钮区域 {
    margin: 16px 0;
    display: flex;
}

.输入 label {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.输入 span {
    width: 80px;
}

.输入 input {
    width: 388px;
    height: 100%;
    font-size: 1.5em;
    padding: 6px 15px;
    border: none;
    background-color: #fff;
    outline: none;
    border-radius: 8px;
}

button {
    width: 100%;
    font-size: 1.5rem;
    background-color: #531748;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 0;
}

 ​

三、详情页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客列表页</title>
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/detail.css">
</head>
<body>
<div id="导航栏">
    <div id="导航栏左">
        <div id="logo">
            <img src="img/logo1.jpg">
        </div>
        <div id="name">
            我的博客系统
        </div>
    </div>
    <div id="导航栏右">
        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">登录</a>
    </div>
</div>

<div id="主体区域">
    <div id="个人信息">
        <div id="avatar">
            <img src="img/doge.jpg">
        </div>
        <div id="username">
            比特老陈
        </div>
        <div id="git">
            <a href="https://gitee.com/peixinchen2">git 仓库地址</a>
        </div>
        <div id="文章数量区域">
            <div id="文章数量左区域">
                <div>文章</div>
                <div>2</div>
            </div>
            <div id="文章数量右区域">
                <div>分类</div>
                <div>1</div>
            </div>
        </div>
    </div>
    <div id="内容区">
        <h1>我的第一篇文章</h1>
        <p class="发表时间">2023-01-05 11:18:23</p>
        <p id="第1段" class="文章段">深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。</p>
        <p id="第2段" class="文章段">种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor 计算的框架自定义函数，该函数一般是 c++ 层的。c++ 层的自定义函数中，功能是用于生成一个 Operation 的符号表达。比如一个对于加法运算，trace 就是记录一个符号化的加法算子。如此一连串的运算就被转换了符号化的计算图。</p>
        <p id="第3段" class="文章段">另外一种计算图生成是基于 AST（抽象语法树） 解析的。在代码执行前，直接根据 Python 文本代码得到 Python AST，然后根据 AST 来翻译成计算图（也叫做中间代码 IR）。</p>
        <p id="第4段" class="文章段">Python（特指 CPython）解释器执行，第一阶段会先把 Python 源码解析成 AST，第二阶段根据 AST 生成和优化 ByteCode（字节码），第三阶段在虚拟机中执行 ByteCode。</p>
        <p id="第5段" class="文章段">基于 AST 解析的计算图生成，发生在这里的第一阶段；基于 trace tensor 的计算图生成，发生在第三阶段之后。</p>
    </div>

</div>
</body>
</html>

详情页简单些来就更简单了，延续列表页大部分的代码，左侧的个人信息以及导航条都延续，只更改内容区。

div#内容区 {
    padding: 16px;
    /* 100vh：浏览器的高度 */
    min-height: calc(100vh - 60px);
}

div#内容区 h1 {
    text-align: center;
    margin-bottom: 12px;
}

div#内容区 p.发表时间 {
    text-align: center;
    color: #c52813;
    margin-bottom: 12px;
}

div#内容区 p.文章段 {
    text-indent: 2em;
    line-height: 2em;
    margin-bottom: 12px;
}

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/169798.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

计算机视觉Computer Vision课程学习笔记四之Region and Edge Descriptions

计算机视觉Computer Vision课程学习笔记四之Region and Edge Descriptions

第四章讲了区域和边界的描述 包括最佳区域评估方法&#xff0c;多物体识别&#xff0c;标签算法&#xff0c;斑点标记 以及矩评估的方法和优劣 Region Description Simple measurements on binary images • Use for recognition, etc. • Generate region descriptions whic…
阅读更多...
Win10+CMake+VS2017编译OpenCV4.5.5

Win10+CMake+VS2017编译OpenCV4.5.5

第一步&#xff1a;准备工作1 下载opencv4.5.5下载OpenCV4.5.5&#xff0c;并解压到自己新建文件夹opencv下。2 下载opencv_contrib4.5.5下载opencv_contrib4.5.5&#xff0c;解压到上面的opencv文件夹中&#xff0c;并在opencv文件夹中新建一个build文件夹&#xff0c;用来存放…
阅读更多...
第一天总结 之 用户管理界面的实现 之 添加操作 的实现

第一天总结 之 用户管理界面的实现 之 添加操作 的实现

添加操作的实现 明确页面的跳转 找到 admin_adduser.jsp中 form表单 前端的添加页面展示 在表单中输入 信息 点击注册跳转到 from表单对应的 action地址 UserAddServlet 创建UserAddServlet 从前端的form表单中获取值 然后在service层 进行 业务操作 即将这些属性存放在 Ob…
阅读更多...
私有部署与SaaS模式网站有什么区别

私有部署与SaaS模式网站有什么区别

什么是SaaS SaaS 是 Software-as-a-Service 的简称&#xff0c;它是一种通过互联网提供软件的模式。 以官网为例&#xff0c;SaaS订阅的网站通常统一部署在SaaS提供商的云服务器上。用户通过自己的实际需求订购对应的网站系统服务&#xff0c;按订购的系统功能、使用流量/存储…
阅读更多...
Word处理控件Aspose.Words功能演示：用Java从Word文档中提取文本

Word处理控件Aspose.Words功能演示：用Java从Word文档中提取文本

Aspose.Words For .NET是一种高级Word文档处理API&#xff0c;用于执行各种文档管理和操作任务。API支持生成&#xff0c;修改&#xff0c;转换&#xff0c;呈现和打印文档&#xff0c;而无需在跨平台应用程序中直接使用Microsoft Word。此外&#xff0c;API支持所有流行的Word…
阅读更多...
凭记忆错题记录-

凭记忆错题记录-

3、某种部件用在2000合计算机系统中&#xff0c;运行工作1000小时后&#xff0c;其中有4台计算机的这种部件失效&#xff0c;则该部件的千小时可靠性度R为()。 A.0.990 B.0.992 C.0.996 D.0.998 【参考答案】D　 8、9、X509数字证书标准推荐使用的密码算法是(8)&#xff0c;而…
阅读更多...
计算机视觉Computer Vision课程学习笔记八之Recognition识别 low level

计算机视觉Computer Vision课程学习笔记八之Recognition识别 low level

第八章讲了全局图像识别的方法 距离 空间特征 简单的分类模型 Recognition (low level / global matching) Task – from a description of the image in terms of “good” features (not just blobs) extract a meaning • Detect • Classify • Etc. • Techniques – Te…
阅读更多...
C++动态规划超详细总结

C++动态规划超详细总结

动态规划首先来介绍一下动态规划&#xff0c;但我不想用过于官方的语言来介绍。动态规划是一种思想&#xff0c;它常用于最优解问题&#xff08;即所有问题包括所有子问题的解为最优解&#xff09;&#xff0c;它有点像递推&#xff0c;是在已知问题的基础上解决其他问题。这种…
阅读更多...
【openWrt】安装后进行定制

【openWrt】安装后进行定制

修改openWrt管理后台默认端口vim /etc/config/uhttpd修改如下图内容然后重启uhttpd服务即可生效etc/init.d/uhttpd restart修改openWrt软件包源可以在openwrt后台改也可以在/etc/opkg/distfeeds.conf直接改vim /etc/opkg/distfeeds.conf配置如下src/gz handsomemod_core https:…
阅读更多...
通讯录的实现

通讯录的实现

问天下谁与争锋&#xff0c;唯我傲视苍穹 此句赠与在看文章的你 该通讯录使用的语言是C语言&#xff0c;涉及的知识有动态开辟内存&#xff0c;和文件内存管理。 动态开辟内存是用来不断给通讯录增加容量的 文件管理是用来将通讯录的信息存储到文件里。 我会先从简单的写起&am…
阅读更多...
公司裁员70%，小组从20个人降到5个人，年底公司耍无赖，全员打绩效C，就为了不发年终奖！...

公司裁员70%，小组从20个人降到5个人，年底公司耍无赖，全员打绩效C，就为了不发年终奖！...

年终奖写进合同&#xff0c;公司还能耍赖不给吗&#xff1f;一位网友吐槽&#xff1a;坐标小公司&#xff0c;公司裁员70%&#xff0c;自己组从20个人降到5个人。现在年底了&#xff0c;公司耍无赖&#xff0c;全员打绩效C&#xff0c;就为了不发年终奖&#xff01;年终奖都是写…
阅读更多...
454. 四数相加 II 383. 赎金信 15. 三数之和 18. 四数之和

454. 四数相加 II 383. 赎金信 15. 三数之和 18. 四数之和

454. 四数相加 II 巧用哈希表&#xff0c;哈希表键值对对应的是两数之和&#xff0c;两数之和出现次数。 首先定义 一个unordered_map&#xff0c;key放a和b两数之和&#xff0c;value 放a和b两数之和出现的次数。遍历大A和大B数组&#xff0c;统计两个数组元素之和&#xff0…
阅读更多...
Nginx与LUA（4）

Nginx与LUA（4）

您好&#xff0c;我是湘王&#xff0c;这是我的CSDN博客&#xff0c;欢迎您来&#xff0c;欢迎您再来&#xff5e;Nginx既然可以限制流量&#xff0c;那能不能「扩展」流量呢&#xff1f;当然可以&#xff0c;但可能不是你想象的那种「扩展」&#xff0c;更准确地来说是复制&am…
阅读更多...
KVM虚拟化基本操作

KVM虚拟化基本操作

1&#xff0c;虚拟化的一些介绍 虚拟化软件是可以让一台物理主机建立与执行一至多个虚拟化环境的软件&#xff0c;虚拟化将硬件、操作系统和应用程序一同封装一个可迁移的虚拟机档案文件中。 安装位置分类 目前从Hypervisor(虚拟机管理程序)安装位置分类&#xff0c;虚拟化层…
阅读更多...
[linux] 进程相关概念理解

[linux] 进程相关概念理解

文章目录1. 什么是进程管理本质的解释描述组织结论2.查看进程查看进程方法1创建终端输入命令显示进程一个程序存在多个进程查看进程方法2查看成功查看失败结论3.通过系统调用获取进程标识符1.获取PID值验证PID值是否正确2. 获取父进程PID值验证3. 父进程为什么不变化&#xff1…
阅读更多...
Vue3实现九宫格抽奖效果

Vue3实现九宫格抽奖效果

前言 好久没有写文章了&#xff0c;上一次发文还是年终总结&#xff0c;眨眼间又是一年&#xff0c;每每想多总结却是坚持不来&#xff0c;难顶。  这次分享一个九宫格抽奖小游戏&#xff0c;缘起是最近公司内部做积分抽奖需求&#xff0c;抽出其中抽奖动效做一个总结&#x…
阅读更多...
利用steam搬砖信息差项目，投入不到1万，一个月净赚3万+

利用steam搬砖信息差项目，投入不到1万，一个月净赚3万+

老实说&#xff1a;我在做之前没有任何经验&#xff0c;但做梦也没想到&#xff0c;刚开始操作收益就远远超出我的预期&#xff01; 这个账号我才运营了一个月左右&#xff0c;就有3万多的销售额。现在我每月的收入都在上万元&#xff0c;而且随着收益越来越多&#xff0c;操作…
阅读更多...
亚马逊云科技re:Invent引领云计算未来方向

亚马逊云科技re:Invent引领云计算未来方向

亚马逊云科技合作伙伴网络大使计划&#xff0c;吸纳拥有多项亚马逊云科技认证和深入亚马逊云科技知识的合作伙伴成员&#xff0c;协助其成为各个领域的技术专家&#xff0c;开发可供公众使用的内容&#xff0c;如技术写作、博客、开源项目&#xff0c;宣传亚马逊云科技及其合作…
阅读更多...
JavaWeb基础(四) JSP介绍

JavaWeb基础(四) JSP介绍

JavaWeb基础(四) JSP介绍 1&#xff0c;JSP 概述 JSP&#xff08;全称&#xff1a;Java Server Pages&#xff09;&#xff1a;Java 服务端页面。是一种动态的网页技术&#xff0c;其中既可以定义 HTML、JS、CSS等静态内容&#xff0c;还可以定义 Java代码的动态内容&#xf…
阅读更多...
.shp文件的存储结构是怎样的？底层读取shapefile文件

.shp文件的存储结构是怎样的？底层读取shapefile文件

.shp文件的存储结构是怎样的&#xff1f;底层读取shapefile文件基础知识shp的存储结构python 字节流读取Shp文件基础知识 大家都比较熟悉shp文件&#xff0c;它是GIS软件可以读取的矢量文件。但是大家知道它的存储结构吗&#xff1f;这次带着大家聊聊shp文件的存储结构&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023