博客系统的页面设计

news2024/11/25 1:37:38

效果展示

博客列表页

在这里插入图片描述

博客详情页

在这里插入图片描述

博客登录页

在这里插入图片描述

博客编辑页

在这里插入图片描述

主要分成四个页面:

  • 博客列表页
    显示出都有哪些博客
  • 博客详情页
    展示博客的详细正文
  • 博客登录页
    进行登录操作
  • 博客编辑页
    有一个 markdown 编译器,可以编写博客内容

1.实现博客列表页

1.背景设计

body {
    /*注意这里相对路径的写法*/
    background-image: url("../image/11.jpg");
    background-repeat: no-repeat;
    background-position: center;
    /*让元素尽可能填满整个元素*/
    background-size: cover;
}

在这里,我们在给body设计背景图
在这里插入图片描述
但是此时body的高度是0

需要给body设计高度,才能正确显示

height: 1000px;

在这里插入图片描述

此时发现,如果给body设置固定高度,不能适应窗口大小,我们更希望body和浏览器窗口一样大!

html {
    height: 100%;
}
body {
    /*注意这里相对路径的写法*/
    background-image: url("../image/11.jpg");
    background-repeat: no-repeat;
    background-position: center;
    /*让元素尽可能填满整个元素*/
    background-size: cover;

    height: 100%;
}

在这里插入图片描述

height: 100%;

代表了当前元素的高度和父元素的高度一样~

按照当前html代码的写法

body的父元素是html元素.
html的父元素是浏览器窗口~~

此时再让body和html一样高body和浏览器窗口就一样高了!!

2.编写导航栏

本质上就是div,使用弹性布局,把里面的内容水平方向排列~

<!--导航栏,nav是导航栏的缩写-->
    <div class="nav">
        <!--logo-->
        <img src="1.jpg" alt="">
        <!---->
        <div class="title" >我的博客系统</div>
        <a href="list.html">主页</a>
        <a href="edit.html.html">写博客</a>
        <!--注销 这里的地址后面提到-->
        <a href="">注销</a>
    </div>

在这里插入图片描述
我们把样式加入后

/*导航栏*/
.nav {
    /*导航栏一般都是50px*/
    height: 50px;
    background-color: rgba(50,50,50,0.5);
    color: white;

    /*使用弹性布局,让里面的元素能够水平方向排列*/
    display: flex;
    align-items: center;
}

/*导航栏中的logo*/
.nav img {
    width: 40px;
    height: 40px;
    /*左右设置外边距,有一些缝隙*/
    margin-left: 30px;
    margin-right: 10px;
    /*设置圆角矩形,变成圆形*/
    border-radius: 20px;
}

.nav a {
    color: white;
    /*去掉a标签的下划线*/
    text-decoration: none;
    /*此处使用内边距把多个链接分出距离来*/
    padding: 0 10px;
}

.nav .spacer {
    width: 65%;

}

<body>
    <!--导航栏,nav是导航栏的缩写-->
    <div class="nav">
        <!--logo-->
        <img src="1.jpg" alt="">
        <!---->
        <div class="title" >我的博客系统</div>
        <!--只是一个空白,用来把后面的链接挤过去(这是一个简单粗暴地写法)-->
        <div class="spacer"></div>
        <a href="list.html">主页</a>
        <a href="edit.html.html">写博客</a>
        <!--注销 这里的地址后面提到-->
        <a href="">注销</a>
    </div>
</body>

在这里插入图片描述

3.编写主体部分

<!--页面主体部分-->
    <div class="container">
        <!--左侧信息-->
        <div class="container-left">

        </div>
        <!--右侧信息-->
        <div class="container-right">

        </div>
    </div>

/*页面的主题部分,也称为"版心"*/
.container {
    /*设置成固定宽度,水平居中*/
    width: 1000px;
    margin-left: auto;
    margin-right: auto;

    /*设置高度,和浏览器一样高*/
    height: 100%;
    background-color: gray;
}

在这里插入图片描述

发现给版心设置高度,不能直接100%,而是需要在100%的基础上,去掉一个导航栏的高度

    /*设置高度,和浏览器一样高*/
    height: calc(100% - 50px);

注意减号两边必须加空格,否则浏览器无法识别!!!

在这里插入图片描述
此时高度合适

