博客系统页面设计

news2024/10/6 18:24:26

目录

前言

1.预期效果

1.1博客列表页效果

1.2博客详情页效果

1.3博客登陆页效果

2.实现博客列表页

2.1实现导航栏

2.2实现版心

2.3实现个人信息

2.4实现博客列表

3.实现博客正文页

3.1引入导航栏

3.2引入版心

3.3引入个人信息

3.4实现博客正文

4.实现博客登陆页

4.1引入导航栏

4.2实现版心

4.3实现登陆框

5.实现博客编辑页

5.1引入导航栏

5..2实现编辑区

5.3引入 editor.md

前言

实现一个简单的博客系统.
当前先完成页面设计的部分. 通过前面学习的前端知识来构建出网页.
主要分成四个页面:
        博客列表页
        博客正文页
        博客登陆页
        博客编辑页

1.预期效果

1.1博客列表页效果

1.2博客详情页效果

1.3博客登陆页效果

2.实现博客列表页

创建 blog_list.html, 编写博客列表页.

2.1实现导航栏

编辑 blog_list.html, 创建导航栏的 html 代码.
导航栏里面包含 logo, 标题, 以及一些按钮(跳转链接).
为了实现左右排列, 在 logo 和 按钮 之间加一个 spacer 作为占位器.

<!-- 导航栏 -->
<div class="nav">
  <img src="img/logo2.jpg" alt="">
  <span class="title">我的博客系统</span>
  <!-- 用来占据中间位置 -->
  <span class="spacer"></span>
  <a href="blog_list.html">主页</a>
  <a href="blog_edit.html">写博客</a>
  <a href="logout">注销</a>
</div>

准备一个 logo2.jpg, 放到 img 目录中.

