博客页面---前端

news2024/12/29 3:16:03

目录

主页

HTML

CSS

文章详细页面

HTML

CSS

登录页面

HTML

CSS

文章编辑页

HTML

CSS

这只是前端的页面组成，还没有接入后端，并不是完全体

主页

HTML

<!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="css/common.css">
    <link rel="stylesheet" href="css/blog.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <!-- logo图片 -->
        <img src="image/logo.jpg" alt="" width="50px">

        <span class="title">我的博客系统</span>
        <span class="spacer"></span>

        <!-- 导航栏 -->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>

    <!-- 页面主体 -->
    <div class="container">

        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="image/蕾姆.jpg" alt="">
                <h2>墨轩</h2>
                <a href="#">github链接</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>3</span>
                </div>
            </div>


        <!-- 右侧个人信息 -->
        </div>
        <div class="container-right">
            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            <!-- &gt;是html的> 正常的>无法之间写入 -->

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

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

CSS

html,body{
    /* 让html和body占满浏览器窗口 */
    height: 100%;
    width: 100%;
    background-image: url(../image/风景图.jpg);
    /* background-repeat: no-repeat; */
    background-size: cover;
}

.nav{
    width: 100%;
    height: 50px;
    background-color: rgba(50, 50, 50,0.3);
    color: white;

    /* 开启弹性布局 */
    display: flex;
    /* 水平居中 */
    align-items: center;
}

.nav img{
    /* 将图片设为圆的 */
    border-radius: 50px;
    /* 左侧间距 */
    margin-left: 30px;
    /* 右侧间距 */
    margin-right: 20px;
}

/* 用于隔开我的博客和主页 */
.nav .spacer{
    width: 78%;
}

.nav a{
    color: white;
    /* 上下间隔0 左右6px */
    padding: 0 6px;
}

.container{
    width: 1000px;
    /* 使用这个函数 -直接必须有空格 */
    /* 因为是100% 导航栏自带50px 再用100% 会多出50px 所已要减去多出来的50px */
    height: calc(100% - 100px);
    margin: 0 auto;

    /* 让两个div能在同一行 */
    display: flex;

    /* 元素之间留有空隙 */
    justify-content: space-between;
}

.container-left{
    height: 30%;
    width: 200px;

    
}

.container-right{
    height: 100%;
    width: 750px;

    background-color: rgba(255, 255, 255, 0.5);

    /* 边框圆角 */
    border-radius: 10px;

    overflow: auto;
}

.card{
    background-color: rgba(255,255,255,0.5);
    /* 内边距距离 */
    padding: 30px;
    /* 边框圆角 */
    border-radius: 10px;
}

/* 用户图片 */
.card img{
    width: 140px;
    height: 140px;
    border-radius: 70px;
}

/* 用户昵称 */
.card h2{
    text-align: center;
    /* padding: 10px; */
}

/* 链接属性 */
.card a{
    /* 开启弹性布局后 居中 */
    display: block;
    text-align: center;
}

/* 文章属性 */
.card .counter{
    /* 开启弹性布局 */
    display: flex;
    text-align: center;

    /* 文章与分类分开 */
    justify-content: space-around;
}

/* 因为右侧文章会变换 所有右侧的css单独出来 */

右侧文章只要这个页面有，所以css是单独出来的

/* 右侧个人信息栏 */
.container-right{
    /* 一个em为一个字的长度 */
    text-indent: 3em;
    /* 距离四个边都有20px的距离 */
    padding: 20px;
}

.blog{
    text-align: center;
    /* 字体大小 */
    font-size: 37px;
    /* 行间距 上下5 左右0 */
    padding: 5px 0;
    /* 字体粗细 */
    font-weight: 600;
}

.date{
    text-align: center;
    font-size: 20px;
    color: grey;
    /* 行间距 上下5 左右0 */
    padding: 5px 0;
}

.container-right a{
    /* 设置成块级元素 */
    display: block;
    width: 150px;
    height: 30px;
    /* 块级元素居中 上下10 左右自适应 */
    margin: 10px auto;
    /* 边框 粗细 黑色 实习 */
    border: 2px black solid;
    text-align: center;
    color: black;
    /* 去除下划线 */
    text-decoration: none;

    /* 颜色过渡 1s */
    transition: all 1s;
}

/* 伪类选择器 鼠标放上去变色 */
.container-right a:hover{
    background-color: black;
    color: white;
}

文章详细页面

HTML

里面包含多个css文件

<!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="css/common.css">
    <link rel="stylesheet" href="css/blog.css">
    <link rel="stylesheet" href="css/blog_detail.css">