/*页面的主体部分,也称为"版心"*/
.container {
    /*设置成固定宽度,水平居中*/
    width: 1000px;
    margin-left: auto;
    margin-right: auto;

    /*设置高度,和浏览器一样高*/
    height: calc(100% - 50px);
    background-color: gray;

    display: flex;
}

.container-left {
    height: 100%;
    width: 200px;
    background-color: red;
}

.container-right {
    height: 100%;
    /*留出来5px的缝隙*/
    width: 795px;
    background-color: aqua;
}

在这里插入图片描述
我们想留缝隙在中间，结果现在缝隙在最右边

/*页面的主体部分,也称为"版心"*/
.container {
    /*设置成固定宽度,水平居中*/
    width: 1000px;
    margin-left: auto;
    margin-right: auto;

    /*设置高度,和浏览器一样高*/
    height: calc(100% - 50px);
    background-color: gray;

    display: flex;

    /*让里面的元素可以等间距铺开*/
    justify-content: space-between;
}

在这里插入图片描述
这样就让缝隙在中间了

/*设置用户信息区域*/
.card {
    background-color: rgba(255,255,255,0.7);
    border-radius: 10px;
    padding: 30px;
}

/*设置用户头像*/
.card img {
    /*整个 .card 的宽度是200px .card 设置成四个方向的内边距,30px. */
    /*剩下能放图片的空间就是140px*/
    width: 140px;
    height: 140px;
    border-radius: 70px;
}

/*设置用户名*/
.card h3 {
    text-align: center;
    /*这里使用内边距,把用户名和头像,撑开一个边距,使用外边距也可以*/
    padding: 10px;
}

.card a {
    text-align: center;
    /*文字颜色设置*/
    color: gray;
    /*去掉下划线*/
    text-decoration: none;
}

<div class="container-left">
            <!--这个div标识整个用户信息的区域-->
            <div class = "card">
                <!--用户头像-->
                <img src = "3.jpg" alt = "">
                <!--用户名-->
                <h3>南北</h3>
                <!-- Gitee 地址-->
                <a href="https://gitee.com/D2814413094">Gitee 地址</a>
                <!--统计信息-->
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>

            </div>

在这里插入图片描述
当我们设置Gitee 地址 居中是发现并没有居中，是因为它不是块级元素，需要把a标签转换成块级标签。

.card a {
    text-align: center;
    /*文字颜色设置*/
    color: gray;
    /*去掉下划线*/
    text-decoration: none;
    /*需要把a标签转换成块级标签,上述文字水平居中才有意义*/
    display: block;
}

在这里插入图片描述

    <!--右侧信息-->
        <div class="container-right">
            <!--这个div表示一个博客-->
            <div class="blog">
                <!--博客标题-->
                <div class="title">我的第一篇博客</div>
                <!--博客的发布时间-->
                <div class="data">2022-1-26 20:07:11</div>
                <!--博客的摘要-->
                <div class="desc">
                    <!--使用lorem 生成一段随机的字符串-->
                    清夜无尘，月色如银。酒斟时、须满十分。浮名浮利，虚苦劳神。叹隙中驹，石中火，梦中身。虽抱文章，开口谁亲。且陶陶、乐尽天真。几时归去，作个闲人。对一张琴，一壶酒，一溪云。

                </div>
                <!--html中不能直接写大于号,大于号可能会被当成标签的一部分-->
                <!--&gt是大于号,&It是小于号-->
                <a href="detail.html?blog=1">查看全文 &gt;&gt;</a>
            </div>
            <div class="blog">
                <!--博客标题-->
                <div class="title">我的第二篇博客</div>
                <!--博客的发布时间-->
                <div class="data">2022-05-07 19:33:57</div>
                <!--博客的摘要-->
                <div class="desc">
                    <!--使用lorem 生成一段随机的字符串-->
                    适意行，安心坐，渴时饮，饥时餐，醉时歌，困来时就向莎茵卧。日月长，天地阔，闲快活！

                    旧酒投，新醅泼，老瓦盆边笑呵呵，共山僧野叟闲吟和。他出一对鸡，我出一个鹅，闲快活！

                    意马收，心猿锁，跳出红尘恶风波，槐阴午梦谁惊破？离了利名场，钻入安乐窝，闲快活！

                    南亩耕，东山卧，世态人情经历多，闲将往事思量过。贤的是他，愚的是我，争甚么？

                </div>
                <!--html中不能直接写大于号,大于号可能会被当成标签的一部分-->
                <!--&gt是大于号,&It是小于号-->
                <a href="detail.html?blog=1">查看全文 &gt;&gt;</a>
            </div>
            <div class="blog">
                <!--博客标题-->
                <div class="title">我的第三篇博客</div>
                <!--博客的发布时间-->
                <div class="data">2022-7-16 10:23:25</div>
                <!--博客的摘要-->
                <div class="desc">
                    <!--使用lorem 生成一段随机的字符串-->
                    忘忧草，含笑花，劝君闻早冠宜挂。那里也能言陆贾？那里也良谋子牙？那里也豪气张华？千古是非心，一夕渔樵话。
                </div>
                <!--html中不能直接写大于号,大于号可能会被当成标签的一部分-->
                <!--&gt是大于号,&It是小于号-->
                <a href="detail.html?blog=1">查看全文 &gt;&gt;</a>
            </div>
        </div>