创建 common.css .
对于导航栏来说, 每个页面都需要, 因此把样式提取出来.
先清除浏览器默认样式
准备一个 cat.jpg 作为背景图.
需要把 html 和 body 高度都设为 100%, 使背景的高度和浏览器窗口高度一样.
导航栏 nav 内部使用 flex 布局, 用来排列 logo 和一些按钮.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 设置整体页面高度 */
html, body {
  height: 100%;
  background-image: url(../img/cat.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* 上方导航栏 */
.nav {
  width: 100%;
  height: 50px;
  background-color: rgba(51, 51, 51, 0.4);
  color: #fff;
  display: flex;
  justify-content: left;
  align-items: center;
}
/* 导航栏中的图标 */
.nav img {
  width: 40px;
  height: 40px;
  margin-left: 30px;
  margin-right: 10px;
  border-radius: 50%;
}
/* 导航栏中的占位器 */
.nav .spacer {
  width: 70%;
}
/* 导航栏中的按钮 */
.nav a {
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
}

引入 common.css

<link rel="stylesheet" href="css/conmmon.css">

2.2实现版心

编辑 blog_list.html
container 作为版心, 实现居中对齐的效果.
左侧放用户信息
右侧放博客列表

<!-- 版心 -->
<div class="container">
  <!-- 左侧个人信息 -->
  <div class="container-left">
  </div>
  <!-- 右侧内容详情 -->
  <div class="container-right">
  </div>
</div>

编辑 common.css

/* 页面内容容器, 版心 */
.container {
  /* 使用 calc 计算高度 */
  height: calc(100% - 50px);
  /* 设置版心宽度 */
  width: 1000px;
  /* 水平居中 */
  margin: 0 auto;
  /* 使用弹性布局 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 左侧部分, 用来放置用户信息 */
.container-left {
  height: 100%;
  width: 200px;
}
/* 右侧部分, 用来放置正文 */
.container-right {
  height: 100%;
  /* 和左侧部分中间留出 5px 间隙 */
  width: 795px;
  /* 如果内容溢出就自动加上滚动条 */
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
}

2.3实现个人信息

编辑 blog_list.html
把个人信息放到一个 .card div 中.
个人信息中包含 头像 (img), 用户名 (h3), 用户的 github (a), 用户的文章数量和分类数量.

<!-- 左侧个人信息 -->
<div class="container-left">
  <div class="card">
    <img src="img/doge.jpg" class="avtar" alt="">
    <h3>小林</h3>
    <a href="http:www.github.com">github 地址</a>
    <div class="counter">
      <span>文章</span>
      <span>分类</span>
    </div>
    <div class="counter">
      <span>2</span>
      <span>1</span>
    </div>
  </div>
</div>

编辑 common.css

/* 展示用户信息的卡片 */
.card {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  padding: 30px;
}
/* 用户头像 */
.card img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
}
/* 用户名 */
.card h3 {
  text-align: center;
  padding: 10px;
}
/* 用户 github 链接 */
.card a {
  display: block;
  text-align: center;
  color: #999;
  text-decoration: none;
  padding: 10px;
}
/* 展示文章数目的面板 */
.card .counter {
  padding: 5px;
  display: flex;
  justify-content: space-around;
}

2.4实现博客列表

编辑 blog_list.html
每个博客使用 div.blog 来表示.
每个博客中包含标题, 发布时间, 描述, 查看全文按钮.

        <div class="container-right">  
            <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2023-10-15</div>
                <div class="desc">
                    从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Cum distinctio ullam eum ut
                    veroab laborum numquam tenetur est in dolorum a sint, assumenda
                    adipisci similique quaerat vel.Facere,et.
                </div>
                <a href="content.html" class="detail">查看全文&gt;&gt;</a>
                <div class="title">我的第二篇博客</div>
                <div class="date">2023-10-15</div>
                <div class="desc">
                    从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Cum distinctio ullam eum ut
                    veroab laborum numquam tenetur est in dolorum a sint, assumenda
                    adipisci similique quaerat vel.Facere,et.
                </div>
                <a href="content.html" class="detail">查看全文&gt;&gt;</a>
            </div>
        </div>

创建 blog_list.css
这部分内容不再是公共部分了, 放到单独的 css 中.
使用伪类选择器 .blog .detail:hover , 实现光标悬停时修改样式的功能.
给 .blog .detail 中加上过度效果 transition: all 0.3s; 使悬停的样式改变更 逼真 .

/* 表示第一篇博客 */
.blog {
    width: 100%;
    padding: 10px 20px;
}
/* 博客的标题 */
.blog .title {
    color: black;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    padding: 10px 0;
}
/* 博客的摘要 */
.blog .desc {
    color: #000;
    text-indent: 2em;
    margin-top: 10px;
}
/* 博客的日期 */
.blog .date {
    color: #008000;
    margin-top: 10px;
    text-align: center;
}
/* 查看详情按钮 */
.blog .detail {
    display: block;
    width: 120px;
    height: 40px;
    line-height: 40px;
    color: black;
    text-align: center;
    text-decoration: none;
    margin: 10px auto 0 auto;
    border: 2px solid black;
    /* 给颜色加上过渡效果 */
    transition: all 0.3s;
}
/* 查看详情按钮的鼠标hover效果 */
.blog .detail:hover {
    background-color: #000;
    color: #fff;
}

引入 blog_list.css

<link rel="stylesheet" href="css/blog_content.css">

3.实现博客正文页

创建 blog_content.html

3.1引入导航栏

编辑 blog_content.html
这部分代码和 blog_list.html 中相同, 直接复制即可.

<!-- 导航栏 -->
<div class="nav">
  <img src="img/logo2.jpg" alt="">
  <span class="title">我的博客系统</span>
  <!-- 用来占据中间位置 -->
  <span class="spacer"></span>
  <a href="blog_list.html">主页</a>
  <a href="blog_edit.html">写博客</a>
  <a href="logout">注销</a>
</div>

引入样式 common.css

<link rel="stylesheet" href="css/conmmon.css">

3.2引入版心

编辑 blog_content.html
这部分代码和 blog_list.html 相同, 直接复制

<!-- 版心 -->
<div class="container">
  <!-- 左侧个人信息 -->
  <div class="container-left">
  </div>
  <div class="container-right">
   
  </div>
</div>

3.3引入个人信息

编辑 blog_content.html
这部分代码和 blog_list.html 相同, 直接复制

<!-- 左侧个人信息 -->
<div class="container-left">
  <div class="card">
    <img src="img/doge.jpg" class="avtar" alt="">
    <h3>小林</h3>
    <a href="http:www.github.com">github 地址</a>
    <div class="counter">
      <span>文章</span>
      <span>分类</span>
    </div>
    <div class="counter">
      <span>2</span>
      <span>1</span>
    </div>
  </div>
</div>

3.4实现博客正文

编辑 blog_content.html
博客内容整体放到 div.blog-content 中.
博客内容中包含博客标题 (h3), 博客时间(div.date), 博客正文(p)

<div class="blog-content">

  <!-- 博客标题 -->
  <h3>我的第一篇博客</h3>
  <!-- 博客时间 -->
  <div class="date">2021-06-02</div>
  <!-- 博客正文 -->
  <p>
   从今天起我要好好敲代码.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
omnis natus ut! Autem alias
   ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
mollitia dolorum animi.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
omnis natus ut! Autem alias
   ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
mollitia dolorum animi.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
omnis natus ut! Autem alias
   ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
mollitia dolorum animi.
  </p>
  <p>
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint
accusantium, enim iste
   corrupti itaque, omnis alias maiores nemo quae rerum deleniti facere
officiis iure velit. Blanditiis
   pariatur delectus perferendis.
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint
accusantium, enim iste
   corrupti itaque, omnis alias maiores nemo quae rerum deleniti facere
officiis iure velit. Blanditiis
   pariatur delectus perferendis.
  </p>
</div>

创建 blog_content.css

/* 博客正文容器 */
.blog-content {
  padding: 30px;
}
/* 博客标题 */
.blog-content h3 {
  text-align: center;
  padding: 20px 0;
}
/* 博客日期 */
.blog-content .date {
  color: #008000;
  padding: 10px 0;
  text-align: center;
}
/* 博客内容段落 */
.blog-content p {
  text-indent: 2em;
  padding: 10px 0;
}

引入 blog_content.css

<link rel="stylesheet" href="css/blog_content.css">

4.实现博客登陆页

4.1引入导航栏

编辑 login.html
这部分代码和 blog_list.html 中相同, 直接复制即可.

<!-- 导航栏 -->
<div class="nav">
  <img src="img/logo2.jpg" alt="">
  <span class="title">我的博客系统</span>
  <!-- 用来占据中间位置 -->
  <span class="spacer"></span>
  <a href="blog_list.html">主页</a>
  <a href="blog_edit.html">写博客</a>
  <a href="logout">注销</a>
</div>

引入样式 common.css

<link rel="stylesheet" href="css/conmmon.css">

4.2实现版心

编辑 login.html
使用 flex 使登陆对话框能够在页面中水平垂直居中.

<!-- 版心 -->
<div class="login-container">
 
</div>

创建 login.css

.login-container {
  width: 100%;
  height: calc(100% - 50px);
  display: flex;
  justify-content: center;
  align-items: center;
}

引入 login.css

<link rel="stylesheet" href="css/login.css">

4.3实现登陆框

编辑 login.html
登陆框整体放到 div.login-dialog 中.
内部包含三个行, 使用 div.row 表示.
每个行里分别包含, 用户名输入框, 密码输入框, 提交按钮.

编辑 login.css
使用 #submit:active 伪类选择器, 实现点击按钮时样式切换的效果.

.login-dialog {
  width: 400px;
  height: 400px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
}
.login-dialog h3 {
  padding: 50px 0;
  text-align: center;
}
.login-dialog .row {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-dialog .row span {
  display: block;
  width: 100px;
  font-weight: 700;
}
#username,
#password {
  width: 200px;
  height: 40px;
  line-height: 40px;
  font-size: 24px;
  border-radius: 10px;
  border: none;
  outline: none;
  text-indent: 10px;
}
#submit {
  width: 300px;
  height: 50px;
  color: white;
  background-color: green;
  border: none;
  border-radius: 10px;
}
#submit:active {
  background-color: #666;
}