</head>
<body>
        <!-- 导航栏 -->
        <div class="nav">
            <!-- logo图片 -->
            <img src="image/logo.jpg" alt="" width="50px">
    
            <span class="title">我的博客系统</span>
            <span class="spacer"></span>
    
            <!-- 导航栏 -->
            <a href="blog_list.html">主页</a>
            <a href="blog_edit.html">写博客</a>
            <a href="#">注销</a>
        </div>

        <!-- 页面主体 -->
    <div class="container">

        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="image/蕾姆.jpg" alt="">
                <h2>墨轩</h2>
                <a href="#">github链接</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>3</span>
                </div>
            </div>


        <!-- 右侧个人信息 -->
        </div>
        <div class="container-right">
            <div class="blog-content">
                <h3>我的第一篇博客</h3>
                <div class="date">2024-3-27 22:33</div>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
            </div>
        </div>
    </div>
</body>
</html>

CSS

.blog-content h3{
    text-align: center;
}

登录页面

HTML

<!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="css/common.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
        <!-- 导航栏 -->
        <div class="nav">
            <!-- logo图片 -->
            <img src="image/logo.jpg" alt="" width="50px">
    
            <span class="title">我的博客系统</span>
            <span class="spacer"></span>
    
            <!-- 导航栏 -->
            <a href="blog_list.html">主页</a>
            <a href="blog_edit.html">写博客</a>
        </div>

        <!-- 登录板块 -->
        <div class="login-container">
            <div class="login-dialog">
                <p>登录</p>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" id="password">
            </div>
            <div class="row">
                <input type="button" value="提交"id="submit">
            </div>
            </div>
        </div>
</body>
</html>

CSS

.login-container{
    height: calc(100% - 50px);

    /* 开启弹性布局 block和flex  盒子用flex */
    display: flex;

    /* 水平居中 */
    justify-content: center;

    /* 垂直居中 */
    align-items: center;
}

.login-dialog{
    width: 500px;
    height: 300px;

    /* 半透明 */
    background-color: rgba(255,255,255,0.5);

    /* 圆角 */
    border-radius: 10px;
}

.login-dialog p{
    font-weight: 700;
    font-size: 30px;
    text-align: center;
}

.login-dialog h3{
    padding: 20px 0;

    /* 文字水平居中 */
    text-align: center;
}

.login-dialog .row{
   height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.login-dialog .row span{
    width: 100px;
    font-size: 20px;
    font-weight: 700;
}

#username, #password{
    /* 框大小 */
    width: 200px;
    height: 40px;

    font-size: 24px;

    /* 去掉框的边框黑线 */
    border: none;
    /* 去掉选择时的边框黑线 */
    outline: none;

    /* 输入字体的缩进 */
    padding-left: 5px;

    /* 圆角 */
    border-radius: 15px;
}


#submit{
    width: 300px;
    height: 40px;
    color: black;
    background-color: rgba(255,255,255,0.5);
    border-radius: 10px;

    /* 去掉边框 */
    border: none;
}

/* 点击变色 */
#submit:active{
    background-color: gray;
}

文章编辑页

这里需要放入editor.md，和JS文件的jquery.min.js的依赖，放入文章编辑的库

HTML

<!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="css/common.css">
    <link rel="stylesheet" href="css/blog-edit-container.css">

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <!-- logo图片 -->
        <img src="image/logo.jpg" alt="" width="50px">

        <span class="title">我的博客系统</span>
        <span class="spacer"></span>

        <!-- 导航栏 -->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>

    <div class="blog-edit-container">
        <!-- 标题编辑区 -->
        <div class="title">
            <!-- placeholder默认文字 -->
            <input type="text" id="title" placeholder="请输入文章标题">
            <input type="button" id="submit" value="发布文章">
        </div>

        <!-- 博客编辑区 -->
        <div id="editor">

        </div>
    </div>

    <script>
        var editor = editormd("editor", {
        width: "100%",
        height: "calc(100% - 50px)",
        markdown: "# 在这里写下一篇博客",
        path: "editor.md/lib/"
        });
    </script>
</body>
</html>

CSS

.blog-edit-container{
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
}

/* 标题编辑区 */
.title{
    height: 50px;
    /* 水平方向布局 */
    display: flex;

    /* 中间有间隙 */
    justify-content: space-between;

    /* 居中 */
    align-items: center;
}

/* 字体 */
#title{
    height: 40px;
    width: 890px;
    font-size: 24px;
    padding-left: 5px;

    /* 去掉边框轮廓线 */
    border: none;

    /* 选中时轮廓线 */
    outline: none;

    border-radius: 10px;
}

#submit{
    height: 45px;
    width: 100px;

    border-radius: 10px;

    color: white;
    background-color: coral;

    border: none;

    transition: all 0.5;
}

/* 点击时变色 */
#submit:active{
    background-color: gray;
}