/*专门写博客列表页的专属样式*/

/*设置整个blog div的样式*/
.blog {
    padding: 10px;
}

/*设置博客的标题*/
.blog .title {
    font-size: 22px;
    text-align: center;
    font-weight: 900;
}

/*设置发布时间*/
.blog .data {
    text-align: center;
    color: rgb(86,125,121);
    padding: 7px 0;
}

/*设置摘要部分*/
.blog .desc {
    /*em也是一个单位,和px是并列的,1em == 一个文字的大小*/
    text-indent: 2em;
}

.blog a {
    /*改成块级元素,此时才能够设置尺寸*/
    display: block;
    width: 150px;
    height: 40px;
    border: 2px solid black;

    /*把里面的文字修改一下颜色,和下划线*/
    color: black;
    text-align: center;
    text-decoration: none;

    /*当文字行高和元素高度一样时候,文字恰好是垂直居中的*/
    line-height: 40px;

    /*水平居中*/
    margin: 10px auto;

    /*加上背景切换的过度效果 all 表示针对所有变化都进行过渡,0.7s 过度的时间是2s*/
    transition: all 0.7s;
}

/*是一个伪类选择器,不是选中元素,而是选中元素的某种状态*/
/*:hover 就是选中了元素被鼠标悬停的状态*/
.blog a:hover {
    background-color: rgb(42,91,180);
    color: white;
}

效果展示
在这里插入图片描述

2.实现博客详情页

我们发现博客详情页和博客列表页有很多相似的地方,所以我们直接把相似的代码拷贝过来

<!--导航栏,nav是导航栏的缩写-->
<div class="nav">
  <!--logo-->
  <img src="1.jpg" alt="">
  <!---->
  <div class="title" >我的博客系统</div>
  <!--只是一个空白,用来把后面的链接挤过去(这是一个简单粗暴地写法)-->
  <div class="spacer"></div>
  <a href="list.html">主页</a>
  <a href="edit.html">写博客</a>
  <!--注销 这里的地址后面提到-->
  <a href="">注销</a>
</div>

<!--页面主体部分-->
<div class="container">
  <!--左侧信息-->
  <div class="container-left">
    <!--这个div标识整个用户信息的区域-->
    <div class = "card">
      <!--用户头像-->
      <img src = "3.jpg" alt = "">
      <!--用户名-->
      <h3>南北</h3>
      <!-- Gitee 地址-->
      <a href="https://gitee.com/D2814413094">Gitee 地址</a>
      <!--统计信息-->
      <div class="counter">
        <span>文章</span>
        <span>分类</span>
      </div>
      <div class="counter">
        <span>3</span>
        <span>1</span>
      </div>

    </div>
  </div>
  <!--右侧信息-->
  <div class="container-right">

  </div>
</div>

在这里插入图片描述
加入后

<head>
  <meta charset="UTF-8">
  <title>博客详情页</title>
  <link rel = "stylesheet" href="common.css">
</head>
<body>

在这里插入图片描述
具体代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>博客详情页</title>
  <link rel = "stylesheet" href="common.css">
  <link rel = "stylesheet" href="detail.css">