5.实现博客编辑页

创建 blog_edit.html

5.1引入导航栏

编辑 blog_edit.html
这部分代码和 blog_list.html 中相同, 直接复制即可.

<!-- 导航栏 -->
<div class="nav">
  <img src="img/logo2.jpg" alt="">
  <span class="title">我的博客系统</span>
  <!-- 用来占据中间位置 -->
  <span class="spacer"></span>
  <a href="blog_list.html">主页</a>
  <a href="blog_edit.html">写博客</a>
  <a href="logout">注销</a>
</div>

引入样式 common.css

<link rel="stylesheet" href="css/conmmon.css">

5..2实现编辑区

编辑 blog_edit.html
整个编辑区放到 div.blog-edit-container 中.
里面包含一个标题编辑区, 和内容编辑区.
标题编辑区, 包含一个 input, 用来填写标题, 以及一个 button 按钮用于提交.
内容编辑区先创建一个 div#editor, 后面将使用 editor.md 进行初始化.

<!-- 编辑框容器 -->
<div class="blog-edit-container">
  <!-- 标题编辑区 -->
  <div class="title">
    <input type="text" placeholder="在这里写下文章标题" id="title">
    <button id="submit">发布文章</button>
  </div>
  <!-- 创建编辑器标签 -->
  <div id="editor"></div>