#editor {
    /* 圆角 */
    border-radius: 10px;
    
    /* 因为他是复用editor的 所以现在这个块是子元素 用bc无法显示 */
    /* background-color: rgba(255, 255, 255, 0.8); */

    /* 用这个就都可以 */
    opacity: 80%;
}

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

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

相关文章

【PSINS工具箱】基于工具箱，自己设计的轨迹，并生成IMU数据和三维视图（完整代码）

【PSINS工具箱】基于工具箱，自己设计的轨迹，并生成IMU数据和三维视图（完整代码）

完整代码 在有工具箱的情况下&#xff0c;直接运行代码&#xff0c;即可 % 基于PSINS工具箱的三维轨迹生成、三维图像绘制与IMU数据生成 % date:2024-2-13 % Evand&#xff08;evandworldqq.com&#xff09; % Ver1 clear;clc;close all; glvs ts 0.1; % sampling int…
阅读更多...
Redis（十九）缓存过期淘汰策略

Redis（十九）缓存过期淘汰策略

文章目录 面试题内存满怎么办写入的数据如何删除的&#xff08;删除策略&#xff09;立即删除惰性删除上面两种方案都走极端 缓存淘汰策略配置文件LRU和LFU区别有哪些如何配置、修改 redis缓存淘汰策略配置性能建议 面试题 生产上你们的redis内存设置多少?如何配置、修改redi…
阅读更多...
动态规划-最长回文子串

动态规划-最长回文子串

动态规划-最长回文子串 原题描述解答中心移动思想代码实现复杂度分析时间复杂度空间复杂度 动态规划思想代码实现复杂度分析时间复杂度空间复杂度 突然觉得很有必要将学过的内容记录下来&#xff0c;这样后续在需要用到的时候就可以避免从头进行学习&#xff0c;而去看自己之前…
阅读更多...
【Threejs基础教程-光影篇】5.2 Threejs 阴影系统

【Threejs基础教程-光影篇】5.2 Threejs 阴影系统

5.2 Threejs阴影系统 学习ThreeJS的捷径在用光影系统之前threejs是实时光影web端目前没有优质的实时光影实时光影会大幅增加渲染压力没有独显的电脑不建议添加实时光影 阴影配置什么样的灯光可以产生阴影什么样的物体可以产生阴影和接受阴影注意开启阴影渲染灵活运用阴影 平行光…
阅读更多...
【Linux】普通用户提升权限

【Linux】普通用户提升权限

概述 在Linux环境下&#xff0c;给普通用户提权的方式&#xff0c;su与sudo命令&#xff0c;su是将一个普通用户登录为root&#xff0c;而sudo则是将普通用户短暂提升权限 普通用户使用$ root使用# 使用su提升权限 如果我们使用su将用户提升为root&#xff0c;此时需要输入…
阅读更多...
计算机网络：数据链路层 - 封装成帧 透明传输 差错检测

计算机网络：数据链路层 - 封装成帧 透明传输 差错检测

计算机网络&#xff1a;数据链路层 - 封装成帧 & 透明传输 & 差错检测 数据链路层概述封装成帧透明传输差错检测 数据链路层概述 从数据链路层来看&#xff0c;主机 H1 到 H2 的通信可以看成是在四段不同的链路上的通信组成的&#xff0c;所谓链路就是从一个节点到相邻…
阅读更多...
回溯算法|39.组合总和

回溯算法|39.组合总和