</head>
<body>
<!--导航栏,nav是导航栏的缩写-->
<div class="nav">
  <!--logo-->
  <img src="1.jpg" alt="">
  <!---->
  <div class="title" >我的博客系统</div>
  <!--只是一个空白,用来把后面的链接挤过去(这是一个简单粗暴地写法)-->
  <div class="spacer"></div>
  <a href="list.html">主页</a>
  <a href="edit.html">写博客</a>
  <!--注销 这里的地址后面提到-->
  <a href="">注销</a>
</div>

<!--页面主体部分-->
<div class="container">
  <!--左侧信息-->
  <div class="container-left">
    <!--这个div标识整个用户信息的区域-->
    <div class = "card">
      <!--用户头像-->
      <img src = "3.jpg" alt = "">
      <!--用户名-->
      <h3>南北</h3>
      <!-- Gitee 地址-->
      <a href="https://gitee.com/D2814413094">Gitee 地址</a>
      <!--统计信息-->
      <div class="counter">
        <span>文章</span>
        <span>分类</span>
      </div>
      <div class="counter">
        <span>3</span>
        <span>1</span>
      </div>

    </div>
  </div>
  <!--右侧信息-->
  <div class="container-right">
  <h3>这是我的第一篇博客</h3>
    <div class="data">2022-1-26 20:07:11</div>
    <div class="content">
      <p>清夜无尘，月色如银。酒斟时、须满十分。浮名浮利，虚苦劳神。叹隙中驹，石中火，梦中身。虽抱文章，开口谁亲。且陶陶、乐尽天真。几时归去，作个闲人。对一张琴，一壶酒，一溪云。</p>
      <p>清夜无尘，月色如银。酒斟时、须满十分。浮名浮利，虚苦劳神。叹隙中驹，石中火，梦中身。虽抱文章，开口谁亲。且陶陶、乐尽天真。几时归去，作个闲人。对一张琴，一壶酒，一溪云。</p>
      <p>清夜无尘，月色如银。酒斟时、须满十分。浮名浮利，虚苦劳神。叹隙中驹，石中火，梦中身。虽抱文章，开口谁亲。且陶陶、乐尽天真。几时归去，作个闲人。对一张琴，一壶酒，一溪云。</p>
      <p>清夜无尘，月色如银。酒斟时、须满十分。浮名浮利，虚苦劳神。叹隙中驹，石中火，梦中身。虽抱文章，开口谁亲。且陶陶、乐尽天真。几时归去，作个闲人。对一张琴，一壶酒，一溪云。</p>

    </div>
  </div>
</div>

</body>
</html>

.container-right h3 {
    font-size: 22px;
    text-align: center;
    font-weight: 900;
    padding: 15px 0;
}

.container-right .data {
    text-align: center;
    color: rgb(86,125,121);
    padding: 15px 0;
}

.container-right .content p {
    text-indent: 2em;
    margin-bottom: 5px;
}

效果展示
在这里插入图片描述
这样写完后,当内容太长,超出一个屏幕的时候,浏览器窗口就自动带有滚动条了,此时就会把背景滚没了~

改进方案:把滚动条加到container - right 上~

.container-right {
    height: 100%;
    /*留出来5px的缝隙*/
    width: 795px;
    /*加上白色半透明背景*/
    background-color: rgba(255,255,255,0.7);
    border-radius: 10px;
    padding: 20px;
    /*当内容超出范围时,自动添加滚动条*/
    overflow: auto;
}

在这里插入图片描述

3.实现博客登录页

登录页的注销按钮是需要去掉的,没登录,没有资格谈注销.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客登录页</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="login.css">
</head>
<body>
    <!--导航栏,nav是导航栏的缩写-->
    <div class="nav">
    <!--logo-->
    <img src="1.jpg" alt="">
    <!---->
    <div class="title" >我的博客系统</div>
    <!--只是一个空白,用来把后面的链接挤过去(这是一个简单粗暴地写法)-->
    <div class="spacer"></div>
    <a href="list.html">主页</a>
    <a href="edit.html">写博客</a>

</div>

    <!--登录页的版心-->
    <div class="login-container">
        <!--登录对话框-->
        <div class="login-dialog">
            <h3>登录</h3>
            <!--使用form包装一下下列内容,便于给后续服务器提交数据-->
            <form action="">
                <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="submit" value="登录">
                </div>
            </form>
        </div>
    </div>
</body>
</html>

代码的初步实现页面

在这里插入图片描述
接下来我们编写具体的样式