</div>

创建 blog_edit.css
#editor 需要使用 opacity: 80%; 设置透明度. 如果直接使用 background-color 后面会被
editor.md 给覆盖掉.

.blog-edit-container {
  width: 1000px;
  height: calc(100% - 50px);
  margin: 0 auto;
}
.blog-edit-container .title {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#title {
  height: 40px;
  width: 890px;
  text-indent: 10px;
  border-radius: 10px;
  outline: none;
  border: none;
  background-color:rgba(255, 255, 255, 0.8);
}
#submit {
  height: 40px;
  width: 100px;
  color: white;
  background-color: orange;
  border: none;
  outline: none;
  border-radius: 10px;
}
#editor {
  border-radius: 10px;
  /* 针对 #editor 用 bgc 属性无法设置半透明了. 里面包含的内容带了背景色 */
  /* background-color:rgba(255, 255, 255, 0.8); */
  /* 可以使用 opacity 属性实现 */
  opacity: 80%;
}

5.3引入 editor.md

editor.md 是一个开源的页面 markdown 编辑器组件.
官网参见: https://pandao.github.io/editor.md/
用法可以参考代码中的 examples 目录中的示例. 非常丰富.

1) 下载 editor.md
从官网上下载到压缩包. 放到目录中. 目录结构如下:

2) 引入 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>

3) 初始化 editor.md
编辑 blog_edit.html
 

// 初始化编辑器
var editor = editormd("editor", {
  // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
  width: "100%",
  // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
  height: "calc(100% - 50px)",
  // 编辑器中的初始内容
  markdown: "# 在这里写下一篇博客",
  // 指定 editor.md 依赖的插件路径
  path: "editor.md/lib/"
});

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

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

相关文章

javascript原来还可以这样比较两个日期(直接使用new Date)

javascript原来还可以这样比较两个日期(直接使用new Date)

有个需求是这样的&#xff1a;假设今天是2023/11/15 有一个表格&#xff0c;表格中操作列按钮的展示与隐藏依靠开始结束日期来进行展示&#xff0c;如果当前日期在开始结束日期之间&#xff0c;则进行展示&#xff0c;我一开始做的时候使用new Date转换成时间戳(getTime)进行比…
阅读更多...
7天入门python系列之爬取热门小说项目实战，互联网的东西怎么算白嫖呢

7天入门python系列之爬取热门小说项目实战，互联网的东西怎么算白嫖呢

第七天 Python项目实操 编者打算开一个python 初学主题的系列文章&#xff0c;用于指导想要学习python的同学。关于文章有任何疑问都可以私信作者。对于初学者想在7天内入门Python&#xff0c;这是一个紧凑的学习计划。但并不是不可完成的。 学到第7天说明你已经对python有了一…
阅读更多...
生活消费分销系统搭建开发制作