力扣题目链接 class Solution { private:vector<vector<int>> result;vector<int> path;void backtracking(vector<int>& candidates, int target, int sum, int startIndex) {if (sum > target) {return;}if (sum target) {result.push_back…
阅读更多...
CISP考前笔记

CISP考前笔记

1软件需求分析是保证软件质量的重要步骤&#xff0c;它的实施应该是在 软件定义阶段 1语句覆盖最弱&#xff0c;只需要让程序中的语句都执行一遍即可 。分支覆盖又称判定覆盖&#xff1a;使得程序中每个判断的取真分支和取假分支至少经历一次&#xff0c;即判断的真假均曾被满足…
阅读更多...
K8S命令行可视化实验

K8S命令行可视化实验

以下为K8s命令行可视化工具的实验内容&#xff0c;相比于直接使用命令行&#xff0c;可视化工具可能更直观、更易于操作。 Lens Lens是用于监控和调试的K8S IDE。可以在Windows、Linux以及Mac桌面上完美运行。在 Kubernetes 上&#xff1a; 托管地址&#xff1a;github/lensa…
阅读更多...
登录者个人信息查询

登录者个人信息查询

目录 &#x1f95e;1.vo层描述 &#x1f37f;2..vo层创建 &#x1f32d;3.编写controller层 &#x1f953;4.service层 &#x1f9c2;5.测试 1.vo层描述 Spring Boot项目中的实体类通常用于映射数据库表&#xff0c;包含了业务对象的所有属性。然而&#xff0c;前端或其…
阅读更多...
Verilog基础【一】

Verilog基础【一】

文章目录 1.1 第一个verilog设计1.2 Verilog 简介1.3 Verilog环境搭建1.4 Verilog 设计方法设计方法设计流程 2.1 Verilog 基础语法格式注释标识符与关键字 2.2 Verilog 数值表示数值种类整数数值表示方法实数表示方法十进制&#xff1a;科学计数法&#xff1a; 字符串表示方法…
阅读更多...
如何做慢查询优化？

如何做慢查询优化？

如何做慢查询优化&#xff1f; 这个问题可以说是一个高频问题&#xff0c;总是被问到&#xff0c;今天来总结下这个问题。 慢查询&#xff0c;就是 SQL 查询中耗时比较大的一类查询&#xff0c;MySQL 提供了慢查询日志 slow_query_log&#xff0c; 它会记录耗时大于我们设置…
阅读更多...
【Chapter2】进程、线程与作业，计算机操作系统教程，第四版，左万利，王英

【Chapter2】进程、线程与作业，计算机操作系统教程，第四版，左万利，王英

文章目录 [toc] 一、多道程序设计1.1单道程序设计的缺点1.2多道程序设计的提出1.3多道程序设计存在的问题 二、进程的引入2.1进程的概念2.2进程的组成2.2.1进程控制块2.2.2程序 2.3进程的类型及特征2.3.1进程的类型2.3.2进程的特征 2.4进程的状态及转换2.4.1进程的状态创建态就…
阅读更多...
项目亮点—动态线程池管理工具

项目亮点—动态线程池管理工具

问题 你是否在项目中使用线程池遇到过以下问题&#xff1f; 1.创建线程池核心参数不好评估&#xff0c;随着业务流量的波动&#xff0c;极有可能出现生产故障。 2.不支持优雅关闭&#xff0c;当项目关闭时&#xff0c;大量正在运行的线程池任务被丢弃。 3.不支持运行时监控…
阅读更多...
java每日一题——分礼物（多线程运用）

java每日一题——分礼物（多线程运用）

前言&#xff1a; 运用了多线程的综合案例&#xff0c;顺便熟悉一下其他语法。打好基础&#xff0c;daydayup!!! 题目&#xff1a; 有100份礼物&#xff0c;小红小明同时发送&#xff0c;当剩下的礼物小于10份的时候则不再送出&#xff0c;利用多线程模拟该过程并将线程的名称…
阅读更多...
R2GenCMN中的Encoder_Decoder结构

R2GenCMN中的Encoder_Decoder结构

R2GenCMN中的 Encoder_Decoder 结构 Encoder_Decoder 结构直接关系到文本的生成&#xff0c;它结构参考的transformer的结构 我们这里主要看代码的实现&#xff0c;从视觉编码器的输出开始 1. 模型结构 首先介绍一下整体结构&#xff0c;这里的baseCMN其实就是一个包装了的T…
阅读更多...
2024年noc指导教师认证测评参考试题题目5-6合集

2024年noc指导教师认证测评参考试题题目5-6合集

[noc指导教师认证] 测评参考试题 说明:NOC教师指导认证考试题目是从题库里抽题，因此每位老师每次考试题目都不一样以下题目为测试考试时收集到的一些题目，作为辅助提供给各位老师，老师们可以记住题目及答案的具体内容 (选项顺序会变)，以免考试时遇到。2024年的做的题目有的…
阅读更多...
两张图片相似度匹配算法学习路线

两张图片相似度匹配算法学习路线

大纲&#xff1a;​​​​​​目标跟踪基础&#xff1a;两张图片相似度算法-腾讯云开发者社区-腾讯云 (tencent.com) 目标跟踪基础&#xff1a;两张图片相似度算法 (qq.com) 一、传统方法 1.欧式距离&#xff08;用于判断是否完全相同&#xff09; [三维重建] [机器学习] 图…
阅读更多...
RAG进阶笔记：RAG进阶

RAG进阶笔记：RAG进阶

1 查询/索引部分 1.1 层次索引 创建两个索引——一个由摘要组成&#xff0c;另一个由文档块组成分两步进行搜索&#xff1a;首先通过摘要过滤出相关文档&#xff0c;接着只在这个相关群体内进行搜索 1.2 假设性问题 让LLM为每个块生成一个假设性问题&#xff0c;并将这些问…
阅读更多...
一文看懂DDR1到DDR5的演变

一文看懂DDR1到DDR5的演变

DDR内存技术自问世以来&#xff0c;已经经历了多代的迭代和优化。每一代DDR内存都在性能、容量、功耗和功能上有所提升。以下是从DDR1到DDR5的主要区别和特点&#xff1a; DDR1 DDR1是第一代双倍数据速率同步动态随机存取存储器&#xff0c;标志着内存技术的一个重要里程碑。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023