/*这个是登录页的css*/
.login-container {
    width: 100%;
    height: calc(100% - 50px);

    /*为了让login-dialog 垂直水平居中,使用弹性布局*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-dialog {
    width: 500px;
    height: 320px;
    background-color: rgba(255,255,255,0.7);
    border-radius: 10px;
}

/*登录标题*/
.login-dialog h3 {
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;;
}

/*针对每一行的样式*/
.row {
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/*每一行的文字*/
.row span {
    font-size: 20px;
    width: 60px;
}

.row #username {
    width: 350px;
    height: 40px;
    font-size: 20px;
    text-indent: 10px;

}

.row #password {
    width: 350px;
    height: 40px;
    font-size: 20px;
    text-indent: 10px;

}

.row #submit {
    width: 200px;
    height: 40px;
    color: white;
    background-color: rgba(46,93,197,0.8);
    text-align: center;
    line-height: 40px;
    /*去掉按钮默认的边框*/
    border: none;
    border-radius: 10px;
    margin-top: 40px;

}


.row #submit:hover {
    background: rgb(46,93,197);
}

最终效果在这里插入图片描述

4.实现博客编辑页

/*博客编辑页的样式*/
.blog-edit-container {
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
}

/*注意使用后代选择器,防止和 导航栏 .title 冲突*/
.blog-edit-container .title {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*标题输入框*/
#title-input {
    height: 40px;
    width: 897px;
    border-radius: 10px;
    border: none;
    font-size: 20px;
    text-indent: 10px;
}

/*提交按钮*/
#submit {
    height: 40px;
    width: 100px;
    border-radius: 10px;
    border: none;
    background-color: rgba(172,253,254,0.7);

}

#submit:hover {
    background-color: aqua;
}



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客编辑页</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="edit.css">
</head>
<body>
    <!--导航栏,nav是导航栏的缩写-->
    <div class="nav">
        <!--logo-->
        <img src="1.jpg" alt="">
        <!---->
        <div class="title" >我的博客系统</div>
        <!--只是一个空白,用来把后面的链接挤过去(这是一个简单粗暴地写法)-->
        <div class="spacer"></div>
        <a href="list.html">主页</a>
        <a href="edit.html">写博客</a>
        <!--注销 这里的地址后面提到-->
        <a href="">注销</a>
    </div>

    <!--博客编辑页的版心-->
    <div class="blog-edit-container">
        <form action="">
            <!--标题编辑区-->
            <div class="title">
                <input type="text" id="title-input">
                <input type="submit" id="submit">
            </div>
            <!--博客编辑器-->
            <!--把md编辑器放到这个div中-->
            <div id="editor">

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

页面的上半部分,已经完成了,接下来就是需要完成md编辑器~
在这里插入图片描述
markdown 编译器比较复杂~
通常直接使用现成的第三方库来实现~
js中,我们通常使用 editor.md 这个库来实现~

如何引用 editor.md ?

  1. 先引入editor.md 依赖~~ jquery.js
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  1. 下载editor.md 的代码到项目目录中~

在这里插入图片描述

  1. 在html中,引入 editor.md 的依赖~
<!-- 引入 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>
  1. 针对editor.md进行初始化
    主要是创建一个编辑器对象,并且关联到页面的某个元素中~

创建一个 ID 为editor 的div(注意,必须是ID属性,不是class)

在这里插入图片描述
在这里插入图片描述
最后效果

在这里插入图片描述

接下来在稍微修改一下

  1. 设置高度,铺满整个窗口,
  2. 引入圆角矩形
  3. 引入半透明效果
.blog-edit-container form {
    height: 100%;
   
}

#editor {
    border-radius: 10px;
    background-color: rgba(255,255,255,0.7);
}

在这里插入图片描述
虽然给背景色设置了半透明,但是仍然看不到最终的背景~

注意!!! editor 里面其实有很多的子元素,虽然editor本身半透明,但是里面的子元素不透明的~

我们可以使用特殊的属性来实现~

#editor {
    border-radius: 10px;
    /*background-color: rgba(255,255,255,0.7);*/
    /*这个半透明会让子元素也跟着一起半透明*/
    opacity: 70%;
}

在这里插入图片描述

此时,整个博客系统页面就大功告成了!

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

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

相关文章

95倒计时自律习惯养成计划打卡-day5