生活消费分销系统搭建开发制作

文章目录 前言 一、生活消费系统是什么&#xff1f;二、生活消费分销系统的营销方式和功能三、总结 一、生活消费系统介绍 生活消费系统涵盖了吃喝玩乐&#xff0c;衣食住行。网购消费等生活消费的优惠券领取以及分销功能 二、生活消费分销系统的营销方式和功能 A: 会员体…
阅读更多...
基于Springboot的影城管理系统（有报告）。Javaee项目，springboot项目。

基于Springboot的影城管理系统（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的影城管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 项目介绍…
阅读更多...
【Proteus仿真】【Arduino单片机】DS18B20温度计

【Proteus仿真】【Arduino单片机】DS18B20温度计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使用PCF8574、LCD1602液晶、DS18B20温度传感器等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602显示传感器采集温度。 二、软件设计 /*…
阅读更多...
Android抓包工具—Fiddler详解

Android抓包工具—Fiddler详解

前言 平时和其他大佬交流时&#xff0c;总会出现这么些话&#xff0c;“抓个包看看就知道哪出问题了”&#xff0c;“抓流量啊&#xff0c;payload都在里面”&#xff0c;“这数据流怎么这么奇怪”。 &#x1f449;这里出现的名词&#xff0c;其实都是差不多的意思啊&#xf…
阅读更多...
leetcode:1576. 替换所有的问号(python3解法)

leetcode:1576. 替换所有的问号(python3解法)

难度&#xff1a;简单 给你一个仅包含小写英文字母和 ? 字符的字符串 s&#xff0c;请你将所有的 ? 转换为若干小写字母&#xff0c;使最终的字符串不包含任何 连续重复 的字符。 注意&#xff1a;你 不能 修改非 ? 字符。 题目测试用例保证 除 ? 字符 之外&#xff0c;不存…
阅读更多...
Unity反编译：IL2CPP 打包输出的cpp文件和dll(程序集)位置、Mono打包输出的dll(程序集)位置

Unity反编译：IL2CPP 打包输出的cpp文件和dll(程序集)位置、Mono打包输出的dll(程序集)位置

目录 如题&#xff1a;IL2CPP 打包输出的cpp文件和dll位置(并不会出现在APK里) 如题&#xff1a;Mono打包输出的dll位置 校验平台&#xff1a;Android 如题&#xff1a;IL2CPP 打包输出的cpp文件和dll位置(并不会出现在APK里) Unity Assets同级目录下 Temp/StagingArea/Il2…
阅读更多...
C# datagridView 控件使用心得

C# datagridView 控件使用心得

首先本人的需求是&#xff0c;通过UI编辑一个表格文件&#xff0c;然后将其存储起来。 同时也可以对其进行载入,话不多说先上图片 dataGridView1 的初始化&#xff0c;这个控件的初始化可以使用UI界面的设置&#xff0c;也可以使用程序&#xff1a; Column1 new System.Window…
阅读更多...
开源免费的Windows应用程序强力卸载工具Bulk Crap UninstallerV5.7的简单使用

开源免费的Windows应用程序强力卸载工具Bulk Crap UninstallerV5.7的简单使用

经常遇到Windows平台上安装的一些应用&#xff0c;因为应用自带的安装卸载程序有问题、应用的卸载程序损坏、应用卸载需要密码等原因&#xff0c;导致应用无法卸载、卸载不完整等。本介绍了开源的Windows应用程序强力卸载工具Bulk Crap UninstallerV5.7和安装使用的简单说明。 …
阅读更多...
Ubuntu 搜狗输入法无法输入中文解决方案（不需要重装，不需要重启服务器）

Ubuntu 搜狗输入法无法输入中文解决方案（不需要重装，不需要重启服务器）

Ubuntu 搜狗输入法突然无法输入中文&#xff0c;上午还好用&#xff0c;下午就不好用了&#xff0c;直接上解决方案 1.终端输入pidof fcitx找到搜狗的进程&#xff0c;如下图红框中的就是进程 2.直接杀掉这个进程 3.其实到第二步&#xff0c;如果搜狗输入法自动重启了&#xf…
阅读更多...
数据库事务相关问题

数据库事务相关问题

1. 什么是数据库事务&#xff1f; 事务&#xff0c;由一个有限的数据库操作序列构成&#xff0c;这些操作要么全部执行,要么全部不执行&#xff0c;是一个不可分割的工作单位。 假如A转账给B 100 元&#xff0c;先从A的账户里扣除 100 元&#xff0c;再在 B 的账户上加上 100 …
阅读更多...
力扣每日一道系列 --- LeetCode 160. 相交链表

力扣每日一道系列 --- LeetCode 160. 相交链表

&#x1f4f7; 江池俊&#xff1a; 个人主页 &#x1f525;个人专栏&#xff1a; ✅数据结构探索 ✅LeetCode每日一道 &#x1f305; 有航道的人&#xff0c;再渺小也不会迷途。 LeetCode 160. 相交链表 思路&#xff1a; 首先计算两个链表的长度&#xff0c;然后判断两个链…
阅读更多...
原生js做打地鼠游戏

原生js做打地鼠游戏

抱歉素材有点难找&#xff0c;这次的学习重点是在JS的实现&#xff0c;梳理一下打地鼠的实现逻辑&#xff0c;主要分为三个主要功能函数。 开始游戏&#xff1a;对分数、并根据游戏难度对游戏的倒计时和延迟进行初始化之后&#xff0c;利用setInterval定时器Math.random随机函…
阅读更多...
淘宝客APP源码/社交电商自营商城源码/前端基于Uniapp开发

淘宝客APP源码/社交电商自营商城源码/前端基于Uniapp开发

淘宝客APP源码&#xff0c;前端基于Uniapp开发的社交电商自营商城源码。Thinkphp的后台&#xff0c;不是很标准&#xff0c;感兴趣的可以自行研究。 商城功能 1、首页基础装修&#xff1b;2、丰富选品库&#xff1b;3、淘口令解析&#xff1b;4、支持京东&#xff1b;5、支持…
阅读更多...
python链表_递归求和_递归求最大小值

python链表_递归求和_递归求最大小值

创建一个单链表&#xff1a; class LinkNode: #设置属性def __init__(self,data None):self.data dataself.next None class LinkList: #设置头结点def __init__(self):self.head LinkNode()self.head.next Nonedef CreateListR(self,a): …
阅读更多...
CSS英文单词强制截断换行

CSS英文单词强制截断换行

效果图&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>菜鸟教程(runoob.com)</title> <style> p.test1 {width:9em; border:1px solid #000000;word-break:keep-all; }p.…
阅读更多...
SQL note2：DIsks and Files

SQL note2：DIsks and Files

目录 1、内存和磁盘 2、磁盘API 3、磁盘结构 4、访问磁盘页面 5、磁盘 vs SSD 5、磁盘空间管理 6、Files, Pages, Records 7、选择文件类型 8、堆文件 1&#xff09;链表实现 2&#xff09;页面目录实现 9、排序文件 10、关于计算标题页的注意事项 11、记录类型 …
阅读更多...
黄金投资面对K线图有哪些好用的交易策略？

黄金投资面对K线图有哪些好用的交易策略？

在现货黄金交易中&#xff0c;学会观察K线图能够帮助投资者进行市场分析&#xff0c;根据K线图呈现出来的市场走势制定交易策略&#xff0c;是技术分析的主要作用。在黄金买卖过程中掌握K线交易技巧能够提升理财效率&#xff0c;所以这也就成为了炒金者的必修课。 K线图是以交…
阅读更多...
Java 算法篇-链表的经典算法：根据值删除节点、删除倒数第 n 个节点

Java 算法篇-链表的经典算法：根据值删除节点、删除倒数第 n 个节点

&#x1f525;博客主页&#xff1a; 小扳_-CSDN博客 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 链表的创建 2.0 链表的经典算法 - 根据值来删除节点 2.1 根据值来删除节点 - 遍历链表来实现 2.2 根据值来删除节点 - 递归实现 3.0 链表的经典算法 - 删除倒数第 n…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023