95倒计时自律习惯养成计划打卡-day5

阅读更多...
【UE5 C++ 學習日志】01. UEnhancedInput

【UE5 C++ 學習日志】01. UEnhancedInput

UE5 提供了一種對複雜輸入處理或運行時重新映射按鍵增强輸入插件。此插件向上兼容UE4的默認輸入系統&#xff0c;并可以實現径向死区、同时按键、上下文输入和优先级安排等多種功能。 核心概念&#xff1a; &#xff08;1&#xff09;Input Actions&#xff1a; Input Actio…
阅读更多...
ROS学习ROS基础

ROS学习ROS基础

ROS学习&#xff08;一&#xff09; ROS基础 一、工作空间基本操作二、ROS通信编程——话题编程 "hello world " 例程 1、创建发布者&#xff08;talker&#xff09;2、创建订阅者&#xff08;listener&#xff09;3、添加编译选项4、运行可执行文件 自定义话题消息…
阅读更多...
在PHP8中对数组进行排序-PHP8知识详解

在PHP8中对数组进行排序-PHP8知识详解

在php8中&#xff0c;提供了丰富的排序函数&#xff0c;可以对数组进行排序操作。常见的排序函数如下几个&#xff1a;sort() 函数、rsort() 函数、asort() 函数、arsort() 函数、ksort() 函数、krsort() 函数、natsort()函数和natcascsort()函数。 1、sort() 函数&#xff1a;…
阅读更多...
＜C++＞ 红黑树模拟实现map和set

＜C++＞ 红黑树模拟实现map和set

使用一颗红黑树同时封装map和set。 红黑树源码 #pragma once #include <cassert> #include <iostream> #include <utility> using namespace std;// 红黑树结点颜色 enum Colour {RED,BLACK, };template<class K, class V> struct RBTreeNode {//使用…
阅读更多...
分析常见数据结构在内存中的存储形式

分析常见数据结构在内存中的存储形式

本文会在x64dbg中分析vector,list,map的内存存储特点 目录 分析vector在内存中的存储形式 x32dbg分析vector数组 总结一下vector的内存布局 分析 list 在内存中的存储形式 x32dbg分析 list 数组 总结一下 list 的内存布局 分析map在内存中的存储形式 x32dbg分析map 总…
阅读更多...
python爬虫爬取电影数据并做可视化

python爬虫爬取电影数据并做可视化

思路&#xff1a; 1、发送请求&#xff0c;解析html里面的数据 2、保存到csv文件 3、数据处理 4、数据可视化 需要用到的库&#xff1a; import requests,csv #请求库和保存库 import pandas as pd #读取csv文件以及操作数据 from lxml import etree #解析html库 from …
阅读更多...
内网穿透工具 Cpolar 帮您实现用友U8 Cloud 的外网部署，一键畅享云端ERP

内网穿透工具 Cpolar 帮您实现用友U8 Cloud 的外网部署，一键畅享云端ERP

文章目录 前言1. 用户需求2. Cpolar内网穿透的安装和注册2.1 Cpolar云端设置2.2 Cpolar Web UI本地设置 3. 公网访问测试 前言 用友U8 Cloud是用友公司推出的一款云端ERP解决方案。它以云计算技术为基础&#xff0c;为企业提供全面的企业资源管理解决方案&#xff0c;涵盖了财…
阅读更多...
主机存活检测脚本

主机存活检测脚本

原理演示 在命令行下用下面命令安装scap模块&#xff1a; python -m pip install scapyscapy与scrapy 有非常大的区别。 scapy 是一个Python 的第三方模块&#xff0c;被称为“网络神器”。scapy 模块能够发送、捕获、分析和铸造网络数据 sr1发送接收函数 如图&#xff0c;安…
阅读更多...
AI绘画变现渠道：日入100+，推荐一个本人实操的方法

AI绘画变现渠道：日入100+，推荐一个本人实操的方法

关于AI绘画变现&#xff0c;之前写了几篇相关的文章&#xff0c;需要的自己查阅&#xff1a; AI绘画&#xff1a;如何让图片开口说话生成视频&#xff1f;变现渠道有哪些&#xff1f; 无私分享我的AI绘画变现之路&#xff0c;普通人可实操可模仿 AI壁纸号一周增加上千粉丝&a…
阅读更多...
二叉树题目：层数最深叶子结点的和

二叉树题目：层数最深叶子结点的和

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;层数最深叶子结点的和 出处&#xff1a;1302. 层数最深叶子结点的和 难度 4 级 题目描述 要求 给定一个二叉树…
阅读更多...
有效的括号（栈的高频面试题）

有效的括号（栈的高频面试题）

一、题目描述 题目连接&#xff1a;有效的括号 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺…
阅读更多...
我的创作纪念日 · 开始创作的第128天~

我的创作纪念日 · 开始创作的第128天~

我的创作纪念日 开始创作的第128天 1️⃣ 机缘2️⃣ 收获3️⃣ 日常4️⃣ 憧憬 1️⃣ 机缘 时光匆匆&#xff0c;春去秋来&#xff0c;2023年在CSDN下笔的128天已去&#xff0c;回想当初成为创作者的初心&#xff0c;现在的心境已截然不同。当时正值上家公司工作变动&#xf…
阅读更多...
【大数据】Doris 构建实时数仓落地方案详解（二）：Doris 核心功能解读

【大数据】Doris 构建实时数仓落地方案详解（二）：Doris 核心功能解读

Doris 构建实时数仓落地方案详解&#xff08;二&#xff09;&#xff1a;Doris 核心功能解读 1.Doris 发展历程2.Doris 三大模型3.Doris 数据导入4.Doris 多表关联5.Doris 核心设计6.Doris 查询优化7.Doris 应对实时数仓的痛点 1.Doris 发展历程 Apache Doris 是由 百度 研发并…
阅读更多...
华为云云耀云服务器L实例评测｜用Python的Flask框架加Nginx实现一个通用的爬虫项目

华为云云耀云服务器L实例评测｜用Python的Flask框架加Nginx实现一个通用的爬虫项目

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;AWS/阿里云资深使用…
阅读更多...
QUIC协议报文解析(三)

QUIC协议报文解析(三)

在前面的两篇文字里我们简单介绍了QUIC的发展历史&#xff0c;优点以及QUIC协议的连接原理。本篇文章将会以具体的QUIC报文为例&#xff0c;详细介绍QUIC报文的结构以及各个字段的含义。 早期QUIC版本众多&#xff0c;主要有谷歌家的gQUIC&#xff0c;以及IETF致力于将QUIC标准…
阅读更多...
数据结构之堆的结构与实现

数据结构之堆的结构与实现

目录 一、堆的概念及结构 1.1堆的概念 1.2堆的性质 1.3堆的结构 二、堆的实现 2.1堆向下调整算法&#xff08;父亲与孩子做比较&#xff09; 2.2堆的向上调整算法&#xff08;孩子与父亲做比较&#xff09; 2.3堆的创建&#xff08;向下建堆&#xff09; 2.4向下建堆的时…
阅读更多...
26 WEB漏洞-XSS跨站之订单及Shell箱子反杀记

26 WEB漏洞-XSS跨站之订单及Shell箱子反杀记

目录 xss平台及工具使用session与Cookie获取问题演示案例某营销订单系统XSS盲打_平台某Shell箱子系统XSS盲打_工具其他参考应用案例-后台权限维持工具Http/s数据包提交Postman使用 xss平台及工具使用 凡是有数据交互的地方&#xff0c;前端是接收数据的&#xff0c;后端是要把…
阅读更多...
Android Kotlin 高阶详解

Android Kotlin 高阶详解

前言 本文主要讲述kotlin高阶相关的内容&#xff0c;如果对kotlin基础还不了解的&#xff0c; 可以参考文章Android Kotlin 基础详解_袁震的博客-CSDN博客 1&#xff0c;与Java的相互调用 1.1在kotlin中调用java代码 大多数的java代码都可以直接在kotlin中调用&#xff0c…
阅读更多...
Spring Cloud Alibaba Nacos注册中心（单机）

Spring Cloud Alibaba Nacos注册中心（单机）

文章目录 Spring Cloud Alibaba Nacos注册中心&#xff08;单机&#xff09;1. docker 安装 nacos&#xff08;先别着急&#xff09;2. 配置nacos持久化到mysql、2.1 properties 文件 3. java注册3.1 POM文件3.2 properties文件3.3 测试配置中心 4.注册中心4.1 配置文件4.2测试…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023